The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS A div scrolls with the page in IE

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #25611

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


    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:

    #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

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

    Navigation HTML

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.