Web Analytics Made Easy -
StatCounter IE6 nested div causes 2px content shift... I'm stumped... - CodingForum

Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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:
    Code:
    .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
    Code:
    	<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

  • #2
    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:

    Code:
    .content-mid div {height:1%;}
    Thus triggering layout for your div.

    Comment

    Working...
    X