Absolutely positioned nav bar not displaying properly in IE6

I’m having trouble getting an absolutely positioned navigation bar to display properly in IE6. Works fine in every other browser I tested.

I have a navigation bar (unordered list) nested inside of a “header” div. The header div has position relative and the nav bar has position: absolute, right: 0, bottom: 0. I made sure that the header div “has layout” in IE by giving it zoom: 1, but that didn’t fix the problem.

You can view the site at: http://www.negotiationsinc.net

Any help or suggestions would be helpful. I pasted all of what I think the relevant code is below, but of course you can view source to get the rest if needed.

The html for the header is…


<div id="header" class="clear_fix">
	<div id="header_top">
		<h1 id="logo">Negotiations, Inc.</h1>
	</div>
	<ul id="main_nav">
		<li class="current"><a href="index.html">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="services.html">Services</a></li>
		<li><a href="faq.html">FAQ</a></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>
</div><!-- end header -->

The related CSS is…


#header { position: relative; height: 74px; overflow: hidden; zoom: 1;}

#logo {
	height: 34px;
	width: 419px;
	margin-top: 25px;
	background-image: url('images/logo.png');
	text-indent: -10000px;
}

#main_nav {
	position: absolute;
	bottom: 0px;
	right: 0px;
	font-family: arial, sans-serif;
	list-style: none;
	padding: 0;
	margin: 0;
	zoom: 1;
	background-color: transparent;
}

#main_nav li {
	float: left;
}

#main_nav li a {
	display: block;
	height: 20px;
	padding: 2px 10px;
	color: #ddd;
	font-size: 1.4em;
	text-decoration: none;
	font-weight: bold;
	background-color: transparent;
}


Thanks for posting. Definitely a good read.

You can basically leave it as it was as long as you add the float:left to the #main_nav li a.

I just gave you another option :slight_smile:

May I ask why you used the absolute positioning? You can use that but you can do without it as well. Just tried this:


#main_nav {
	position: relative;
	float: right;
	bottom: 0px;
	right: 0px;
	font-family: arial, sans-serif;
	list-style: none;
	padding: 0;
	margin: 0;
	background-color: transparent;
}

#main_nav li {
	display: block; float: left;
}

#main_nav li a {
	float: left;
	display: block;
	height: 20px;
	padding: 2px 10px;
	color: #ddd;
	font-size: 1.4em;
	text-decoration: none;
	font-weight: bold;
	background-color: transparent;
}

Which works for me in IE6. Notice The float: left in (#main_nav li a)

Sweet. Works perfectly, thanks for the tip.

Man, do I hate IE6.

Hi,

For an explanation of the bug see my post in this thread here as it also applies to absolutely positioned parents. :slight_smile:

Thanks for the suggestion. I’ll give it a try and see how it works.

The reason I used absolute positioning is because I was under the impression that you’re not supposed to use absolute or relative positioning at the same time you float something.

So for instance, you have position: relative & float: right on the main_nav. I had read that you’re not supposed to do that. On the other hand if it works, it works so I’ll give it a try.