IE6 nested div causes 2px content shift... I'm stumped...

[Jakobud]

This has me completely stumped. I put together some example code to show the problem I'm having:

http://americandentalassisting.com/test/test.php

It only messes up in stupid IE6.

Both of the boxes of content you see are almost exactly the same. The only difference is that the content/text in the top box is enclosed in an extra DIV, that doesn't have any CSS attributes assigned to it. Its just a plain old <DIV>.

The bottom box does not have that DIV.

Anyways, the problem is that the DIV that displays the bottom border graphic is shifted 2 pixels to the left in the top box.

The result is clearly because I have that nested DIV in there. But the two elements appear completely unrelated. Why would that DIV without any special attributes shift a DIV below it that isn't even a child or parent of it? It doesn't make sense at all...

Here is the CSS:

.content
{
	text-align: left;
	float: left;
	width: 750px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
.content-top
{
	height: 10px;
	width: 750px;
	background: url('images/content-top.png');
}
.content-mid
{
	background-color: #FFFFFF;
	line-height: 1.7em;
	border-left: 1px solid #333333;
	border-right: 1px solid #333333;
	padding:0px 10px 20px 10px;
}
.content-bot
{
	height: 10px;
	width: 750px;
	background: url('images/content-bot.png');
}

Here is the HTML

	<div class="content">
		<div class='content-top'><!-- --></div>
		<div class='content-mid'>
			<div>Why does the nested DIV that this text sits in force that bottom DIV to shift 2 pixels left?</div>
		</div>
		<div class='content-bot'><!-- --></div>
	</div>
	
	<div style='clear:both;'>How it should look:</div>
	
	<div class="content">
		<div class='content-top'><!-- --></div>
		<div class='content-mid'>
			No pixel shift here because this text is not enclosed in a nested DIV... Weird.
		</div>
		<div class='content-bot'><!-- --></div>
	</div>

If anyone can come up with an answer for this one I owe them a beer

[mattyod]

It's because your inner div doesn't have any "layout" and IE6 is a terrible browser. Here's an intro to the topic http://www.satzansatz.de/cssd/onhavinglayout.html

But in the mean time to get the issue resolved you could add something to your CSS such as this in your IE6 style sheet:

.content-mid div {height:1%;}

Thus triggering layout for your div.