'; ?> i.me.michael - Dashed to Pieces

Dashed to Pieces

The Problem

There has been a quirk in IE (specifically IE5.5 Win, since it's the only version I run) that has bothered me for some time. Block level elements such as DIVs that have a dashed border, do strange things in this browser when scrolling. It glitches, and the dashed border can either disappear in parts, or run together. You can see a screenshot of the problem here. It was by accident that I stumbled onto the reason, and thereby a workaround/solution.

While getting ready to rework the CSS for a section of this site, I vaguely noticed that the pages which used the dashed border were not glitching. I really didn't think much of it at the time, but once I had reworked the CSS, the page glitched like crazy.

What I had removed, which caused the glitching to begin, was the shorthand element background, which had been assigned to the body tag. I had removed it because it was lazily left behind at one point, and was really doing nothing. Or so I thought.

The Fix

What it was doing was preventing IE from glitching on the dashed borders specified elsewhere in the document. I played with all kinds of variations, but it came down to specifying the entire element. Since a missing background graphic doesn't show placeholders or the annoying little red X, I specified a graphic which doesn't exist. (eg. foo.gif) You'll notice the fix is in use on this page, and there is no glitching present in IE. But in this page, which does not have the line of code, the dashed borders should glitch.

The entire line looks like this:

background: #fff url(foo.gif) fixed no-repeat top left;

Why IE does this in the first place, or why this fixes it, I have no idea. This is just a workaround, until Microsoft fixes the problem. More troubleshooting still needs to be done.