IE6 box height, showing extra pixels
Posted: Wed Jan 17, 2007 4:31 am
Been designing a webpage lately, but since I upgraded to IE7 and then didn't get IE6 working as intended, I was unable to check what it looked like in IE6 until a co-worker did a test-run for me.
Now, I've been trying this and that to get rid of the bug, but I've run out of ideas. So as usual, I come here for brainstorming and advice.
I created a small test-page to illustrate the problem, and the code looks like this:
I'm using a 20px * 20px image of a sphere and the use of background-position to create the corners using only one image.
Also, I noticed that in some browsers I needed to place a spacer gif within the corner div or the dimensions would be, messed up.
Here's a screenshot of the result in IE6, showing the bug on two of the boxes:

As you can see, two of the boxes end up with one extra pixel of height, which shows up under the bottom corners. This would easily be fixed if I were using boxes with a fixed height, but since the content of the target webpage is dynamic, I'll end up with this bug whenever the box height is has an odd value (at least that's my conclusion).
Can anyone see what's causing the problem above, or know a solution/IE6 hack?
/ Fredrik
Now, I've been trying this and that to get rid of the bug, but I've run out of ideas. So as usual, I come here for brainstorming and advice.
I created a small test-page to illustrate the problem, and the code looks like this:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.tl {
position: absolute;
top: 0;
left: 0;
}
.tr {
position: absolute;
top: 0;
right: 0;
background-position: 10px 0;
}
.br {
position: absolute;
bottom: 0;
right: 0;
background-position: 10px -10px;
}
.bl {
position: absolute;
bottom: 0;
left: 0;
background-position: 0 -10px;
}
.corner {
width: 10px;
height: 10px;
background-color: #ccc;
background-image: url(round.gif);
}
.spacer {
width: 10px;
height: 10px;
}
</style>
</head>
<body style="background-color: #C0C0C0;">
<div style="width: 900px; margin: 0 auto;">
<div style="background-color: white; width: 200px; position: relative;height: 159px; margin: 0 auto; float: left; margin: 10px">
<div class="tl corner"><img src="images/transp_8x8.gif" class="spacer" /></div>
<div class="tr corner"><img src="images/transp_8x8.gif" class="spacer" /></div>
<div class="br corner"><img src="images/transp_8x8.gif" class="spacer" /></div>
<div class="bl corner"><img src="images/transp_8x8.gif" class="spacer" /></div>
</div>
<div style="background-color: white; width: 200px; position: relative;height: 160px; margin: 0 auto; float: left; margin: 10px">
<div class="tl corner"><img src="images/transp.gif" class="spacer" /></div>
<div class="tr corner"><img src="images/transp.gif" class="spacer" /></div>
<div class="br corner"><img src="images/transp.gif" class="spacer" /></div>
<div class="bl corner"><img src="images/transp.gif" class="spacer" /></div>
</div>
<div style="background-color: white; width: 200px; position: relative;height: 259px; margin: 0 auto; float: left; margin: 10px">
<div class="tl corner"><img src="images/transp.gif" class="spacer" /></div>
<div class="tr corner"><img src="images/transp.gif" class="spacer" /></div>
<div class="br corner"><img src="images/transp.gif" class="spacer" /></div>
<div class="bl corner"><img src="images/transp.gif" class="spacer" /></div>
</div>
<div style="background-color: white; width: 200px; position: relative;height: 260px; margin: 0 auto; float: left; margin: 10px">
<div class="tl corner"><img src="images/transp.gif" class="spacer" /></div>
<div class="tr corner"><img src="images/transp.gif" class="spacer" /></div>
<div class="br corner"><img src="images/transp.gif" class="spacer" /></div>
<div class="bl corner"><img src="images/transp.gif" class="spacer" /></div>
</div>
</div>
</body>
</html>
Also, I noticed that in some browsers I needed to place a spacer gif within the corner div or the dimensions would be, messed up.
Here's a screenshot of the result in IE6, showing the bug on two of the boxes:

As you can see, two of the boxes end up with one extra pixel of height, which shows up under the bottom corners. This would easily be fixed if I were using boxes with a fixed height, but since the content of the target webpage is dynamic, I'll end up with this bug whenever the box height is has an odd value (at least that's my conclusion).
Can anyone see what's causing the problem above, or know a solution/IE6 hack?
/ Fredrik