Jump to content

Submit button doesn't do hover effects in IE???


Guest estelle

Recommended Posts

Okay, this is really annoying...

Submit buttons (eg. search "Go" button, mailing list "Join" button) don't do any hover effects in IE. In fact the cursor doesn't even change to a hand cursor to indicate that there is something to click on.

Does anyone know of a workaround for this?

I tried to change my submit buttons to a text button (ie. like the "View Cart" button), but I can't get this to work unless the form type is changed to POST, but I want to leave it as GET otherwise the email address or search terms will clutter up the url.

Estelle.

Link to comment
Share on other sites

You have a URL for us to look at?

- Change arrow into pointer/hand: add a css style to the input or into your css style sheet:

input:

<input type='submit' class='submit' bla bla bla style='cursor: pointer'>

css sheet:

.submit {

font-family: Arial, Helvetica, sans-serif;

color: #FFFFFF;

background-color: #070F72;

border: none;

height: 18px;

font-weight: bold;

border: 1px solid #070F72;

cursor: pointer;

}

The reason why the "join" and "go" button does not have a hover effect to it is simply because there is nothing defined or appointed to it. You can change this in your templates, open your skins\{your skin style}\styleTemplates\boxes and open mailList.tpl and searchForm.tpl.

You probably would like more details on this but give it a go and if more help needed let me know and i'll set something up for you...

Link to comment
Share on other sites

roban - Thanks for the link. Interesting solution. Better than the one I found.. but I'm just happy I found a way to make it work :)

Mobie - Thanks for the tip regarding cursor:. But, even after creating a .submit:hover style, the hover effects still wouldn't work with IE. .submit:hover is currently shown not working on my www link (ie. the search button and mailing list button.... but I will update the site soon with the following solution). I did end up adding cursor to my style sheet. Also, i found a workaround to get the other style attributes (background-color etc) to be applied upon mouseover. Maybe not the best solution, but it works!:

Changed the submit button in the skin template file (eg. in styleTemplates/boxes/mailList.tpl) from this:

<input name="Submit" type="submit" class="submit" value="{LANG_GO}" />


To this:
<input name="Submit" type="submit" class="submit" value="{LANG_GO}" onmouseover="this.className='submitHover'" onmouseout="this.className='submit'" />

Added cursor to my .submit style, and added .submitHover style to my stylesheet (note that .submit:hover *did not work* in all browsers).

.submit, .submitHover {

        font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;

        font-size: 11px;

        text-align: center;

        text-decoration: none;

        color: #FFFFFF;

        background-color: #CC6680;

        border: 1px solid #882240;

        padding: 0;

        /* cross browser syntax for switching cursor to pointer/hand */

        cursor: pointer;

        cursor: hand;

}

/* .submit:hover does not seem to work. Workaround using onmouseover and onmouseout */

.submitHover {

        background-color: #DD88A0;

        border: 1px solid #882240;

}

Fixed hover effects will (soon) be observable on my site (www link below) :)

Link to comment
Share on other sites

Heheh. I've got absolutely no idea what your saying in both of those posts, Convict :unsure:

cursor:pointer works in IE6 and up - that means it doesnt works in IE4,5,5.5.

mobies suprises about IE 4 & 5 using - in web LOG files are records about clients browsers, arent? */*

Never mind if you are still misunderstanding :ninja:

Link to comment
Share on other sites

IE 4 & 5???? wtf.... is that still around... ?

I'd say time for an update ppl!  */*

You dont seem to be LOG reader :D

FYI yes I do/did... have not done so lately as I have other things on my mind :unsure:

for those 20% I'm not going to change layouts.... if they want to stay behind in technology be my guest but that doesnt mean i have to adjust and accomodate everything....

same as flash etc.... takes for ever to load but wtf it is worth it?

get high speed

upgrade to the latest version IE or use FF (please dump IE as it is a P.O.S)

and for god sake get a graphic card that supports 32 bits and higher res than 800!!

ok i'm done now lol

I would not worry about the 20% that does not see the hover effects of a couple of buttons?? the ppl that dont see it generally do not care anyway....

Another story about 800x600 tho... yes I'd like to keep all designs below or at 800x600 as 25% still uses it and generally that is the majority of the elderly ppl and we all know they like to spend money on their grandkids etc. :ninja:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...