hi there! i have a problem with CSS Curved edges example. I am trying to give a Curved edge box made with CSS 100% height. While i can succesfully do that, for some unknown reason the right-bottom curved corner image starts floating. Can you pls help.
I am attaching the entire code herewith. With just one request…Could u pls download the curved images from http://www.webdevtips.com/webdevtips/style/corner.shtml.
Would appreciate help ASAP, coz i have to get this workin atleast by tomm mornin India time (IST- GMT+5:30).
Thanx!
-rajesh
The Code:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<title>Untitled Document</title>
<style type=“text/css”>
BODY, HTML {
height: 100%;
min-height: 100%;
margin: 0px;
}
#main {
height: 100%;
min-height: 100%;
background-color: #000066;
color:#FFFFFF;
font-size: 12px;
}
div>#main {
height: auto;
}
#top {
text-align: center;
height: 10%;
background-color: #999999;
width: 100%;
float: left;
clear: right;
}
#mid {
background-color: #00CCFF;
/*text-align: center;*/
width: 100%;
height: 80%;
min-height: 100%;
float: left;
clear: left;
}
/*div>#mid {
height: auto;
}*/
#bot {
text-align: center;
background-color: #990000;
width: 100%;
height: 10%;
float: left;
position:relative;
bottom:0;
}
#nav {
width: 776px;
background-color: #0000CC;
text-align: center;
margin: 0 auto;
height: 100%;
min-height: 100%;
}
div>#nav {
height: auto;
height: inherit;
}
#content {
width: 776px;
margin: 0 auto;
background-color: #CC9999;
height: 100%;
min-height: 100%;
font-size: 12px;
}
#leftcol {
width: 171px;
background-color: #009933;
float: left;
clear: both;
height: 100%;
min-height: 100%;
}
div>#leftcol {
height: auto;
}
.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 100%; min-width:100%; height:100%; min-height:100%}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}
</style>
</head>
<body>
<div id=“main”>
<div id=“top”>Header</div>
<div id=“mid”>
<div id=“nav”>
<div class=“bl”>
<div class=“br”>
<div class=“tl”>
<div class=“tr”> Lorem ipsum dolor sit amet consectetur adipisicing elit </div>
</div>
</div>
</div></div>
</div>
<div id=“bot”>Footer</div>
</div>
</body>
</html>