I'm having a problem with my layout in ie6.

i've got 2 divs floated left with text, a form and some images inside them. in other browsers, everything looks fine (haven't tried all but ie7 and firefox are ok) but in ie6 everything is invisible apart from a drop down menu.

i've tried to find out what the problem is and read some articles about ie6 problems but can't seem to get to the bottom of it.

i don't know whether it is to do with the divs surrounding this being positioned relatively.

the link for the site is http://www.swapaholic.co.uk/testarea2 if that helps.

would appreciate it if someone could help me out.

thanks!

That seems like a z-index problem. Is there an element positioned absolute within that part you're missing in IE?

no, i think the only elements on the page that are positioned absolute are in my header which i wouldn't have thought would affect anything. the elements that are disappearing have no positioning.

validator.w3.org says one of your divs is not closed, I suggest you fix that first.

Thanks for pointing that out, i've fixed that now.

Those 2 divs' inline css is a mess. If you remove it, it works. I suggest you redo it. And use hex colors.

Those 2 divs' inline css is a mess. If you remove it, it works. I suggest you redo it. And use hex colors.

sorry, i don't quite understand. if i remove all the css from the div it doesn't float to the left. if i take out all but the float:left it is still a problem so how will redo-ing it help?

I'll certainly tidy everything up once i've got it working, put all css in external file.

i have used hex colours apart from black and white, does that actually make any difference?

no, that doesn't make a difference. you can use color names, hex or RGB values and it will work.

Please don't hate me when I say it's better to start over, and keep everything like inline styles and divs within divs within divs within... to a minimum. Start with a simple 3 column layout and fill that with repeated boxes that are all styled through an external sheet. Watch out for the double-marging and padding bug in IE6 when floating elements and good luck!

as far as i can see, the only time i've used a lot of divs is to get the shadow effect on my boxes without using images. i suppose i might be able to cut something else out somewhere...

i totally agree that css is best in an external stylesheet, i just prefer to put them inline at first so i only have to make changes in one file. then when it's all working, i plan on moving it all to my external one.

thanks for you comments though. i could try starting again, but i would like to know what's causing this error as even when i simplify it it could still come up.

Sorry, I didn't have time to take a look at all your code, so this might be a shot in the dark.

Do you have an absolutely positioned div that follows a floated div/element? If so, IE6 will not render the absolutely positioned element, or simply transform it so that it's an inline element (therefore screwing up everything else on the page). This might happen with a relatively positioned div too.

I just had to deal with this recently, and learned to insert a "dummy" div in between the floated div and the positioned div (for good bookkeeping, "display: none" in all other browsers).

Hope this helps.

I seem to have sorted this now, thanks for all your comments.

I found an article that says there is a problem with having floats contained within relatively positioned divs. The floated item is hidden behind the parent. I put zoom:1 in the parent div and it's no longer hidden. still having a few problems with margins and padding but that's to be expected!