Dotted Underline

[obrienkev]

Hi all,

How do I create a dotted underline for text using CSS?

Thanks.

Kevin.

[Volt]

I'm not sure if you want all text to have an underline, or maybe specific text with a class. Keep in mind though that internet explorer fails to render the dotted border properly, so it ends up looking dashed.

 .dotline {border-bottom: 1px dotted #000}

(The above doesn't render correctly in IE)

Check out this tutorial for a CSS background hack to get dotted borders in IE.

http://kalsey.com/2003/07/css_dotted_borders_in_ie/

[dpsites]

Volt is right, You will need to use a "border-bottom" element, However, you may need to play with the "padding-bottom" element aswell to make it look like an underline and not a border.

Good look.

Dan

[andrew-bkk]

Use a graphic with a height of 1px and a width of 2px. One of the pixels is black; the other is the same colour as the background on which the text (link) sits.

Use something like this:

Padding-bottom: 2px;
background: url(bg-underline.gif) repeat-y bottom

Providing the text (link) doesn't wrap from one line to the next, it should work properly in IE.

I submitted a design to CSS Zen Garden a while ago called "Mozart" and toyed around with this idea quite a lot (although in the end I didn't use it).

More decently I submitted another design on which I have used exactly this technique for the links in footer division. It seems to work well.

If you want to contact by email on andrew_brundle2003@yahoo.co.uk, I'll send you a link to the design.

[andrew-bkk]

I've obviously got too much time on my hands today! This is the first time in ages that I've "posted" to one of these little internet forums.

The "repeat-y" in my last post should have been "repeat-x".

[hooperman]

Use a graphic with a height of 1px and a width of 2px. One of the pixels is black; the other is the same colour as the background on which the text (link) sits.

I like this technique! If you want an example, look at Shaun Inman's site
here . Very nice.