I am facing and overflow issue in IE7 due to which the drop-down menu goes behind the image in IE7 but works properly in FF.
You can check it at : www dot woodbankinteriors dot com
pls help me fix this issue of menu in IE7 pls…need to get this done asap…
You need to adjust the parent of the menu as that ultimately controls the stacking context in IE7.
.tail-row-logo{
position:relative;
z-index:99;
}
You should also remove the xml declaration as that will throw IE6 into quirks mode (although you already have quite a few issues there so I guess you aren’t supporting IE6)
The menu got fixed but y is the scroll bar coming below on the browser…
and also you can see the thin white line coming on the left end of image which is not to be seen in FF…
I gotta say this : “IE sucks!!!”
On a quick run through (which was extremely difficult to work out due to your excessive nestings) It seems that the space available to the image is only 877px and not 900px as statement.
You could do the side shadows in one image repeated on the first element to paint both sides and then apply the big background to an inner element that carries the padding to offset it from the shadow. It seems you only need 2 divs instead of the 8 that you are using.
As you can see the nesting really complicates the issue and makes bug hunting so much harder as you have applied something to each element that could have been combined at start.
The scrollbar is because you have floated the menu to the right and then moved it using relative positioning which doesn’t actually move the element at all. It is only moved visually but the space it previously occupied is always preserved so in fact IE7 is more or less correct in showing the scrollbar there.
Don’t use relative position for structural changes like that but use a margin instead.