IE6 z-index problems

[pezholio]

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

[tcertain]

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.

[David Laakso]

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:

#middle
    {
    float: left;
    width: 550px;
    margin-left: 200px;
    }
* html #middle
    {
    display: inline;
    }
#left    {
    float: left;
    width: 200px;
    margin-left: -750px;
    }
#right
    {
    float: left;
    width: 200px;
    }
#main
    {
    width: 950px;float:left;
    }
 
/* easy clearing */
#main:after
    {
    content: '.'; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
#main
    {
    display: inline-block;
    }
/*\*/
#main    {
    display: block;
    }
/* end easy clearing */
 
 

[pezholio]

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! :)