:hover: working with FF, not working with IE8!!

[magicosta +]

Hello there,

At the bottom of my userterms.tpl page, I have the following code for my Print and Close this window bottons:

<div align="center"><input type="button" value="{$smarty.const.LANG_PRINT}" onClick="window.print(); return false;" class="imageButton" />  -  <input type="button" value="{$smarty.const.LANG_CLOSE_WINDOW}" onClick="window.close(); return false;" class="imageButton" /></div>

and the following css:

input.imageButton {
background-color: #CCCC99;
color: #003300;
height: 28px;
border: none;
font-weight: bold;
letter-spacing: 0.2em;
margin-top: 45px;
font-size: 14px;
margin-left: 0px;
margin-right: 0px;
}

input.imageButton:hover {
background-color:#999966;
color:#FFFFFF;
height: 28px;
border: none;
font-weight: bold;
letter-spacing: 0.2em;
margin-top: 45px;
font-size: 14px;
margin-left: 0px;
margin-right: 0px;
}

The problem is, it is working with Firefox, the colors change when you put the mouss on, but with ie8 nothing happens and colors don't change.

I am a little bit lost on that one!

Any idea? thank you in advance for your help.

[Mike-N-Tosh +]

This is an age old problem with IE ALL versions although they have progressively gotten slightly better with each version. Chances are if it doesn't work for IE 8, it most likely doesn't work with any prior version either, as each previous version was even less compliant of the standards.

I would recommend that you do a Google search for input buttons in IE to get a definitive answer/solution to your issue.

One thing that may fix it for IE 8 is to give your enclosing div layout by simply adding, style="display: block; margin: 0 auto;" instead of the deprecated "center". this gives the div itself layout (to IE) and the margin declaration will center your div. You probably want to also declare a width and height as well.

Also as an FYI, CSS stands for Cascading Style sheet. Which means it cascades, you don't need to declare all of the same definitions in your hover as they are already inherited (cascaded) from the original declarations in your button. Redeclaring them unnecessarily just adds bloat to your document, slowing down load times, etc.. So only declare the things that are changing when you hover (e.g. color, background). It's cleaner, easier and faster.

[magicosta +]

Ok Mike, Thanks a lot for you help