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