I was just checking something in Internet Explorer 6 for the Microsoft Windows XP Home Operating System. Something I often forget is the fact that it renders dotted borders as dashed. I’m aware of the hack that was revealed not too long ago — and a good hack it is, but what kills me is that it is a bug so obviously noticed.
Wouldn’t that be something that’s easily fixed when going from version 5 to version 6? Maybe there’s a good reason for it. I can understand obscure bugs being replicated from version to version, but man… a dotted border should look different than a dashed one.
My apologies to IE6 users out there — I think my dashed links look horrible, but dashed they will be.
Filed in: css
Comments Feed
This is an interesting phenomenom, really. IE actually DOES render dots instead of dashes, only not for when you set your border-width to 1px.
But since most people set their borders to 1px, many simply assume that IE does not render dots at all.
I learned this by accident while working on Computer Tutor. Granted, large dots aren’t pretty, but they ARE dots.
You know, that’s always been what’s ticked me off the most!
I use dotted borders a whole lot in my designs, and the ugliness of dashed ones actually makes me rethink the decision.
I still think that using background-image is sort of a hack, but then, if a “hack” is the only way to get around such an obvious bug, then maybe its not a hack anymore ;)
h1 {
border-bottom: 1px solid #000;
}
body > h1, div > h1 {
border-bottom: 1px dotted #000;
}
that’s what i do, especially handy for links
Why not just change the border-style?
body>h1,div>h1{ /* selectors should contain no space if you don’t want IE5.0 to apply the rule [related]. */
border-bottom-style:dotted;
And I also like to use “thin” instead of “1px”, but again IE messes it up.
aliotsy – very interesting. Thanks for that info. Makes more sense now, that it’s only botched when at 1px width.
I also like the idea of showing IE a solid line instead.
I also find that 1px dashed borders, when rendered on a colour background in my IE6/Windows, look like the line colour over white, regardless of the background colour.
EG: A black dashed border on a purple background appears to be a white and black dashed border. Sound familiar?
I think it could be a local bug. I haven’t encountered it anywhere else. Irritating though. Incredibly ugly, as you can imagine.
Cool tidbit Anne… already bookmarked :)
Dan – you may know this, but if you want to apply a style only to IE6, you can set the links to work like this:
a {border-bottom: 1px dotted;}
* html a {border-bottom: 1px solid;}
I don’t know what the reasons are (they’re lost in someone else’s blog, for sure) but to the best of my knowledge the ‘* html’ only affects IE6.
I am a IE6 user. And after months of seeing dashed lines instead of dotted ones, I think they have grown on me.
Wow! You know I wondered, but thought I was going mad! Good to see that it’s not me!
Please keep up all the hard work, you truly ARE making the Web a better place… Microsoft will catch up eventually ;)
Coos