25 September, 2007

CSS: IE7 float / italic / background positioning bug

I recently stumbled on a peculiar (but not unexpected) Internet Explorer 7 bug that has caused me hours of head scratching. To the best of my knowledge and Googling, this specific behavior hasn't been documented on any of the usual guru sites, such as Position Is Everything, so I'll attempt to document it here.

Overview

For purposes of this discussion, I've pared my page structure down to the most basic structure required to produced the undesirable behavior. Here you see a body element, which contains a centered div with the id content.
<body>
<div id="wrap">
<div id="content">
<div id="timestamp">Updated 09.25.2007!</div>
<div id="copyright">Copyright © 2007</div>
</div>
</div>
</body>
My CSS code sets a static width of 500px for this block, gives it a white background, and centers it horizontally in body. The body has a 1008px x 3px background image that repeats on the y-axis and is centered horizontally. The content div's left and right edges align with the left and right edges of the background's gold "box".

Within the content block, I define two more divs: timestamp and copyright. I want timestamp to appear in italics and line up to the right, so I apply font-style:italic and float:right to it. The complete CSS looks like this:
body {
background: #000 url("bg-test.gif") repeat-y center top;
font:normal normal x-small "Trebuchet MS",Arial,Helvetica,sans-serif;
margin:0; padding:0;
/* IE hacks follow */
text-align:center;
font-size/* */:/**/small;
font-size/**/:small;
}
#wrap {
width:500px;
margin:1em auto;
background-color:#fff;
text-align:left;
}
#content {
margin:0;
}
#copyright {
background-color:skyblue;
}
#timestamp {
background-color:pink;
font-style:italic;
float:right;
}
In most browsers (yes, even IE 6), this renders like the following screenshot:


In IE 7, the content div remains centered, but body's background image position has shifted toward the right.

The Cause

So what's happening here? After a bit of tinkering, I discovered that the layout broke only so long as I floated the timestamp div. Unfortunately, none of the usual tricks for correcting IE's float bugs had any effect.

Eventually, I removed the italic style from the timestamp text, in an attempt to reduce the code to the bare minimum required to reproduce the problem. Which went away. I put italics back, and it returned. This reminded me of an article I'd seen on PIE, which described a bug in the way that IE handles widths for italicized text. It didn't seem to directly address the background image problem, but it led me to experiment with setting an explicit width for the floated timestamp div.

The Fix

I set width:10em, which is large enough to accomodate the timestamp text and, because it's in em-units, will expand if the viewer increases the browser's default text size. Then, to make the date text align as far to the right as possible, I set text-align:right.

Bingo. Problem solved circumvented.

Update: I submitted this write-up to “Big John” of PIE fame only to discover after several rounds of head scratching e-mails that this bug doesn't seem to occur in all IE 7 installations (including Big John's). I get it on my personal laptop and my desktop box at work, but my work laptop and some co-workers' workstations don't exhibit the behavior. All IE 7 version numbers tested are the same, so it may be related to something in the maintenance levels of Windows XP itself or in the metrics of the fonts installed on a given computer. Very weird.

To see if your IE 7 installation exhibits the bug, try the demo here. For the record, the IE 7 Windows factory at browsershots.org exhibits the centering bug.

17 September, 2007

How did I get here?


This month's search terms:
  • sparks are going to fly cause i'm turned on again (see "friction burns")
  • "dilated eyes" eye drops Which reminds me that I still haven't made my opthalmologist appointment.
  • jessica alba shoulder ride Blasted thought police...
  • buy.pickle.juice Not. While. I. Can. Get. It. For. Free.
  • i'm singing a song rolling along "Locomotive Breath", occasionally.
  • "rear steering bike" I've read the discussions, but I still think this sounds like a Bad Idea.
  • zoom foo Yes, but probably not for another week or two.
  • a word for people addicted to riding mountain bikes "Mosquito bait". No, wait. That's two words.
  • badonkadonk site:blogspot.com Sounds intriguing.
  • ladiesladies "flush them" Dial back the mysogyny, dude. You just need to find the right one. And you might try bathing.
  • nabumetone dogs I think I get it: an anti-inflammatory punk rock band. Revolutionary (or not).


Now playing: OK Go, Oh No

15 September, 2007

How the Web works

I was Googling to find a web page cross reference of CSS color codes to named colors, which I found at the Color Schemer blog. I stayed around to browse the blog postings and found this posting with a photo of a Mazda 3 hatchback with a clever license plate (Dorian's would probably be "A0A0A0", for those geeks playing along at home).

I followed the photo link to Flickr, where I learned from visitors' comments that the car lives (or works) right next door to my old office, in Dallas. Considering that most Mazda 3 hatches seem to be gray, silver, blue, or white, I figured there was a pretty decent chance that this was the same red Mazda I've seen a couple times over the past few months. One of the commenters seemed to be the car's owner, T. Scott Stromberg, and curiosity compelled me to follow his posted link to his web site.

I don't have the sort of eye for art that some of you have, and Stromberg's style doesn't really speak to me; but the guy definitely has talent. I could easily see his art hanging in some jazz joint or Mexican restaurant. And, if I were working on a festive web design, I might well be inspired to borrow from his palette of colors.

Which would lead me back here, which, if memory serves, is how the world wide web worked before we had all these cool search engines to take us right to where we need to go.

10 September, 2007

Hand me my pith helmet, Livingston...

...I'm on Safari.

Ever since I became interested in developing standards-compliant web content, using semantic mark-up and CSS, I've tried to keep a representative sampling of browsers and different versions of those browsers on the various computers to which I have access. All well and good, as long as we're only talking about Windows boxes; but what about the bunch of you Apple devotees?

When Emma first posted about browsershots.org, I rejoiced. Finally, I'd be able to see my pages as they rendered on Safari and other non-Windows browsers. The catch is that lots of web developers (and wanna-bes) rejoiced, as well, the result being that there's usually a long queue of other sites waiting for their screenshots.

This morning, I learned that Apple has made available a public beta of its Safari 3 browser for Windows XP and Vista and, although I wouldn't quite say I rejoiced, I did promptly download and install the thing to add to my collection.  It probably does not render XHTML/CSS in precisely the same way as earlier Mac-only versions do, and so doesn't replace browsershots.org in utility, but how can I pass up another weapon in my standards compliance arsenal? 

02 September, 2007

No accounting for taste

In previous postings, I've mentioned that I've become the caretaker of various family treasures, sometimes under mild protest. At an early age, I had it drilled into me that "It's impolite to beg" and, as a result, I've always been reticent about accepting my aging relatives' possessions. At least, that's part of it. Another reason is that I feel that I'm somehow hastening their departure from this world by allowing them to give away their stuff. I know: illogical.

None of which explains the wotsit at right.

During the same visit when my granduncle Carl sent home another of his clocks, we were hanging out in the cellar. It was all pretty much as I remembered it from my childhood. Same slightly musty smell. Same cinderblock walls. Maybe a little smaller than I remembered.

"I've got to start getting rid of some of this old junk," he said. "I'm not going to be around much longer."

At nearly 90 years old, he might have had a point, but I don't even like to think about his passing. In some ways, I'm closer to Carl and my aunt Mary than I was to my grandparents, the last of whom passed in 2000. Still, I know that with no children of their own, they've been sticking name tags on their various treasures for years, so that they could ensure that they found their way to the people they felt would appreciate them most.

"It's just a bunch of junk," Carl repeated. "But if there's any of this you want, I wish you'd take it."

Okay. There was one thing. For as long as I could remember, there had always been this weird cast iron bottle opener mounted on the wall. Kind of a scary thing, to a small kid, with its four wild eyes and bucked teeth, but it had made an impression. I'd always associate the memory of it with that basement, and I told Carl as much. He didn't know what I meant, at first. It had been there since sometime before I was born, and it had long since faded into invisibility for him.

When I pointed it out, he promptly grabbed a screwdriver from the battered toolbox he'd used when he worked as a machinist. Still shaking his head in amazement that I'd pick 'that old thing' as a memento, he placed it in my hand and laughed.

"You'll have to mount that on the wall in your kitchen and think of your old uncle whenever you open a beer," he said. Which is entirely the point.

Except I'm pretty sure I'd never get away with putting it in our kitchen.

But wait. There's more!

I can't remember what I was looking for, but I found a web site the other day that sells reproductions of Carl's bottle opener. And then, because my interest gets piqued by the strangest things, I continued looking. I found an auction site that had a mint condition specimen with its original box. And then, a woman's description of the same bottle opener, which she'd found in the remains of a fire. She's apparently interested in odd things, as well, because she actually took the time to research it.

Crying Fowl

This morning, at the end of this week's obligatory commute to the office, I turned in to the driveway and was accosted by the biggest ho...