![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
kingandyTrying 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.
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.
![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
no subject
Date: 2005-01-05 06:41 pm (UTC)