Comments

FWIW, the Mac version of IE5.x correctly displays dotted borders.

IE is probably putting some text in the box when you give it a height - you could also try font-size: 1px; instead of using padding, and see if that makes it behave.

"One of the many irritating things about CSS support in Internet Explorer is that it incorrectly shows dashed borders instead of dotted borders." I discovered that Internet Explorer DOES display dots if you set the border width higher than 1px...not pretty dots, mind you, but dots nonetheless. You can see them in action on a site I'm working on, http://www.computertutordavis.com.

To prevent IE from automatically putting a 1-line height inside the hr you can add the following rule: overflow: hidden;

Nice work! A few months ago I came across the same problem concerning the misinterpretation by Internet Explorer of a height value. Being rather surprised by this behavious I did some testing. To some degree I found a workaround. Alas, it only worked for heights that or not inferior to 3 pixels. You can view the results at: http://www.nundroo.com/ie_height/

Oh well, seems my example is outdated already. Xiven must've posted while I was writing mine. Using his suggestion (overflow: hidden;) the IE height problem is solved. Nice!

Excerpt: Adam Kalsey comes up with a nice hack for dotted borders in IE.

Yes, IE insists on that default height. I normally deal with this by setting line-height:1px

While this is certainly a nifty trick, it's not really a "border" solution as the article title suggests. It's actually a spin on existing horizontal rule hacks. Wouldn't it be great if we could actually have dotted borders in IE that run around and entire block element's perimeter? We'll have to come up with another hack, cause M$ sure as heck won't be addressing this and the myriad IE CSS woes anytime soon (if ever).

If you're willing to settle for a border of width 2 or greater, IE will make dots instead of lines. I'm not sure why 1px dotted borders look dashed, but I always assumed that it was a "feature" they had done on purpose, maybe under the assumption that 1px dotted borders look bad.

Excellent! I must say nothing is more ugly than dotted lines representing themselves as the elegant dotted.

Yikes! That should read "dashed lines representing themselves as the elegant dotted!"

Wouldn't Tantek Celik's box-model hack let you insert this sort of thing as well, slipping IE-only CSS code past the "good" browsers?

Ah, yes. Except if you include the "<xml?>" declaration, oddly enough. Thanks for setting me straight.

Excerpt: Adam Kalsey wrote an awesome article called "CSS dotted borders in IE" which explains how to get Internet Explorer to properly render borders with a 1px dotted declaration. The fix is the star-html hack which enables you to write CSS...

Ok, how about the dotted links?

using this hack means that I can't assign another background for the DIV anymore...? or is there a workaround?

All hail ::outside. All hail ::outside.

Thank you. This article is really well written and informative. I'm not interested in dotted borders at this point, but the hiding of W3C CSS from MS because MS pukes on it was valuable, and the star hack is great, as well as the escaped comment hack. I found a problem with having transparent borders, which IE doesn't seem to understand the word transparent. I highlight images with links using ridged borders, and I need transparent borders to preserve the layout. With this, I just shut the feature off. Thanks a million...

Excerpt: The Kalsey Consulting Group has come up with a neat solution again. CSS dotted borders in IE using the standard CSS rules doesn’t work. IE uses dashed borders instead of dotted borders when using border: 1px dotted #000;. They have...

can you put that webtrek game back on it was the bomb but make it for everyone to use please it is boo oo with out that game.

Excerpt: IE doesn't support 1px dotted CSS borders. There is a work-around.

Excerpt: One of the many irritating things about CSS support in Internet Explorer is that it incorrectly shows dashed borders instead of dotted borders. Unless they are bigger than 1px. Kalsey Consulting Have come up with a nice hack....

This is all very nice. But what if I need all 4 borders (top, left, bottom, right) to be displayed correctly, for example around a DIV_?

Excerpt: Menampilkan batas pinggir (border) dengan jenis dotted ternyata menjadi masalah dengan perambah (browser) Microsoft IE. Terutama berupa batas yang mengelilingi bentuk kotak. Hasil yang sudah terlihat halus di Mozilla menggunakan jenis paling tipis, de...

Excerpt: Si veis mi página desde IE, y os fijais en los acrónimos o en los bloques de texto citado, vereis que el borde inferior de los primeros, y el superior del párrafo fuente de los últimos se ve punteado y no rallado. Para ello uso dos reglas, una gener...

Now there is a way to display dotted borders all the way around objects for all browsers. Check out this link for more info. http://www.snibworks.com/source/tutorials/dotted.php

"I needed a way of creating a rule that would only work in IE." Easy, since IE also supports '=' as a separator btw name and value in a css declaration: { border-style : blah for Others; border-style = blah for IE; }

Just to let you know: #content{ border-right-style: dotted; border-right-color:#cccccc; border-right-width:thin; } Works like a charm in IE

Your tip with the background-image works very well for me. very nice!

to Toms point: You can also define IE only styles using the "underscore hack" : margin: 12px; _margin: 12px; The underscored style will be read by IE, but ignored by good browsers.

Steve: The problem with CSS hacks is when Microsoft works out some of its kinks in Internet Explorer 7, it may render some of these hacks useless thereby requiring you to fix them later on so best to employ conditional comments now to save you from the hassle.

terrible no borders

Hi there! The reason MSIE was making your DIV larger than the 1px you wanted, is that it's making space for text that isn't there. In other words, it assumes that the DIV contains at least one line of text, even when it doesn't. Just specify a font-size of zero, and it'll go away.

maybe i am crazy, like becca - but i am using IE 6 and, well, i see no dotted borders on your page, near the comment section. i am of course, hoping that i am not really crazy - but it's a possibility.

hola, por que no hacen las paginas compatibles tambien con IE se que es un navegador con muchos defectos pero por ser el que mas usan los usarios es necesario hacerlo compatible.. tal vez en algun momento cambien las cosas... saludos! yo uso fire fox & IE

I am attempting to apply this hack to a fieldset as well as a style for my nav and subnav. The hack doesn't seem to work well outside of your horiz rule situation, at least on my end. Can you offer an alternate solution or would you be willing to check my css to see what it is I'm doing wrong?

Thanks ...ur dot border tutorial its work and easy to learn from here....nice work...

Hi there, i think your article was stolen. http://www.bobscape.com/2004/09/ie-css-dotted-border-problem.html

how about this: making a tag class: p.hr{ border-bottom: dotted 1px #fff; padding:5px; margin:0; } works in all browsers.

Emo and Adam...actually the ENTIRE bobscape.com (design) was stolen from Boagworld (http://www.boagworld.com), which is a run by Paul Boag, a respected and reputable standards flag-bearer. I'd be surprised if any of bobscape content is original.

Actually, to make it the same in all browsers you have to get rid of the other borders in Mozilla and Opera. With: hr{ border-bottom: dotted 1px #fff; padding:5px; margin:0; } You still see three ugly borders and also it doesn't act the same way as in IE with the padding and margin as well(my version at least). I used this: hr { border:none; border-bottom: dotted 2px #CCCCCC; width:85%; background-color:#FFFFFF; color:white; } Also who cares if his stuff was posted somewhere else? It'd make me a little fidgety to use the word "I" when posting something like this if I didn't make it but what have you done on the internet that is original? Nothing... enjoy your horizontal rules.

I'm actually having a sort of similar problem, except it's with roll-over css images and an Internet Explorer's inability to recognize the hover command for a class/id for a div background.

when we have a group of words, but shown on two lines because of lack of space, only the second line is underlined actually. How can we improve it so the first line is also underlined?

A variation on this - if you make the coloured pixed in css-dotted.gif transparent, you can assign a css background-color value, and make the dotted border any colour you wish.

IE 7 draws dotted borders around .

... table elements, that is.

The reason that IE renders an minimum height for an element has something to do with the font-size and the line-height. If you set both to zero you can give the div any height you like :) My experience is that Mozilla/Firefox acts the same way.

Is there a javascript solution which doesn't need images? That would be much more useful for us.

Abu Aaminah, it's possible. But I don't know how to do it in JS :)

REAL DOTTED without Image can be accomplished by: border:0px; border-top:1px dotted #000000; height:0px; works in all browsers.. ---------------- have a good day..

That is all fine, but what if I need to border a whole div with border dotted 1px? Any idea?

Very useful information. Thanks !

This solved my pesky little problem. Thanks!

Does anyone knows a clean way to remove IE borders from while using a background image? no css does that. for example: I need a 20px height HR with background image (not just dotted line). I used: hr { background:transparent; height:22px; width:99%; border:none; background-image:url(../images/parochet.png); background-repeat:repeat-x; background-position:bottom; }

works here too actually. tested on IE6, IE7, FF

hey how do you get rid of those dotted link borders in ie 7

this works: border: 1px; border-style:dotted !important; border-style:dashed; border-color:#999999;

I tried every thing with a hr. It didn't work for me and then I desided to use a div with the hr class, so just a class. And it worked for me. Using an image of 2px width, 1px height with a 1x1px color and 1x1px white or what ever your background-color is! HTML: CSS: .hr { clear: both; padding-top: 1px; background-image: url(../images/border.jpg); background-repeat: repeat-x; }

Thank You lasiman. i was looking 4 this code

IE 8 and 7 are not working. I have to change dotted to solid. Anyone success on IE8?

i tried hard but don't find yet the right dotted or dashed hr line.... if you know the right one, pls send me those code with mail.... i am waiting for you... send me full code... rokonmagura@gmail.com

I have the same problem.. doesn't work for IE 7 / 8 Does anyone have solved they problem right now? If yes please answer this comment! Thanks!

I have found a result.. I have tested it on Chrome, FF, IE and it works ;) hr {border:dotted #abb0b5;border-width:0 0 1px 0;} * html {border-top:2px dotted #abb0b5;margin-top:.5em;zoom:.5;} * html hr {margin-top:-9px;}