• Locked
No replies
Mon, 2009-03-30 19:36
biklops
Offline
newbie
Last seen: 12 years 25 weeks ago
Joined: 2007-01-11
Posts: 6
Points: 0

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!

Top
Tags: