1px gap in IE6. Absolute positioned div. Is this 'haslayout' effect?

[KingOfMyCastle]

Hi! I've been working on a little site here:
http://www.kingwebsites.co.uk/caboodle/foryou/index.htm

All looks well apart from an absolutely positioned image at the lower right. All other browsers render it fine but in IE6 I get a gap between the bottom of the 'higher' image and the top of the lower one. See the 1px horizontal line in the middle of the image below:

If you resize the text in IE6 then this line appears and disappears. This lead me to think it could be related to the 'haslayout' issue. I've tried to implement the fix without any luck so I was wondering if anything else may be causing the problem. Here's the relevant parts of the code: (the image is in the 'corner' div at the beginning):

<!-- START Wrapper -->
<div id="wrapper">
<div id="corner">
<img src="../img/corner.gif" width="67" height="100" alt="corner" />
</div>

<!-- START Breadcrumbs -->
<div id="breadcrumbs">
You are here > <strong><a href="index.htm">Is it for you?</a></strong>
</div>
<!-- END Breadcrumbs -->

<!-- START Navone -->
<div id="navone"> <!--Left Navigation Bar -->
</div><!-- END Navone -->

<!-- START Content Wrapper -->
<div id="contentwrap">

<!-- START Navtwo -->
<div id="navtwo">
</div><!-- END Navtwo -->

<div id="content">
<h1>Is it for you?</h1>

<div id="onecolwide">
<p>&nbsp;</p>
</div><!-- END 1colwide -->

<div style="clear: both"></div>
</div><!-- END Content -->

<!--<div style="clear: both"></div>-->
</div><!-- END Content Wrap -->

<div style="clear: both"></div>
</div><!-- END Wrapper -->

*{
margin: 0;
padding: 0;
}

#wrapper{
position: relative;
margin: 0 auto;
width: 862px;
padding: 0px;
background: #EDDFCC url('../img/bg_wrapper.gif') repeat-y right;
border-left: 1px solid #886A85;
}

#corner{
position: absolute;
bottom: 0px;
right: 0px;
width: 67px;
height: 100px;
}

#breadcrumbs{
padding: 0 0 8px 160px;
font-size: 80%;
margin-right: 70px;
}

#navone{
float: left;
width: 141px;
padding: 0 0px 0 19px;
}

#contentwrap{
width: 634px;
float: left;
}

#navtwo{
height: 36px;
width: 633px;
padding-top: 1px;
border-left: 1px solid #A690A4;
background:  #BAA9B9 url('../img/bg_nav2.gif') top right no-repeat;
}

#content{
width: 592px;
background: #fff;
border-right: 1px solid #A690A4;
border-left: 1px solid #A690A4;
padding: 20px 20px 0 20px;
}

img {
  border: none
}

Any ideas? Alternative methods?

[KingOfMyCastle]

The same effect is happing here: http://marc.baffl.co.uk/browser_bugs...possition.html

The description:
Incorrect positions when using right and bottom IE 5, 5.5, 6 and 7β2. If the height of a relatively positioned block is an an even number or the width an odd number, any element that’s positioned absolutely inside that block and use bottom or right will be 1px out. They will be either 1px too high or 1px to the left of their correct position. This depends on the width or height of the containing block. If both occur the positioned element will be incorrectly positioned on both axes.

Still not sure if that's hasLayout. Will continue to check.

[KingOfMyCastle]

Wow, I've finally found something that's working. And the only place I can where this is mentioned is in a small bit of CSS on the Position Is Everything site.

One True Layout™ - Nested Rounded Corners

They use the Star HTML selector hack to move the image down by 1px on IE6 and below:

/* IE Win shifts these snaps upwards - at some font-sizes (sigh) */
* html #group_1-3 .verticalalign, * html #group_4-5 .verticalalign, 
* html #group_7-8 .verticalalign, * html #block_9 .verticalalign
	{
	bottom: -1px;
	}

Damn you ruining my Sunday, Microsoft! *shakes fist*

[Paul O'B]

Hi,

It's nothing to do with haslayout and I have documented this here years ago :

http://www.pmob.co.uk/temp/onepxgap.htm

You can't really hack for it unless all the elements are all the same odd pixel size. Rounded corners are best not done with absolute elements anyway and are more solid if you nest the wrappers with a background corner in each.

[KingOfMyCastle]

Nice! So you're the other place on the internet that mentions this

Thanks for the clarification.

I inherited this project late in the day or else I would have used the method you mentioned (honest!).