Q:

CSS issue in IE

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

A:

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.

