Hover CSS Issue (Works in FF, not in IE) 1

[iisman]

SO , I have some submit buttons on a page, that use CSS to style them up. On hover, the color should change, and this DOES work in FF, but not in IE. When hovered, the color does not change.

Here is the html:

a class="submithover">
<input type="button" value="[pause]" name="playOrPause" onclick="handlePlayOrPauseClick()" class="submithover1" />
</a> 
<a class="submithover">
<input type="button" value="[show controls]" name="controls" onclick="handleControlsOnOffClick()" class="submithover"  />
</a>

...and here is the css that is involved in this:

a.submithover {text-decoration: none;}

a.submithover input {border-style: solid; border-width: 0px; color: #ffff99; font-size: 16px; font-family: Verdana; font-weight: bold; background-color: #282484; }

a.submithover:hover input {border-style: solid; border-width: 0px; color: #cb7901; font-size: 16px; font-family: Verdana; font-weight: bold; background-color: #282484; }

So, it works fine in FF, but not in IE. the css styles the regular display properly in both browsers, it is just the HOVER part that does not work.

Any help would be greatly appreciated.

...and for any of you in Canada...happy Canada Day.

 

[Vragabond]

Try defining :hover class to the a.submithover selector as well. The syntax is ok and works in both browsers, however IE is sometimes hard to persuade. I had better luck if more pseudo classes were explicitly assigned rather than less. Just change something that doesn't show.

 

[iisman]

thanks for the quick response. It didnt seem to work for me....still no juice. I jsut can't seem to get it to work!!

here is what I have for the css now: (html code renmains same as above)

a.submithover 				{text-decoration: none;}
a.submithover input 		{border-style: solid; border-width: 0px; color: #ffff99; font-size: 16px; font-family: Verdana; font-weight: bold; background-color: #282484; }
a.submithover:hover input 	{border-style: solid; border-width: 0px; color: #cb7901; font-size: 16px; font-family: Verdana; font-weight: bold; background-color: #282484; }
a.submithover:hover		 	{border-style: solid; border-width: 0px; color: #cb7901; font-size: 16px; font-family: Verdana; font-weight: bold; background-color: #282484; }

 

[BillyRayPreachersSon]

You need to add an href attribute to your anchor elements for this to work in IE.

Incidentally, you can change your CSS for "a.submithover:hover input" to this:

a.submithover:hover input {
   color: #cb7901;
}

The rest will be inherited.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[iisman]

Hi Dan

Thanks for the quick response. Not sure if you were aware of it, this code is aactually to style a submit button. I found that adding an href to the tag casues the hover effect to work in both browsers, BUT, in FF, it actually acts like a link, so href="" redirects to the top of the page. is there something i can put in there that will prevent this?

 

[BillyRayPreachersSon]

You could use:

<a href="javascript:void(0);">

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[iisman]

thanks mate! Worked like a charm.