Gustaf Liljegren wrote:[color=blue]
> I use to trust Firefox, but in this case, I don't know what to think. My
> test page:
>
>
http://gusgus.cn/test/index.html
>
> IE6 does the right thing. The containting <div> is 600px, and within it,
> there's one <div> of 400px and another of 200px, laying side by side.
> The right <div> has padding on the left and right, to add some space
> within the box, but Firefox (0.9.2) seem to confuse paddings as margins.
> Here's the right <div> in my CSS:
>
> #right {
> float: right;
> width: 200px;
> overflow: hidden;
> background-color: #DDDDFF; /* blue */
> text-align: left;
> padding: 8px 8px 8px 8px;
> }
>
> This box in Firefox is not 200 wide, but 216 (width + padding). It must
> be a bug, or my understanding of margins and padding will crumble.[/color]
Firefox is right. IE6 shows it wrong, but only because you are
triggering quirks mode. See
<http://gutfeldt.ch/matthias/articles/doctypeswitch.html> for details on
quirks and standard mode.
And see
<http://msdn.microsoft.com/workshop/author/css/overview/cssenhancements.asp>
for Microsoft's explanation of the differences, particularly
<http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true#cssenhancements_top ic3>,
"Fix the Box Instead of Thinking Outside It"
If you remove the <?xml version="1.0" encoding="utf-8"?> line, you'll
trigger standard mode in IE6 and it will show the page the same way as
Firefox.
Matthias
