CSS issue in IE

Question

Hi, My website contains drop-down menus at the top right corner of the screen. The drop-down is displayed fine, but when I hover over elements within the drop-down, IE renders them incorrecty. Firefox, however, displays them the way I want. The website is http://www.textsensor.com/test. Can anybody tell me what is causing the issue in IE?

Here are the details. Each parent at top has a child <div> which contains child elements in a <ul>. I am displaying them inline with width of the <div> container fixed, so that two of them are being displayed in one line. Each child <li> contains two images and an anchor in between. These two images are providing rounded corners, whereas the anchor contains a <span>, which in turn contains the text of the sub-menu item. When the mouse moves over the <span>, I am showing its parent anchor sibling images through javascript, and also setting its bg-image to white. Images are not aligned correctly and <span> tag got down about 10px from top on IE only. The jQuery used is listed below:

   $("#jsddm li ul li a span").hover(function(){
        $(this).parent().siblings("img").css("visibility", 'visible');
        $(this).parent().css("border-bottom", "#a00 5px double");
    }, function(){
        $(this).parent().siblings("img").css("visibility", 'hidden');
        $(this).parent().css("border-bottom", "none");
    });

Html of one menu item is:

<li><img src='images/submenuImg1.png' class='leftsubImg'>
<a href="pricerates.php"><span>Price Rates</span></a>
<img src='images/submenuImg3.png' class='rightsubImg'>
</li>

When I mouseover span leftsubImg, rightsubImg will be visile and also bg of span is set to be an image repeating in x. Issue that is causing trouble is that span is having margin of about 12px from top and it is about 5px below images on its left and right.

IE output is

Cheers

Ayaz Alavi

Answer 1

Have you tried removing the whitespace between the li elements in the source?

Just a quick guess, it might be the IE whitespace bug...

Also I'm currently getting javascript errors in IE..

Answer 2

Rounded corners: you're doing it wrong.

Never use an <img> for purely stylistic content (such as rounded corners). It sure as hell won't provide useful information to a screen-reader, or a user with stylesheets disabled. Use background images instead.

Also, .hide() is not what you want to do to the images: doing so removes them from the flow of the document, meaning the span elements shift. Use .css('visibility','hidden') instead.

In fact, you don't need javascript at all. Take a look at http://www.jsfiddle.net/TeTLw/. The button doesn't look quite right, but it should work cross-browser.

To make the button look right, you need to make your image longer: Have it like this:

 ____________________________________
|                                     \
|                                      |
|____________________________________ /

Answer 3

IE 8 and IE 7 issue is fixed by using following Conditional comments

<!--[if IE 8]>
<style>
.leftsubImg , .rightsubImg
{
    margin-bottom:-13px;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style>
.leftsubImg , .rightsubImg
{
    vertical-align:middle;
    margin-bottom:3px;
}

</style>
<![endif]-->

It moved images at correct position. Now in IE6 I have got z-index issue that is menus are not moving in front of fat guy picture.