Padding is a Strange Creature

While redesigning my pages, I came across an odd behaviour when trying to manage a white box and the padding within it. This tells you a lot about browser defaults and how they can be a pain.

Have a look at the following piece of code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Margin Padding Test</title>
<style type="text/css">
<!--
body {
 background: #e5e5e5;
}

#content {
 padding: 0;
 background-color: #fff;
}
h2 {
 margin: 0;
 padding: 0;
}
-->
</style>
</head>

<body>
<div id="header">
 <h1>Hello!</h1>
 <p>Blabla</p>
</div>
<div id="content">
 <h2>First Heading</h2>
 <p>blabla</p>
 <h2>Second Heading</h2>
 <p>blablabla</p>
</div>
</body>
</html>

Keep your eye on where it says content { padding: 0; }. This is how the page now looks like in Firefox (3.6):

strange padding before

CSS Details: content { padding: 0; }

And now, let’s change the padding in the content div to 0 0 1px 0. And here’s the result, again in Firefox (3.6):

strange padding after

CSS Details: content { padding: 0 0 1px 0; }

Man, how can you take anything for granted after you see the bottom padding here…😉 Maybe those browser reset stylesheets are not such a bad idea after all… At least it looks the same in FF and IE.

The person who can come up with the best explanation will get a pat on the back with this machine.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s