A div scrolls with the page in IE

[Simon Woodard]

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

Code:

• Home
• Products
  • Home Loan
  • Leasing and Finance
  • Business and Commercial Lending
• Calculators
• First Home Buyers
• FAQ’s
• Staff Profiles
• Contact Us
• Links

[Author]

Posts