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)

http://img187.imageshack.us/img187/1187/goodjm7.gif

the Bad (IE 5)

http://img529.imageshack.us/img529/29/badws0.gif


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!