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