Cross Browser Compatability

[andycain]

Hello guys.

Developing a site using XTHML 1.0 Strict Doctype with CSS and I'm getting problems with getting the site to display properly in Firefox, Opera, Netscape and IE.

Thing is it displays fine (or how I want it to) in IE but in Firefox, Opera and Netscape I get a problem with the margins around my DIVs.

In the last three browsers (Firefox,Opera and Netscape) the site displays exaclty the same which leads me to believe that IE is displaying the site incorrectly (Never heard that before....).

Despite that I want the site to dispaly like IE displays it in all browsers. The problem I'm having in Firefox, Opera and netscape is that the centre DIVs is rammed right up agains the top header DIV when it should be shifted down and inlign with the two columns either side of it.

I've run my site through the W3C Validator and it all checks with 0 errors so I don't think it's anything to do with browsers rendering in quirks mode. I have also run the style sheet through the CSS validator which also comes out with 0 errors. Thereofre all my code is XHTML Strict compliant, yet the site doens't display as intended.

page url: www.1130df.co.uk

style sheet: www.1130df.co.uk/style.css


Any ideas?

[drhowarddrfine]

Thing is it displays fine (or how I want it to) in IE but in Firefox, Opera and Netscape

Your first hint.

which leads me to believe that IE is displaying the site incorrectly (Never heard that before....).

You are thinking correctly. All versions of IE are 10 years behind web standards and buggy. It cannot and should not be trusted to do anything correctly. Like I said above, your first proof of this is the fact that all other browsers display the same as each other while IE stands alone.

Always, always use a modern, standards-compliant browser to initially test your markup to make sure it is displaying correctly. Then look at it in IE to see if it manages to do it the same way. If not, the hacks, quirks and bugs for IE are known and found on hundreds of web sites on the 'net.

I've run my site through the W3C Validator and it all checks out so I don't think it's anything to do with browsers rendering in quirks mode.

Some doctypes are valid but IE will still choke on them. Such as the xml declaration which should be used for xhtml but IE can't display true xhtml anyway so it doesn't matter.

Any ideas?

I'll look at this now.

[drhowarddrfine]

IE is mishandling your header float, as IE so often does. It is expanding the floated container and pushing the center div down. This is a bug in IE which is why you don't see it in the modern browsers.

I don't see why it is necessary to float the header but if you just remove the 'float' from #header, that should solve the problem.

btw, Netscape is dead. AOL dropped development. Don't bother.

[andycain]

IE is mishandling your header float, as IE so often does. It is expanding the floated container and pushing the center div down. This is a bug in IE which is why you don't see it in the modern browsers.

I don't see why it is necessary to float the header but if you just remove the 'float' from #header, that should solve the problem.

btw, Netscape is dead. AOL dropped development. Don't bother.

Fantastic! Thanks. That's fixed it. Really appreciate the help. Any idea why the float stops the margin from displaying properly in the modern browsers?

[drhowarddrfine]

The modern browsers are performing correctly and as the standard states. It is IE that is performing incorrectly. You are seeing a bug in IE. Never trust IE.