CSS wont work in IE?

[ryanf]

Hey guys, I am trying a feable attempt at speeding up my site by replacing some image rollovers with css and text. I can get it to work in three of the four browsers (netscape, mozilla, and opera) but it wont work in IE. I know, I know that microsoft is the evil empire and IE sucks but I still need it to work. here is my css code:

TD.headerBar {
 font-family: Arial, sans-serif, Verdana;
 font-size: 11px;
 color: #FFFFFF;
 font-weight: bold;
 line-height: 1.5;
 background-color: #615338;
}

TD.headerBar:hover {
 font-family: Arial, sans-serif, Verdana;
 font-size: 11px;
 color: #FFFFFF;
 font-weight: bold;
 line-height: 1.5;
 background-color: #E5AE37;
}

and here is my code on the page

td height="26" width="50" valign="center" align="center" class="headerBar">RINGS<br /><img src="images/trans.gif" width="50" height="1"></font></td>

 

Anyone know whats up?

 

Thanks,

Ryan

[bluepony]

IE only supports Hover on an anchor tag. You would need to use Javascript to swap the two tags:

 

First change your :hover class name to something else:

td.headerBarhover {
font-family: Arial, sans-serif, Verdana;
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
line-height: 1.5;
background-color: #E5AE37;
}

Then add this javascript to the top of your page. Note, If you change the name of your style classes, you'll need to change it in here as well. For this example I used headerBar and headerBarhover:

<script language="javascript"><!--
function rowOverEffect(object) {
 if (object.className == 'headerBar') object.className = 'headerBarhover';
}

function rowOutEffect(object) {
 if (object.className == 'headerBarhover') object.className = 'headerBar';
}
//--></script>

Then add the java function calls to your table column:

<td height="26" width="50" valign="center" align="center" class="headerBar" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)">RINGS<br><img src="images/trans.gif" width="50" height="1"></td>

[241]

have you tried adding % or px to the 1.5 in line-height

[ryanf]

Thanks Henry!

 

I got it working. This is what I used if anyone else wants to use it.

 

Where I want the links I have this:

<td height="26" width="50" valign="center" align="center" class="headerBar" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)"><a href="http://www.abdulky.com/index.php?cPath=21" class="menu" onFocus="if(this.blur)this.blur();">RINGS</a><br /><img src="images/trans.gif" width="50" height="1"></td>

 

And in my stylesheet I have this:

TD.headerBar {
 font-family: Arial, sans-serif, Verdana;
 font-size: 11px;
 color: #FFFFFF;
 font-weight: bold;
 line-height: 1.5;
 background-color: #615338;
}

TD.headerBarhover {
 font-family: Arial, sans-serif, Verdana;
 font-size: 11px;
 color: #FFFFFF;
 font-weight: bold;
 line-height: 1.5;
 background-color: #E5AE37;
}

a.menu {padding: 6px; text-decoration: none; color: #FFFFFF; font: bold 11px Arial, sans-serif;}
a.menu:hover {padding: 6px; text-decoration: none; color: #FFFFFF; font: bold 11px Arial, sans-serif;}

 

I also put in the javascript that henry posted above.

 

For some reason, if I dont have the transparent image spacing out the cell in mozilla and netscape it squishes the cell and only displays RIN and half of G. I don't really want the image there since I but I guess I'll have to deal. For some reason, mozilla and ns cares about the padding on the left side of the text but not the right.