IE6 z-index problems

Hi,

I'm getting ready to launch a new design for a site I've been working on. The homepage has three columns and I wanted to change the reading order so the middle column came first. I've done a bit of trickery with padding and positioning and all works fine in proper browsers, unfortunately in IE6 the left column is invisible:

http://www.ratemyplace.org.uk/newsite/index.php

I've tried to rectify this by setting a z-index, but IE6 steadfastly refuses to show it! Any ideas?

Cheers

re: IE6 z-index problems

float: left;
width: 190px;
margin-right: 10px;
position: absolute;
left: 0;
top: 10px;
z-index: 999;
}

I don't know if there is a work around for IE6 and 3 columns, but I do know that float does not work with absolute postioning. If you Google IE6 and 3 columns you get a slew of hits on it. It could be your container space is too small in IE6 due to margins and padding. Try doing a css body with 0 margin and 0 padding and use a IE6 only style sheet or increasing the width of the container.

re: IE6 z-index problems

The below brings the left col up in IE/6. IE/7, and compliant browsers hold. I left the tweaking of the right col to you-- it /may/ need a negative backside margin to pull it a little more to the right...


Try it as a cross-browser test run replacing your selectors #middle, #left, #right, and #main with these, and see what you think:

re: IE6 z-index problems

That's perfect thanks. I used relative positioning to pull the right column 10 pixels to the right and it looks great in all browsers. Thanks a lot! :)