Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- IE6 rounding bug in relative box with absolute positioned corners


ewwatson - 2:31 pm on Jul 17, 2008 (gmt 0)


Good morning,

I have a position relative container with my rounded corners positioned absolutely in the corners. If you look at the example/link you'll see that if you move your window left to right a line appears and disappears on the right side of the bottom box in IE6 only. Note: the top box would have the same problem, but it happens to be at a width that it doesn't. I could however find a width in which it does. So... it's not a haslayout problem - what is it? Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background: #888;
}
h2 {
font-size: 1.2em;
padding: 80px 0 0;
text-align: center;
}
#container1 {
width: 300px;
height: 200px;
margin: 50px auto;
background: #ccc;
position: relative;
}
#container2 {
height: 200px;
margin: 50px 75px;
background: #ccc;
position: relative;
}
.tl {
background: #000 url(tl.gif) top left no-repeat;
position: absolute; top: 0; left: 0;
padding: 15px;
}
.tr {
background: #000 url(tr.gif) top right no-repeat;
position: absolute; top: 0; right: 0;
padding: 15px;
}
.bl {
background: #000 url(bl.gif) bottom left no-repeat;
position: absolute; bottom: 0; left: 0;
padding: 15px;
}
.br {
background: #000 url(br.gif) bottom right no-repeat;
position: absolute; bottom: 0; right: 0;
padding: 15px;
}
-->
</style>
</head>

<body>
<div id="container1">
<span class="tl"></span><span class="tr"></span>
<h2>I have a fixed width of 300px</h2>
<span class="bl"></span><span class="br"></span>
</div>

<div id="container2">
<span class="tl"></span><span class="tr"></span>
<h2>I have no width applied</h2>
<span class="bl"></span><span class="br"></span>
</div>
</body>
</html>

Edit - it's a simple rounding error, but I can't seem to fix it.

[edited by: SuzyUK at 3:10 pm (utc) on July 17, 2008]
[edit reason] URI removed per TOS, (I added the code) [/edit]


Thread source:: http://www.webmasterworld.com/css/3700815.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com