CSS issue in IE
Posted
by Ayaz Alavi
on Stack Overflow
See other posts from Stack Overflow
or by Ayaz Alavi
Published on 2010-05-27T09:42:37Z
Indexed on
2010/05/27
9:51 UTC
Read the original article
Hit count: 369
Hi, Me website contains drop down menus at the top right corner. Dropdwon is displayed fine but when I hover over elements of drop down then IE is causing issue on rendering them on the other hand Firefox is displaying the way i want. website is http://www.textsensor.com/test. Can anybody tell me what is causing IE issue on its menu.
Here is the details. Each parent at top has child div which contains child elements in a ul. I am displaying them inline with width of 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 anchor contains span which contains text of sub-menu item. On mouseover on 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. Javascript is listed below
$("#jsddm li ul li a span").hover(function(){
$(this).parent().siblings("img").show();
$(this).parent().css("border-bottom", "#a00 5px double");
}, function(){
$(this).parent().siblings("img").hide();
$(this).parent().css("border-bottom", "none");
});
Cheers
Ayaz Alavi
© Stack Overflow or respective owner