Overflow Issue in IE7

[enquistic]

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....

[Paul O'B]

Hi Welcome to Sitepoint

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)

[ralph.m]

Hi enquistic. Welcome to SitePoint!

I don't have IE open right now, but maybe try something like this:

.tail-row-logo {
    position: relative;
    z-index: 20;
}

If that doesn't work, please post back; but this won't be hard to fix, and there are many CSS ninjas hovering around to help right now.

EDIT: Hah! One of them got in before me!

[enquistic]

Thanks a ton Paul and Ralph.....

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!!!"

[Paul O'B]

Hi,

Double check your measurements

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.

i.e.

.row-top-menu .fright {
    /*width:900px; 980 - 34 - 43 - 13 -13 = 877px*/
    width:877px;

... etc...

then it looks like the white space is actually on the left side of the image itself.

Adjust the background position to hide it.

.row-top-menu .fright {
    /*width:900px; 980 - 34 - 43 - 13 -13 = 877px*/
    width:877px;
    background: url(http://www.woodbankinteriors.com/templates/theme325/images/header_img.jpg) -2px 5px no-repeat;
    height:300px;
}

This code is using quite a few unnecessary nested elements.

<div class="tail-row-top-menu clear2">
    <div class="main">
        <div class="row-top-menu">
            <div class="row-top-menu-left png clear2">
                <div class="row-top-menu-right png clear2">
                    <div class="row-top-menu-indent">
                        <div class="row-top-menu-bg clear2">
                            <div class="fright"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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.

[Paul O'B]

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.

div#menu {
    top:110px;
    margin-left:-195px;
    width:800px;    
}

[enquistic]

Hey Paul you have been of great help and have saved my ass big time...

i really appreciate your knowledge and fast response thank you sooo much for your precious time....

You've got a smile on ma face now.....cheers!!!

[Paul O'B]

Many thanks - Glad we could help