IE 5 rollover images w/CSS

[Colino]

Hi all.

I've run into a bit of a problem with IE 5 and IE 6 incorrectly rendering some image rollovers in CSS. I'll link how it is supposed to look and what I'm getting via IE5.

the Good (FF)



the Bad (IE 5)




AS you can see, IE 5 is causing the hover state of the buttons ( the grey ones) to drop a few pixels below where they should be with regard to the normal state ( red images) . The text in the blue bar to the right is messed up somehow and there is a large gap between the main navigation bar and the page title header ( flights in blue).

I'll now include the HTML markup for the sections effected:

<div id="content">

<div id="navigation">
<ul id="horizontal-list">

<li><a href="/flights" class="flights">

<img src="/images/buttons/f_h.gif" alt="flights" border="0" title="flights" />
</a></li>

<li><a href="/vacations" class="vacations">
<img src="/images/buttons/v.gif" alt="vacations" border="0" title="vacations" />
</a></li>

<li><a href="/hotels" class="hotels">
<img src="/images/buttons/h.gif" alt="hotels" border="0" title="hotels" />
</a></li>

<li><a href="/cruises" class="cruises">

<img src="/images/buttons/cr.gif" alt="cruises" border="0" title="cruises" />
</a></li>

<li><a href="/cars" class="cars">
<img src="/images/buttons/c.gif" alt="cars" border="0" title="cars" />
</a></li>

<li><a href="/deals" class="deals">
<img src="/images/buttons/d.gif" alt="deals" border="0" title="deals" />
</a></li>

</ul>

<div id="subnav">
<div id="subnav_text">
<font size=1>
<a href="/about.shtml">about us</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="/contact.shtml">contact us</a>
&nbsp;&nbsp;|&nbsp;&nbsp;

<a href="/demo.shtml">how to use bookingnavigator.com</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="/help.shtml">help</a>
</font>
</div>
</div>
</div>

</div>

<div id="pageheader"><div id="pageheader_text">Flights</div></div>


and next is the CSS :

#navigation {
width: 750px;
height: 41px;
background: url(/images/subnav_bg.gif) no-repeat;
background-color: #ffffff;
}


/* NAVIGATION STARTS*/

/******** all rollover images ********/
.flights { background:url(/images/buttons/f_h.gif) bottom left no-repeat; }
.vacations { background:url(/images/buttons/v_h.gif) bottom left no-repeat; }
.hotels { background:url(/images/buttons/h_h.gif) bottom left no-repeat; }
.cruises { background:url(/images/buttons/cr_h.gif) bottom left no-repeat; }
.cars { background:url(/images/buttons/c_h.gif) bottom left no-repeat; }
.deals { background:url(/images/buttons/d_h.gif) bottom left no-repeat; }

/******** selected images **********/
.flights_h { background:url(/images/buttons/f.gif) bottom left no-repeat; }
.vacations_h { background:url(/images/buttons/v.gif) bottom left no-repeat; }
.hotels_h { background:url(/images/buttons/h.gif) bottom left no-repeat; }
.cruises_h { background:url(/images/buttons/cr.gif) bottom left no-repeat; }
.cars_h { background:url(/images/buttons/c.gif) bottom left no-repeat; }
.deals_h { background:url(/images/buttons/d.gif) bottom left no-repeat; }

#horizontal-list {
float: left;
margin:0;
padding: 0;
height:41px;
}
#horizontal-list li {
display:block;
float:left;
margin-right: 1px;
}
#horizontal-list a:hover img {
visibility:hidden;
}
#horizontal-list a {
display:block;
float: left;
}
#horizontal-list a/**/ {
height:41px; /* hide from IE5.0/win */
}
/* fixes for IE/win \*/
* html #horizontal-list a {
cursor:hand;
}

* html #horizontal-list li a:hover {
height:1%;
}
/* */

/* NAVIGATION ENDS */

#subnav {
width: 368px;
height: 41px;
float: right;
}

#subnav_text {
margin-top: 19px;
margin-right: 15px;
text-align: right;
color: #ffffff;
}

#subnav_text a {
color: #ffffff;
text-decoration: none;
}

#subnav_text a:hover {
text-decoration: underline;
}


Any help would be greatly appreciated as it's been vexing me for a number of hours now.

[Colino]

Anyone able to help ?

[boogyman]

Please review our Posting Policies and Regulations especially in regards to #7 (waiting patiently) and #8 (posting computer code)

Now on a different note, welcome to the forums and thanks for having a descriptive title.

the problem you are seeing in because of IE's poor rendering engine. The only "bug" fix for this is to create a special IE style sheet and make the pixel updates accordingly

[Colino]

Hey!

Thanks for the reply. Sorry about:

Please review our Posting Policies and Regulations especially in regards to #7 (waiting patiently) and #8 (posting computer code)

I was in a bit of a rush and posted my requests a bit hastily.

I was trying to find specifics for IE 5 style sheets info all night and I guess I'm a bit to tired to see straight. Will keep digging i suppose.

Thanks for the info!

[Colino]

Me again

Is there any clues as to where to find some of this information? I'm new to CSS and wasn't aware of these issues with IE. I know it has something to do with the rendering of the lists and their contents, but I'm not sure what I'm looking for ( search wise).

Thanks again.

[boogyman]

CSS IE Internet Explorer v5 version 5

use combinations of those on google.com

[Colino]

thank you again!