Comments

Comments for CSS dotted borders in IE

Excerpt: One of the many irritating things about CSS support in Internet Explorer is that it incorrectly shows dashed borders instead of dotted borders. Here’s how you can fix that. Read the whole article…

kevin c smith
July 23, 2003 11:39 AM

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

Adam Kalsey
July 23, 2003 11:49 AM

That's good to know. I suppose if you wanted you could change the second rule to read... /* \*/ * html .hr { border-bottom: none; padding: 1px; background: url(/images/css-dotted.gif) repeat-x bottom; } /* */ ... to hide it from Mac IE 5 using the escaped comment hack ( http://centricle.com/ref/css/filters/tests/escaped_close/ ).

anon
July 24, 2003 10:40 PM

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.

aliotsy
July 24, 2003 10:51 PM

"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.

Xiven
July 25, 2003 12:54 AM

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

Didier Hilhorst
July 25, 2003 9:53 AM

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/

Didier Hilhorst
July 25, 2003 10:01 AM

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!

Trackback from JayAllen - The Daily Journey
July 25, 2003 10:17 AM

CSS dotted borders in IE

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

Brett Merkey
July 25, 2003 10:41 AM

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

tim martens
July 25, 2003 12:16 PM

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

Slime
July 25, 2003 12:42 PM

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.

dmr
July 25, 2003 12:46 PM

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

dmr
July 25, 2003 12:47 PM

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

Daniel
July 25, 2003 2:17 PM

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?

Adam Kalsey
July 25, 2003 3:16 PM

The box model hack only hides from IE 5 and 5.5 on Windows. IE6 is immune to it.

Daniel
July 26, 2003 5:02 AM

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

Trackback from Webspiffy
July 27, 2003 10:33 PM

Dotted 1px Borders in Internet Explorer

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...

David
July 29, 2003 5:53 PM

Ok, how about the dotted links?

gl
July 29, 2003 7:59 PM

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

Adam Kalsey
July 29, 2003 8:10 PM

If you wanted to have your links underlined with a dotted line, you can do the same thing, but instead set your link decoration to none and apply these dotted rules to the A tag.

Adam Kalsey
July 29, 2003 8:12 PM

To add another background, you'd have to nest two divs. One for the background and one for the border. Once CSS3 is widely available, though, you'll be able to do multiple backgrounds on a single div.

Jesper
August 5, 2003 8:48 AM

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

Joaquin Menchaca
August 23, 2003 6:33 AM

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...

Trackback from Blog-Fu
September 2, 2003 7:59 AM

CSS Dotted Borders in IE

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...

malyssa
September 30, 2003 7:31 PM

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.

Trackback from Chatter
October 3, 2003 12:58 PM

IE .hack

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

Trackback from News
October 31, 2003 2:02 AM

Dotted Lines in IE

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....

David
December 4, 2003 5:46 PM

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_?

Trackback from or die();
December 16, 2003 2:43 AM

Persoalan "Dotted" di IE

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...

Trackback from TOXICO
July 27, 2004 5:17 PM

border-[top|right|bottom|left]: 1px dotted; en IE

Excerpt: Si veis mi pgina desde IE, y os fijais en los acrnimos o en los bloques de texto citado, vereis que el borde inferior de los primeros, y el superior del prrafo fuente de los ltimos se ve punteado y no rallado. Para ello uso dos reglas, una gener...

Snib
March 26, 2005 9:51 AM

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

pieroxy
April 4, 2005 7:06 AM

"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; }

Tom
June 29, 2005 8:02 AM

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

David
July 15, 2005 4:58 AM

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

steve
October 12, 2005 11:13 AM

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.

Sapphire
January 6, 2006 7:50 PM

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.

becca
January 9, 2006 8:10 AM

terrible no borders

Kramer
January 10, 2006 10:00 PM

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.

trevor
February 7, 2006 8:57 PM

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.

fernando
March 8, 2006 12:01 PM

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

Sean Sands
March 21, 2006 8:46 AM

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?

Burungserindik
April 12, 2006 7:26 AM

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

Emo
April 20, 2006 8:37 AM

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

Adam Kalsey
April 20, 2006 10:22 AM

Emo: Sure looks that way.

Mar
June 8, 2006 2:01 PM

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

Bryan Chalker
June 30, 2006 1:15 PM

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.

Chris
July 13, 2006 7:16 PM

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.

Toya
July 17, 2006 4:34 PM

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.

chris (another one)
August 7, 2006 12:55 AM

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?

Ben
August 17, 2006 5:08 AM

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.

Ignoramus
April 5, 2007 9:31 AM

IE 7 draws dotted borders around .

Ignoramus
April 5, 2007 9:32 AM

... table elements, that is.

Jurg
April 11, 2007 8:08 AM

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.

Abu Aaminah
April 27, 2007 4:41 AM

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

Nick
May 2, 2007 10:33 AM

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

lasiman
June 25, 2007 1:59 AM

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..

Robert Nikolic
July 12, 2007 7:21 AM

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

biturls
December 6, 2007 1:10 AM

Very useful information. Thanks !

Tib
March 10, 2008 9:49 AM

This solved my pesky little problem. Thanks!

Oren
April 11, 2008 5:39 AM

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

Tom
April 15, 2008 4:49 AM

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

newbie
April 16, 2008 12:52 AM

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

mister_L
June 1, 2008 12:22 PM

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

Beertje
June 23, 2008 7:33 AM

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

Mario
January 22, 2009 4:27 AM

Thank You lasiman. i was looking 4 this code

Keelio
April 19, 2010 4:09 AM

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

muhammad
July 30, 2010 6:55 AM

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

Gutschein
September 21, 2010 9:43 AM

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!

Gutschein
September 21, 2010 10:49 AM

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

Your comments:

Text only, no HTML. URLs will automatically be converted to links. Your email address is required, but it will not be displayed on the site.

Name:

Not your company or your SEO link. Comments without a real name will be deleted as spam.

Email: (not displayed)

If you don't feel comfortable giving me your real email address, don't expect me to feel comfortable publishing your comment.

Website (optional):

Follow me on Twitter

Best Of

  • How not to apply for a job Applying for a job isn't that hard, but it does take some minimal effort and common sense.
  • Simplified Form Errors One of the most frustrating experiences on the Web is filling out forms. When mistakes are made, the user is often left guessing what they need to correct. We've taken an approach that shows the user in no uncertain terms what needs to be fixed.
  • The best of 2006 I wrote a lot of drivel in 2006. Here's the things that are less crappy than the rest.
  • Rounded corners in CSS There lots of ways to create rounded corners with CSS, but they always require lots of complex HTML and CSS. This is simpler.
  • Debunking predictions Read/Write Web's authors have some goofy predictions.
  • More of the best »

Recently Read

Get More

Subscribe | Archives

Recently

Physical camera shutter for Cisco Spark Board (Jul 6)
A 3d printable design for a camera shutter for a Cisco Spark Board
My Travel Coffee Setup (Jan 20)
What my travel coffee brewing setup looks like, and how you can build your own for under $100.
Turkey Legs (May 30)
Product naming gone awry.
Speaking for Geeks: Your Slides (Dec 17)
Tips and tricks for creating great slides.
Speaking for Geeks: Writing Your Talk (Dec 14)
Don’t wait until the night before the talk to write it. Crazy, I know.
Speaking for Geeks: Tell a Story (Dec 13)
Telling a story keeps your presentation focused, keeps your audience interested, and makes it easier for you to remember your talk.
Speaking for Geeks: Where to speak (Dec 11)
You've got a great idea for a talk. How do you find conferences to submit it to?
Speaking for Geeks: Getting your session accepted (Dec 10)
Your conference speaking submissions are not getting accepted because they're bad. Here's how to make them better.

Subscribe to this site's feed.

Elsewhere

Tropo
Voice and communications platforms, including Tropo and Phono. Work.
SacStarts
The Sacramento technology startup community.
Pinewood Freak
Pinewood Derby tips and tricks

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

AIM or Skype: akalsey

Resume

PGP Key

©1999-2017 Adam Kalsey.
Content management by Movable Type.