Rounded corners container IE6

Question

Hello, I have the following HTML which I'm using to create a rounded container using a left image, a right image, a gradient for the background of the container itself, and a bottom image which in practice is normally a "shadow" I have the following html, it has inline styles defined because it is being generated from a .NET control but I can check for the browser and output different styles. This looks perfect in IE 8 and Firefox 3.5 but it looks awful in IE6. I need to figure out how to get this looking decent in IE6.

<div style="width: 305px; height: 194px;">
<div style="float: left; display: inline; background-image: url(images/LeftSide.png);
    height: 194px; width: 7px;">
</div>
<div style="float: right; display: inline; background-image: url(images/RightSide.png);
    height: 194px; width: 7px;">
</div>
<div style="padding-top: 5px; background-image: url(images/gradient.png);
    background-repeat: repeat-x; width: 291px; height: 194px; margin-left: 7px;">
    <h1> 
        Some text...
    </h1>
</div>

<div style="background: url('../images/small_shadow.png') no-repeat; width:305px;">&nbsp;</div>

You can see an example at https://www.msu.edu/~grossm51/sample/test.html. Thanks in advance

Answer 1

adding the style attribute

 position: absolute;

to the left side and gradient portions did the trick.

Answer 2

This looks like a variation on the IE 6 three-pixel problem with floats:

http://www.positioniseverything.net/explorer/threepxtest.html

To fix it, try this. To the left-floating div, add a -3px right margin:

margin: 0 -3px 0 0;

To the right-floating div, add a -3px left margin:

margin: 0 0 0 -3px;

Finally, on the content div, erase the margin and width declarations.

Answer 3

http://www.curvycorners.net/

Maybe, this helps you. Javascript instead images. Works in IE6.