CSS dotted borders in IE

One of the many irritating things about CSS support in Internet Explorer is that it incorrectly shows dashed borders instead of dotted borders.

A style declaration of border-bottom: 1px dotted black; is shown as if you had used dashed instead of dotted. I use dotted borders as separators between sections of my individual archive pages and I long ago decided not to work around this particular bug. Broken browsers get broken CSS and that’s all there was to it.

That’s all fine and dandy with this site. It’s my site and my decision. But I recently needed to create a dotted border for a client site, and I didn’t want to resort to some table background hack. I set to work figuring out how to get IE6 to show a dotted border. What I came up with is a CSS background hack.

First I created a 2×2 image with a single dot in the lower left corner. The dot is the color that I want to use as my border color. In the case of this blog, that would be hex #A5AEC5.

Then I went into the CSS and changed my rule that creates the dotted border. It used to simply say…

.hr {
	margin: 0;
	padding: 0;
	border-bottom: 1px dotted #A5AEC5;
}

Since that works in Mozilla, I needed a way of creating a rule that would only work in IE. I wasn’t able to find a CSS hack that would cause only Internet Explorer to apply a rule, but the star-html hack keeps all versions of Mozilla, Netscape, and most versions of Opera from reading a rule, so it’s good enough for these purposes.

Using that hack, I added a rule after my existing rule that disables the dotted bottom border and adds a background image aligned to the bottom and set to repeat horizontally. The background image is that 2×2 image I created earlier.

.hr {
	margin: 0;
	padding: 0;
	border-bottom: 1px dotted #A5AEC5;
}

* html .hr {
	border-bottom: none;
	padding: 1px;
	background: url(/images/css-dotted.gif) repeat-x bottom;	
}

Now something that’s odd is that IE wouldn’t display the background image unless the div had some sort of size applied to it, but when I added height: 1px; to the CSS IE insisted on making the block 10 pixels high. It seems that IE is applying either padding or margin to that block, even though I specified that both should be zero. So the workaround I ended up using was to use a single pixel of padding instead or setting the height to one. That way, the div still has a vertical dimension, but IE doesn’t force it to be larger than I wanted.

Now Mozilla, Netscape, and recent versions of Opera show the dotted CSS border and most other browsers see the dotted image as a border. Take a look at the borders near the comments form of this entry to see how it looks.