Mon, 2009-03-30 19:36
Hello everyone!
Here's the site: http://productivepeople.biklopsdesign.com/brands.html
Looks fine in Firefox, but in IE it's totally jacked! I'm stuck on a mac right now so any insight at all would be wonderful. The issue is in the nav section. The logo is dropping down over content, while the nav
- is escaping its containing div for some reason. I've applied the "Holly hack" but it's not helping.
Firefox:
Click for full size - Uploaded with plasq's Skitch
IE:
Click for full size - Uploaded with plasq's Skitch
Here's relevant code:
HTML
<div id="masthead" class="grid_12"> <h1 id="logo" class="grid_5 alpha">PRODUCTIVE PEOPLE</h1> <div id="nav" class="grid_7 omega"> <div id="navholder"> <ul id="navigation"> <li><a href="index.html"><span>ABOUT</span></a></li> <li><a href="bios.html" ><span>BIOS</span></a></li> <li><a href="brands.html" class="first"><span>OUR BRANDS</span></a></li> <li><a href="contact.html" id="local"><span>CONTACT</span></a></li> </ul> </div> </div>
CSS:
h1#logo { text-indent: -9000px; background: url(../images/logo.png) no-repeat; height: 252px; width: 586px; left: -95px; position: absolute; clear: left; } #nav { padding-top: 60px; float: right; display:inline; position: relative; } #navholder { float: right; display:inline; position: relative; margin-top: 20px; width: 505px; background: url(../images/navlinebig.png) no-repeat center bottom; } ul#navigation { padding: 0; list-style: none; text-align: center; margin-left: 10%; margin-right: 10%; text-decoration: none; width: 470px; } ul#navigation li { display: inline; margin-left: auto; margin-right: auto; } ul#navigation a { color: white; display: block; padding: 100px 1em 5px; text-decoration: none; font-size: 1.2em; float: left; display: inline; } ul#navigation li a { background: url(../images/seperator.png) no-repeat bottom right; } ul#navigation li a span { margin: 0px .5em 0px .1em; } ul#navigation li a.first { background: none; } ul#navigation a:hover { color: #f94a05; } ul#navigation a.selected { background: url(../images/hover.jpg) repeat-x left bottom; color: #f94a05; } ul#navigation li a#local span { color: #f74906; } ul#navigation li a#local { background: url(../images/hover.jpg) repeat-x bottom center; text-decoration: none; padding-left: 1.1em; }
Callouts for "grid" are for the 960gs.
The site is valid xhtml. Ugh. Help, please!