SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Overflow Issue in IE7

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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Welcome to Sitepoint

    You need to adjust the parent of the menu as that ultimately controls the stacking context in IE7.
    Code:
    .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)

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi enquistic. Welcome to SitePoint!

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

    Code:
    .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!

  4. #4
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!!"

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    .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.

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

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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

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

  7. #7
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

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

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Many thanks - Glad we could help


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •