Aaron Adams’s Blowhard Blog

As you’re aware, I upgraded my page last week with a new look. Within minutes, someone had already pointed out a rendering inconsistency that’s just downright annoying.

The problem I speak of is the long description of the site, which is too close to the site banner in Internet Explorer 6. Take a look at these two pictures to see what I’m talking about. The picture on the left is from Safari, my usual browser, and the picture on the right is from IE6 on Windows XP.

Notice the difference: Safari has a 20-pixel space between the words and the banner, whereas IE6 has none.

The banner at the top is a simple div with a graphic set as the background. The right column of the page is a div contained inside another div, as the code indicates:

<div id="bSideBar>

<div class="bSideItem">
<p>This site is about whatever I happen to feel like at any given moment. Some of it is personal, most of it is not. This is not a news site. I do my best to be logical and accurate, and I ask the same of my readers.
<br /><br />


The div id bSideaBar is defined as such in the stylesheet:

.baseline, .bFootNote, #bSideBar, .bSideBar, .bSideBarb, .bSideItem, .leftBlock, #leftcolumn, #menu, #pageFooter, #pageTitle2, #prelude, .rightBlock, #rightcolumn, #side {
display: none;
}


In other words, the element is rendered as if this tag doesn’t exist. The theme I’ve selected for the page doesn’t use it, so it’s turned off.

Now let’s take a look at the CSS code for the div class bSideItem:

#bSideBar {
margin-left : 545px;
padding : 20px 0 10px 0;
width : 190px;
font-size : 1em;
font-family : 'Lucida Grande', Verdana, Arial, sans-serif;
}


The important part of the code is the padding. Padding is specified as top, right, bottom, left, stated in this case as pixels. It’s obvious that a 20-pixel pad is intended at the top of the div. It’s explicitly stated right there in the stylesheet. That 20-pixel pad is what separates the wording from the banner.

Now, let’s do some pixel-by-pixel measuring to see who includes the 20-pixel pad and who doesn’t.

Here’s a picture of Safari’s rendering of the div.

I’ve used Photoshop to mark a 20-pixel interval with two light blue ruled lines, one marked just below 220 and one marked just below 240. Safari correctly sets the baseline for the first line of text, as denoted by the bottoms of the letters “pp”, 20 pixels from the bottom of the banner div. Safari renders it correctly.

Now let’s layer, at 50% opacity, the same page rendered by Firefox for Mac over top of the correct Safari rendering for comparison.

They’re very similar. There are some differences in font rendering, but the 20-pixel margin is correctly honored by both browsers.

Does Firefox for Windows render correctly as well? I will once again layer it on top of the correct Safari rendering, at 50% opacity, to compare.

Yep, FIrefox for Windows obviously renders the padding correctly.

Finally, let’s layer IE6 on top of Safari and compare, again at 50% opacity, etc.

Wow, not even close. In fact, IE6 appears to completely ignore my explicit instructions to add a 20-pixel pad at the top of this div. It’s not there. It’s the most basic of CSS properties and for some reason IE can’t deal with it.

It doesn’t surprise me at all that the one browser that, once again, has messed up a layout because if it’s inability to carry out a simple instruction is IE. As the coder, I have, in no uncertain terms, told the browser to do a very simple thing and for some inexplicable reason, it can’t.