Welcome to WebmasterWorld Guest from 54.163.100.58

Forum Moderators: not2easy

IE6 rounding bug in relative box with absolute positioned corners

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

5+ Year Member



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]

3:15 pm on Jul 17, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi Eric, sorry no answer just quick code input

I've taken out the link per TOS [webmasterworld.com] and put in your code (only added color to show the "corners"

If you add a comment before the Doctype to throw IE6/7 into quirks it'll show what Eric is explaining

4:42 pm on Jul 17, 2008 (gmt 0)

5+ Year Member



Sorry about the link - forgot. Thanks Suzy! Why would you need to throw it into quirks mode though - for IE7?
8:49 pm on Jul 17, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Why would you need to throw it into quirks mode though - for IE7?

You don't have to.. it just means others will see what you're saying without having to open IE6, maybe some don't have multi environments, it's simply a tip to quick check some IE6 things in your IE7

I think that some of the IE6 questions might be going unanswered because folks don't recognise the "bug" and don't have multi IE's installed to test, but anyway, sorry if it added confusion.

Note: it, the quirks switch, does not show everything the same, it is still quirks mode after all but for some testing between IE6 & 7 it's a handy switch (like hover functionality and some other bugs!)

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month