I have the following html/css that creates some divs with rounded corners. I can't figure out why IE appears differnt from opera ff safari and other browsers. Anyway I get the following to look like it does in ff for ie 6 or 7?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<style type="text/css" media="screen,print,projection">
/**** CSS for blue boxes ****/
#roundedBlueDiv {
}
/* Rules for the top corners and border */
.round-top-blue{
background:url([URL unfurl="true"]http://i31.tinypic.com/210eh6d.gif)[/URL] no-repeat 100% 0;
margin:0 0 0 18px;
height:5px;
}
.round-top-blue div{
height:8px;
width:18px;
position:relative;
left:-18px;
background:url([URL unfurl="true"]http://i31.tinypic.com/210eh6d.gif)[/URL] no-repeat 0 0;
}
.round-bottom-blue {
background:url([URL unfurl="true"]http://i31.tinypic.com/210eh6d.gif)[/URL] no-repeat 100% 100%;
margin:0 0 0 18px;
height:5px;
}
.round-bottom-blue div {
height:5px;
width:18px;
position:relative;
left:-18px;
background:url([URL unfurl="true"]http://i31.tinypic.com/210eh6d.gif)[/URL] no-repeat 0 100%;
}
.round-content-blue {
padding:0 0 0 12px;
background-color:#5165a3;
margin:0 4 0 4;
text-align:left;
}
/**** CSS for grey boxes ****/
================================================*/
#roundedGreyDiv {
}
/* Rules for the top corners and border */
.round-top-grey{
background:url([URL unfurl="true"]http://i27.tinypic.com/35mmiqb.gif)[/URL] no-repeat 100% 0;
margin:0 0 0 18px;
padding:0px;
height:2px;
}
.round-top-grey div {
width:18px;
height:5px;
position:relative;
left:-18px;
background:url([URL unfurl="true"]http://i27.tinypic.com/35mmiqb.gif)[/URL] no-repeat 0 0;
}
.round-bottom-grey {
background:url([URL unfurl="true"]http://i27.tinypic.com/35mmiqb.gif)[/URL] no-repeat 100% 100%;
margin:0 0 0 18px;
height:5px;
}
.round-bottom-grey div {
height:5px;
width:18px;
position:relative;
left:-18px;
background:url([URL unfurl="true"]http://i27.tinypic.com/35mmiqb.gif)[/URL] no-repeat 0 100%;
}
.round-content-grey {
padding:0 0 0 12px;
background-color:#f1f0f0;
margin:0 0 0 0;
}
/*** Unique page divs***/
.searchBoxInput{
background:transparent url(/Images/search-box-input-corner.gif) no-repeat scroll 0px;
border:medium none;
vertical-align:middle;
}
#SearchBoxBlue{
width:250px;
margin:0px auto;
}
#SearchGreyBoxWrap{
margin:5px;
}
</style>
</head>
<body>
<div id="container">
<div id="SearchGreyBoxWrap">
<div class="round-top-grey"><div></div></div>
<div class="round-content-grey" align="center">
<div id="SearchBoxBlue" align="left">
<div class="round-top-blue"><div></div></div>
<div class="round-content-blue">
<span style="color:White;">Enter Your Model #</span>
</div>
<div class="round-bottom-blue"><div></div></div>
</div>
</div>
<div class="round-bottom-grey"><div></div></div>
</div>
</div>
</div>
</div>
</body>
</html>