Mark as Unread

UPDATE:  As of Jan 2009, this bug is still appearing in the latest release of Firefox 3.5.7  The bug was fixed at some point in Firefox 3, but it has reappeared

After ranting on twitter for the last few hours, I realized it might be more helpful for the web development community to write a more thorough explanation of the bug that I've recently discovered.

This bug relates to both Internet Explorer 7/8 and Firefox 3.

The bug in action:

http://markasunread.com/examples/zoombug.html

If you have a fixed width element containing floated elements that take up 100% of the that container's width, and any of those elements have a border, zooming below 100% will cause the floats to break or wrap below the adjacent floated element. A small border will trigger the break quicker than a larger border.

Why nitpick?

This could actually cause a website to be unusable when zoomed down.  If you have a sidebar with navigation floated and that sidebar has a 1 pixel border... ouch.  Your navigation will probably wrap underneath your main area... probably below the wrap.  Site navigation gone.

The HTML:

This is the first set of divs. Just a container "a" with floated "b" and "c" inside of it.

<div class="a">
<div class="b">div b</div>
<div class="c">div c</div>
</div>
In the second set of divs, I've added a wrapper of "border" so that I can add a border to it and reduce its width (for proper box-model width total) with the CSS.

<!--add a "border" div to set .b border and reduce its width-->
<div id="border">
<div class="a">
<div class="b">div b</div>
<div class="c">div c</div>
</div>
</div>


The CSS:

.a {
width:200px;
}
.b {
float:left;
width: 100px;
background:#FCC;
}
.c {
float:right;
width:100px;
background:#9FC;
}
#border .b{
width:98px;
border: 1px solid black;
}

Below is a screenshot of how the code renders at 100% zoom in IE7/8 as well as Firefox 3:

Code rendered at 100% zoom in IE7/8 and Firefox (acutally... all modern browsers)

Now, here is what it looks like if you zoom down to anything below 100% (I'm using 99% here just so you can easily see the elements, but the results are similar for all zoom percentages below 100%)

Code rendered at 99% zoom and below. The floated div wraps. This is the bug

This is the simplest example I could think of. I spent hours working math on paddings/margins/borders trying to understand why my pages were breaking when zoomed down. I finally narrowed it down to the border. Can anyone confirm if this is a noted bug?

The Results

Here is the link again for you to test the bug.
http://markasunread.com/examples/zoombug.html

It's worth noting that the bug is not present in Opera, Chrome, or Safari. Also worth noting... zoom feature sucks anyway. Why won't they trash it?

Is there a fix?

Unfortunately, my only suggestion is to not set the inside elements to exactly the width of their container.  Give em some breathn' room.  If the page breaks at 25% zoom, I really don't care.  But it should be able to at least zoom down 1 time

Volinist David Garrett made an appearance on the Today Show this morning. I don't know his full story, but he said that he came to the US at an early age (I think seven) and studied at Juliard.

He played snippets of some pop and rock tunes and movie music. Then he performed Michael Jackson's "Smooth Criminal." I would call the performance "listenable." He's definitely an accomplished violinist. I was impressed with his accuracy, even though he tended to be a bit ahead of the beat on "Smooth Criminal" (I'm being picky here, but if you're going to play Michael Jackson and make it sound cool, you don't want to be on the front edge of the beat!)

Garrett has a new CD out and a US tour underway. I'm conflicted about this CD. On the one hand, I was really impressed with Garrett's playing. On the other hand, why why why can't this talented musician offer the world something original and personal. Do we really need a rocking violinists version of AC/DC's "Thunderstruck"?

Here the tracklist off the CD:

1. Summer (Vivaldi)
2. Nothing Else Matters (Metallica)
3. He’s A Pirate
(”Pirate’s Of The Caribbean” Theme)
4. Smooth Criminal (Michael Jackson)
5. Csardas (Gypsy Dance)
6. Who Wants To Live Forever? (Queen)
7. Thunderstruck (AC/DC)
8. Ain’t No Sunshine
9. Carmen Fantaisie with Paco Pena
10. Air (Johann Sebastian Bach)
11. Zorba’s Dance
(From “Zorba The Greek”)
12. Chelsea Girl
13. Rock Prelude
14. Dueling Banjos (Dueling Strings)

The answer is, no, we don't. Also, we don't want to hear Bill Withers on the violin. Or, if we do, you can bet we'll only listen one time. It's kinda like an M Night Shyamalan movie... it's gimmicky. So is most of the CD.

We're off to the Buffalo to sightsee. I'm going to take my camera along to see if I can get some good pics.

I'm going to try to get some photos for a client's website as well