rounded corner div within css frames is not displaying properly
I've been trying to place a rounded corner div within the main content div frame, (frames code is from dynamic drive), but the rounded corner div is all messed up. Only first 2 rounded corner divs show that too misaligned in both IE & FF.
following is the exact code of the page:
<!--Force IE6 into quirks mode with this comment tag-->
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left Frame Layout</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}
#maincontent{
position: fixed;
top: 0;
left: 200px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
<style type="text/css">
.expand_contract_details{
padding:0px;
padding-left:10px;
margin-left:10px;
margin-bottom:10px;
font-size:12px;
font-weight:bold;
line-height:18px;
margin-top:0px;
}
.expand_contract_details a {
background:transparent;
}
.expand_contract_header, .expand_contract_details span{
width:auto;
}
.expand_contract{
background:#d9d9c3;
padding:0px;
padding-left:5px;
margin-bottom:10px;
margin-left:10px;
font-size:12px;
font-weight:bold;
line-height:18px;
}
.esd_box {border: 1px solid #FFCC00;}
.esd_box span {width:100%; position:relative; display:block; min-height:10px;}
.esd_box .esd_box_top {background: url(../images/rounded_corners/tl.gif) 0 0 no-repeat; top:-1px; left:-1px;}
.esd_box .esd_box_top span {background: url(../images/rounded_corners/tr.gif) 100% 0 no-repeat; right:-2px;}
.esd_box .esd_box_bottom {background: url(../images/rounded_corners/bl.gif) 0 100% no-repeat; bottom:-1px; left:-1px;}
.esd_box .esd_box_bottom span {background: url(../images/rounded_corners/br.gif) 100% 100% no-repeat; right:-2px;}
.esd_box_interior {padding:3px 7px 3px 7px;}
.esd_box_interior td {font-size:10px;}
</style>
<link rel="stylesheet" href="../esd/css/Menu.css" type="text/css"/>
<!--[if IE]>
<link rel="stylesheet" href="css/Hacks_IE.css" type="text/css"/>
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" href="css/Hacks_IE_lte6.css" type="text/css"/>
<![endif]-->
<!--[if lt IE 6]>
<link rel="stylesheet" href="css/Hacks_IE_lt6.css" type="text/css"/>
<![endif]-->
<script language="JavaScript" type="text/javascript" src="js/scriptslayout.js"></script>
</head>
<body>
<div id="framecontent">
<div class="innertube">
<h1>Left Menu</h1>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<!-- Start golden box -->
<div class="esd_box" style="width:97%;"> <span class="esd_box_top"><span></span></span>
<div class="esd_box_interior">
<!--Start main content here -->
<p class="expand_contract">Selection Options</p>
<table class="regular">
<tr>
<th>Benefit Type:</th>
<td><select class="box" name="benefittype" id="benefittype">
<option selected>--- Select ---</option>
<option>Deductible</option>
<option>Out of Pocket</option>
</select></td>
<th>Patient Selection</th>
<td><select class="box" name="patientselection" id="patientselection">
<option selected>--- Patient / Date of Birth ---</option>
<option>John, 08/12/1962</option>
<option>Johnathan, 02/15/1985</option>
</select></td>
</tr>
</table>
</div>
<span class="esd_box_bottom"><span></span></span> </div>
<!-- End golden box -->
</div>
<br clear="all" /> <!--Very important tag to be placed before every rounded corner box except for the very first one -->
<!----------------------------------------------------------------------------->
<!-- Start golden box -->
<div class="esd_box" style="width:97%;"> <span class="esd_box_top"><span></span></span>
<div class="esd_box_interior">
<!--Start main content here -->
<p class="expand_contract">Selection Options</p>
</div>
<span class="esd_box_bottom"><span></span></span> </div>
<!-- End golden box -->
</div>
<br clear="all" /> <!--Very important tag to be placed before every rounded corner box except for the very first one -->
<!-- Start golden box -->
<div class="esd_box" style="width:97%;"> <span class="esd_box_top"><span></span></span>
<div class="esd_box_interior">
<!--Start main content here -->
<p class="expand_contract">Selection Options</p>
</div>
<span class="esd_box_bottom"><span></span></span> </div>
<!-- End golden box -->
</div>
<br clear="all" /> <!--Very important tag to be placed before every rounded corner box except for the very first one -->
</div>
</div>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks