Grow your CSS skills. Land your dream job.

A div scrolls with the page in IE

  • # July 29, 2009 at 8:55 pm

    This code works the way I want in Firefox, Safari, Chrome, and almost Opera, But IE is messing it up.

    Site:
    http://www.simonwoodard.com.au/clients/NWF/index.html

    The Problem:
    When scrolling down the page in IE7, to reveal further content, the navigation list will follow the page down covering over content, then when you hover over a navigation link, it will jump back up to where it’s meant to be.

    I have tried changing the positioning of the <ul>, the containing div, and the <li> to no avail, it’s got me a bit stumped, so any help would be appreciated.

    The following code is what directly influences the navigation

    Navigation CSS:

    Code:
    #nav { display: block; width: 5000px; height: 35px;
    margin: -1px 0 0 51px; padding: 0;
    background: #4C697E;}
    #nav ul { padding-left: 0px;}
    #nav ul li { display: inline; padding: 0 16px 0 16px;}
    #nav ul li a { font-size: 14px; font-weight: bold; text-decoration: none;
    line-height: 35px; color: #ffffff; }
    ul.dropdown { position: relative; display: block; height: 35px; }
    ul.dropdown li { font-weight: bold; font-size: 14px; float: left; zoom: 1; padding: 0px; }
    ul.dropdown a:hover { text-decoration: none; color: #C1D2E0; }
    ul.dropdown li a { display: block; }
    ul.dropdown li:last-child a { border-right: none; } /* Doesn’t work in IE */
    ul.dropdown li.hover,
    ul.dropdown li:hover { position: relative; background: #7e99ad; border: 1px solid #FFFFCC; margin: -1px;}

    IE Fix CSS

    Code:
    h2 { line-height: 20px;}
    body, html { overflow-y: auto;}
    ul.dropdown { position: relative;}
    ul.dropdown li:hover { margin: 0 -1px;}

    Navigation HTML

    # July 30, 2009 at 2:59 am

    I’m on a Mac so I’m not seeing the problem. The only odd thing I see in your code is :

    Code:
    ul.dropdown ul {
    position:absolute;
    top:100%;
    }

    Surely that should be :

    Code:
    ul.dropdown ul {
    position:absolute;
    top:35px;
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".