Background-image-position stays at top, not bottom in IE6

I want to create a fluid/flexible curved corner box. Ideally it should be versatile, so the content can appear in the top/bottom of the box.

By rights, I should be able to use 4 elements (divs) and a single image. I can get this working in almost every browser - barring IE6.

I've modified code from http://www.schillmania.com/projects/dialog2/basic.html So that I have the following markup and css;

<div class="boxtl boxcontent">
    <div class="boxtr boxcontentside">tr</div>
        <p>This is the top half of the box</p>
        <p> content! </p>
        <p> content! </p>
</div>
<div class="boxbl boxcontent2">
    <div class="boxbr boxcontentside">br</div>
        <p>This is the bottom half of the box</p>
        <p> content! </p>
        <p> content! </p>
</div>


.boxtl, .boxtr, .boxbl, .boxbr {position:relative; zoom:1; background: url(../revised-images/testbox2.png) no-repeat 0 0; _background: url(../revised-images/testbox2ie.png) no-repeat 0 0; height:auto;}
.boxtl {margin-right:20px; }
.boxtr {margin-right:-20px; width:20px; height:20px; position:absolute; left:100%; top:0;  background-positi开发者_如何学JAVAon: 100% 0; }
.boxbl {margin-right:20px; background-position: 0 100%;}
.boxbr {margin-right:-20px; width:20px; position:absolute; left:100%; top:0; background-position: 100% 100%;}
.boxcontent {padding:20px 0 1px 20px; position:relative; zoom:1; _overflow-y:hidden; width:auto;}
.boxcontentside {height:100%; _height:2000px;}

I've used a large single box image (2000px H/W). The idea of this method is that I can use alpha transparency (corners, shadows etc.), with no overlaps etc.

.

The problem is IE6; it refuses to do anything resembling vertical positioning of the background image. I even tried altering the background-position of the top 2 divs (.tl and .tr) to 50% from the top, but in IE6, it stays at 0.

I've tried using the full/long hand background properties (background-image/background repeat/background-position)and I've tried the x/y version (background-position-x/background-position-y) etc.

It seems if I use the _height: or the _overflow-y: properties to make IE stretch the needed height, it cripples its ability vertically position the image.

How can I do this?

As mentioned by @Dan in the comments, you really shouldn't use this kind corner image technique for rounded corners any more.

You should use the CSS property border-radius for this.

IE6-8 doesn't support border-radius, but you can use the CSS3Pie script to add support for this property to these older versions of IE.

Now you don't need all that extra markup, or all those unnecessary classes, or all that hairy CSS.

The beauty of CSS3Pie is that it only runs in IE. In all other browsers, you'll be using pure CSS, and they'll ignore the CSS3Pie script. In IE, yes, it's a javascript solution, but it's lightweight (typically lighter weight than downloading multiple image files for the corners), and if it doesn't run, the fall-back is simply square corners; not exactly the worst thing in the world.

It also adds support to IE for a number of other useful CSS3 features.

If the download weight of CSS3Pie is too much for you (it's 33k), there are a few other similar projects which do the same thing, but with fewer features. Before CSS3Pie came along, I used to recommend the one from HTMLRemix instead. That's only about 5k, but isn't as good.