Gah

[kingandy]

Trying to code up a new layout for my website.

How can browsers differ on the most fundamental things? Set a DIV tag's WIDTH style to 120px with 5px padding - I'd expect a 120px wide box with 5px of space between the border and the contents.  IE actually does this.  Firefox, on the other hand, assigns your width to the content area, then adds any padding on before placing the border, which means you've got a 130px wide box.  More, counting the border itself.

This page discusses the problem some more, and explains how while the former may seem more "common sense" (from a design point of view), the latter is more consistent and logical in terms of the specification.  And anyway, that's the way it's actually defined as laid down by the W3C.  So it looks like Firefox got it "right", while Microsoft have flown in the face of actual definitions and gone for a populist solution.

The problem, of course, is not which one of them is right; it's that one of them's doing it differently, which means CSS-based platform-independent web design is still impossible.  The annoying part is that I know a fair number of potential employers will be browsing with IE, and those that aren't will have half an eye on whether I can make things work in IE because the clients will use the infernal contraption, so I've got to at least make sure it doesn't look shit.

For a small example of what I'm working on see here - the two boxes are lined up on IE but overlap on Firefox.  (The colours are terrible, this is just for coding purposes.)

Of course there's always the option of doing two style sheets and a browser detection script which determines which one to use, but that always strikes me as somewhat defeating the object.  Still, needs must.

And IE ignores the border property on your body style, even if you've got some margin.  Stupid.

Comments

[kingandy]

Well, it's nice to see MS at least acknowledge the existence of standards (yes, I do remember that post now I re-read it;). Unfortunately it comes set to Quirk mode as standard, so I have to allow for that as the default internet user's view of things.

To save my hair, I am choosing to ignore Netscape, Opera, earlier versions of IE etc for now...

[blufive.livejournal.com]

Unfortunately it comes set to Quirk mode as standard, so I have to allow for that as the default internet user's view of things.

But, in IE6, it's under your (that is, the web content writer's) control. It's one of the few bits of browser behaviour that is. Slap a doctype on it, batter it so that it at least nearly passes validation (your present source is probably pretty damn close already) et voila.

[kingandy]

Oh! I had misunderstood entirely. Or, forgotten, since I seem to have got it when I commented there.

Excellent ... doctypes ahoy.

[kingandy]

Hmm. Doctype added, validation passed, stupid IE still applying width to box rather than content.

[blufive.livejournal.com]

Unfortunately, IE is braindead, and refuses to engage standards mode while the (entirely correct) xml preamble (<?xml version="1.0" encoding="iso-8859-1"?>) is in place. Whip that out, and see how you get on. The validator might whinge, but actual browsers should cope fine.

(Along the way, I found this excellent document which cross-references lots of browsers against lots of doctypes, and tells you which rendering mode you'll get)