Validus
02-28-2007, 06:37 PM
Example: http://www.brokenlands.com/firefox-right-margin-collapse/
Reduce the width of the Firefox browser until you've hidden part of the red box. Scroll all the way to the right, do you notice something missing? Firefox ate the right margin. The border's sticking right to the edge of the page.
Do the same in IE, and it preserves the margin.
Code's below, though any permutation of margin/padding on either a wrapper div or on the body tag itself seems to have the same result in Firefox. It's a pet peeve, been annoying me for a while even though it doesn't *really* affect usability (maybe it would on a PDA).
Anyone come across a way to fix this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Testing</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>text blah blah</div>
</body>
</html>
div {
border:2px solid red;
margin:24px;
min-width:500px;
}
Reduce the width of the Firefox browser until you've hidden part of the red box. Scroll all the way to the right, do you notice something missing? Firefox ate the right margin. The border's sticking right to the edge of the page.
Do the same in IE, and it preserves the margin.
Code's below, though any permutation of margin/padding on either a wrapper div or on the body tag itself seems to have the same result in Firefox. It's a pet peeve, been annoying me for a while even though it doesn't *really* affect usability (maybe it would on a PDA).
Anyone come across a way to fix this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Testing</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>text blah blah</div>
</body>
</html>
div {
border:2px solid red;
margin:24px;
min-width:500px;
}