Page render issue, rounded corner div behind container div.

GoogleCodeExporter commented 8 years ago

What steps will reproduce the problem?
1. Copy & paste code below to a text file rename .html
2. Load the page in IE7 and see no div rounded corners
3. Delete the line <div style="clear: both;"> </div> reload and see rounded
corners.

What is the expected output? What do you see instead?
Whats happening is that the rounded div does exist however it is behind the
container div. You can see it as the page renders. 

What version of the product are you using? On what operating system?
XP IE7

Please provide any additional information below.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    background-color: #000;
    font: normal 11pt Trebuchet MS,Arial,sans-serif;
}

.header {
    background-color: #003399;
    height: 150px;
}
#container {
    background-color: #FFFFFF;
}
.content {
    background-color: #33FFCC;
    float: left;
    width: 200px;
}
.round-corner {
    float: left;
    background-color: #666666;
    width: 420px;
    height: 220px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    border-radius: 32px;
    behavior: url(border-radius.htc);

}
.footer {
    background-color: #3366CC;
    clear: both;
    height: 40px;
}
</style>
</head>

<body>
<div class="header"></div>
<div id="container">
    <div class="round-corner"></div>
    <div class="content"></div>
    <div style="clear: both;"> </div>
</div>

<div class="footer"></div>
</body>
</html>

Original issue reported on code.google.com by haydnjon...@gmail.com on 15 Jan 2010 at 6:02

GoogleCodeExporter commented 8 years ago

#container should have  position:relative  and  z-index:0(for IE8).
I have no idea if this will fix this particular problem though :)

Original comment by atg...@gmail.com on 16 Jan 2010 at 1:07

GoogleCodeExporter commented 8 years ago

I had a similar issue and the relative position and z-index:0 fixed it for IE8. 
 Thanks!

Original comment by c...@paywire.com on 7 Feb 2013 at 7:42

sonar3 / curved-corner

Page render issue, rounded corner div behind container div. #24