homepage Welcome to WebmasterWorld Guest from 54.166.113.249
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE6 rounding bug in relative box with absolute positioned corners
ewwatson

5+ Year Member



 
Msg#: 3700815 posted 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]

 

SuzyUK

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



 
Msg#: 3700815 posted 3:15 pm on Jul 17, 2008 (gmt 0)

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

ewwatson

5+ Year Member



 
Msg#: 3700815 posted 4:42 pm on Jul 17, 2008 (gmt 0)

Sorry about the link - forgot. Thanks Suzy! Why would you need to throw it into quirks mode though - for IE7?

SuzyUK

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



 
Msg#: 3700815 posted 8:49 pm on Jul 17, 2008 (gmt 0)

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!)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved