IE6 Absolute Positioning Bug

[redwall_hp]

I'm working on a template for a site, and I've run into an odd bug in IE6. So far I haven't had much luck finding a fix. Here are a couple of screenshots...Firefox (correct):IE6 (wrong):Here are the relevant bits of code:

#header {width:100%;height:146px;background-image: url("images/header_tile.gif");background-repeat: repeat-x;position:relative;min-width:960px;}#logo {margin-left:20px;}#nav {position:absolute;right:10px;}<div id="header"><div id="nav"><ul class="lavaLamp"><!-- *snip* li tags for navigation --></ul></div><div id="logo"><a href="#"><img src="logo.jpg" alt="Home" /></a></div></div> 

I've found that defining a fixed width for the #nav element fixes the problem somewhat, but it's not a great fix. I much prefer to have auto width on the navigation.Any other solutions?

[Ingolme]

Why not try this instead?#nav {float: right;margin-right: 10px}I'm not entirely sure how the browser might interpret it, since I haven't had Internet Explorer 6 for a while.It's always good to try to avoid absolute positioning, because it usually can be solved in a better way.

[redwall_hp]

I already tried that. It doesn't float. The nav appears as if it were position:static, with the logo pushed down beneath it.

[newseed]

Copied and pasted the code you provided works okay for me in IE6. You may have some other code that is messing it up. To verify my findings, do what I did by copying the very code you posted here and past onto a seperate page and then preview it.Otherwise, you will need to provide more info. Url is better.

[redwall_hp]

Live link: http://mvhmedia.com/preview.htmlI find it strange that this is happening. I recall doing something similar to this once, and it worked then. I think you may be right about it being caused by some other part of the code.

[newseed]

give the #logo a width (about 300px).

[redwall_hp]

give the #logo a width (about 300px).

It doesn't seem to have done anything. Now, it works if I explicitly set the width of #nav to a certain number of pixels, but I'd prefer to avoid that (unless there's no other option). It doesn't strike me as a good idea to having textual navigation (which could be a different width depending on font size and kerning/tracking, like when viewed in IE6 vs Firefox).

[newseed]

First thing you should do is move the #logo div into the #nav div.

<div id="header"><div id="nav"><ul class="lavaLamp"><li class="current"><a href="http://mvhmedia.com">Home</a></li><li ><a href="http://mvhmedia.com/portfolio/">Portfolio</a></li><li ><a href="http://mvhmedia.com/blog/">Blog</a></li><li ><a href="http://mvhmedia.com/about/">About</a></li><li ><a href="http://mvhmedia.com/contact/">Contact</a></li><li><a href="http://feeds.feedburner.com/MvhMedia"><img src="http://mvhmedia.com/wp-content/themes/mvhmedia/images/rss.png" alt="RSS" /></a></li></ul><div id="logo"><a href="http://mvhmedia.com">	<img src="http://mvhmedia.com/wp-content/themes/mvhmedia/images/logo.jpg" 	alt="MVH Media" width="300" height="146" /></a></div></div></div>

Now change the following CSS to look like these:

#header {width:100%;height:140px;position:relative;min-width:960px;}#logo {float: left;width:300px;margin-left:20px;}#nav{float:right;margin-top:0px; text-align: right;}.lavaLamp {position: relative;height: 29px;padding: 15px; margin: 10px 0;overflow: hidden;float: right;}

[redwall_hp]

Thanks, it seems to be working now. I just had to throw this useful code block in to fix IE6's lack of min-width support.

<!--[if lte IE 6]><style type="text/css">div#outerwrapper {width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) < 1000 ? "1000px" : "auto");}</style><![endif]-->

Thanks for the help.