CSS Rounded Corner Box - IE exceptions help needed

Get Started
1

Just started my first serious design attempt with CSS and need a box with rounded corners stretching in either direction - to add a caveat I wanted to get the content to actually sit inside the rounded corners (hopefully you can see what I mean from the example).

So the code I made is this:
HTML:

<html>

<head>
<link rel="stylesheet" href="cornertest.css" />
</head>

<body>

<div id="wrapper">

<div class="top_bottom_row">
<div id="topleft">
</div>
<div id="topright">
</div>
</div>



<div id="middle_row">
<div id="side_box1">
<div id="side_box2">
</div>
</div>

<div id="content">
<p>boo<br />
boo<br />
boo<br />
boo<br />
boo<br />
boo<br />
boo<br />
boo<br />
boo<br />
boo<br />
boo<br />
boo<br />
</p>
</div>
</div>



<div class="top_bottom_row">
<div  id="bottomleft">
</div>
<div id="bottomright">
</div>
</div>

</div>

</body>

</html>

CSS:

body{
}

#wrapper{
position:relative;
width:80&#37;;
margin: 0 auto;
}

#topleft{
background:url("segment_tl.gif");
width:30px;
height:30px;
float:left;
margin-left:-30px;
}

#topright{
background:url("segment_tr.gif");
width:30px;
height:30px;
float:right;
margin-right:-30px;
}

#bottomleft{
background:url("segment_bl.gif");
width:30px;
height:30px;
float:left;
margin-left:-30px;
}

#bottomright{
background:url("segment_br.gif");
width:30px;
height:30px;
float:right;
margin-right:-30px;
}

#middle_row{
position:relative;
margin:-15px 0;
z-index:1;
}

.top_bottom_row{
position:relative;
background:#330044;
height:30px;
margin: 0 30px;
}

#content{
background:#223344;
margin: 0 15px;
padding:1px;
}

#side_box1{
position:absolute;
top:-15px;
width:100%;
height:100%;
overflow:hidden;
}

#side_box2{
position:relative;
top:30px;
width:100%;
height:100%;
background:#aaccdd;
z-index:-1;
}

All looked well and good in Firefox, patted self on back and went to IE with a sense of foreboding. To give it it’s due, IE8 in Standards mode displays fine, IE7 Standards almost fine, but quirks/compatibility mode (the default setting for IE I understand), it’s just completely botched, and I have no idea where to begin - I tried a couple of haslayout tests but to no avail (all div’s have a height setting anyway which afaik is meant to force layout).

Any help greatly appreciated :slight_smile:

edit: occurred you wont have the corner images available to you (doh) example can be seen here

2

Start by using a doctype, html 4.01 strict.

3

Doh… ok thanks, some slight improvement now (IE8 default view is much better, same as IE7 standards), but it’s still totally kaiboshed in quirks - is it worth trying to fix for this? (checked with Safari and Chrome now too, works ok with them).

Either way I still need help with getting the content area/side borders z-indexed properly, and correctly aligned, for IE8 :slight_smile:

4

you can try the following code or use as ref

http://www.tamilcodes.com/document.aspx?content=Snippets&id=61

i am not sure whether i can post link… mod can delete if i should not

5

Hi Beeblbrox,

To please old IE you always need to give a horizontal coordinate for the absolute positioned div.

#side_box1{
position:absolute;
top:-15px;
[COLOR="Red"]left:0;[/COLOR]
width:100&#37;;
height:100%;
overflow:hidden;
}
6

I love you dude, just going to read up on z-index quirks now, fix that and I’m set for IE 7 & 8

\o/