Hi, I wonder whether anyone can help me.

My redesigned at http://www.robertandrews.co.uk is virtually XHTML1.0-compliant (and the CSS compliant, too, I believe) and I've been using it on Mac Safari and Firefox.

Checking it today on Windows IE6, it's broken severely. The biggest problem is that the three columns appear on top of each other, instead of side-by-side. I'm vaguely aware that this may be a common problem relating to IE6's box model, but I can't figure out how to fix it. Besides, the whit, left-hand column is set to auto width.

It's annoying, because I'd followed a great 3-column layout template tutorial at http://www.tanfa.co.uk/css/layouts/c...-layout-v2.asp - but, either that doesn't work with IE6 Windows (unlikely), or I've modified something incorrectly.


The page should look like this grab.

My stylesheet is here.

Other problems I discovered whilst using IE6 are...

• No dotted underline (1px border-bottom) on green links in the white area.
• The three black straplines are incorrectly overlapped by the first table rows below.
• The sitewide footer is too tall. Text appears to be in the correct place, but the buttons on the right are too low.
• There also appeared to be a white gap above the footer.
• On weblog entry pages, there is no bgcolor showing for replies or for the reply form.
• For those replies, the name of the respondent is too low - it should be flush with the speech icon.

Any CSS experts out there who can help? Gratefully appreciated. Any other problems spotted, more the better

Hello Pillory, Welcome to the fourm!

For the colum issue, have you tried changing the positions from relative to absolute? Since the widths of the colum 2 and 3 are set for 172px it seems like this might work although I did not have time to test it.

Try changing

.two {
 width: 172px; 
 background: #f0f8ef; 
 position: relative;
 font-size: 11px;
 line-height: 14px;
}
.three {
 width: 172px; 
 background: #E4EADB; 
 position: relative;
 border-left: 0px dotted #888;
 font-size: 11px;
 line-height: 14px;
}

to

.two {
 width: 172px; 
 background: #f0f8ef; 
 position: absolute;
 top: ??px; right: 172px;
 font-size: 11px;
 line-height: 14px;
}
.three {
 width: 172px; 
 background: #E4EADB; 
 position: absolute;
 top: ??px; right: 0;
 border-left: 0px dotted #888;
 font-size: 11px;
 line-height: 14px;
}

Due to the differences between ie and the rest you might need to set the top position twice with;

top: ??px !important; /*Firefox, Opera and others*/
top: ??px; /*ie*/

??=Whatever is neccessary, this should work for your footer issue as well just change top to height or whatever you are using.

Like I said I did not test this, but I think it should work.

Cheers,

faze1,

Thanks for the help; glad to be aboard.

I've now implemented those changes to the columns on a test page with a test stylesheet, using a top value of 0px (I don't know why exactly; I would've thought that would be the very top of the *page*, rather than of the div, but anyway...)

I don't have a Windows machine available here but, in Safari on my Mac, the two right-hand columns are still secured in place (with some right-hand over-hang), but they appear to hover over the white panel, which runs *underneath* them on the right-hand side, to the full width of the browser. This is the snapshot.

In Mac Firefox, the white panel again runs the width of the browser but, this time, the two columns appear *behind* it, peering over the top over the green header. I don't have a snapshot.

What am I not doing here?

I'll have to come to the footer (and the general problem of everything breaking entirely in Mac IE5) after the above is solved.

Many thanks.