Rounded corners container IE6

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; backgr开发者_如何学Goound-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

---

http://www.curvycorners.net/

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

A free JavaScript library for creating gorgeous rounded corners for HTML block elements i.e. DIVs. Supports anti-aliasing, borders and background images.

---

The best solution for rounded corners in IE6 (and IE7/8) is CSS3Pie.

It's an IE-specific script that implements the CSS standard border-radius for older versions of IE.

---

adding the style attribute

 position: absolute;

to the left side and gradient portions did the trick.

---

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.