CSS Curved Edge Box Problem
Posted: 18 August 2005 08:58 AM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2005-08-18

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>

Profile
 
 
   
 
 
‹‹ Forms: CSS or Tables?      CSS Table Help ››