Dot Dot Dash

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.


  1. aliotsy says:

    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.

  2. Mike says:

    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 ;)

  3. zlog says:

    h1 {
    border-bottom: 1px solid #000;
    body > h1, div > h1 {
    border-bottom: 1px dotted #000;
    that’s what i do, especially handy for links

  4. 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]. */
    And I also like to use “thin” instead of “1px”, but again IE messes it up.

  5. Dan says:

    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.

  6. Pierce says:

    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.

  7. Mike says:

    Cool tidbit Anne… already bookmarked :)

  8. eric says:

    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.

  9. web says:

    I am a IE6 user. And after months of seeing dashed lines instead of dotted ones, I think they have grown on me.

  10. Coos says:

    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 ;)