SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Apr 2004
    Location
    dublin
    Posts
    2,036
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dotted Underline

    Hi all,

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

    Thanks.

    Kevin.

  2. #2
    SitePoint Zealot Volt's Avatar
    Join Date
    Aug 2005
    Location
    Toronto Canada
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
     .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/
    Content Slave



  3. #3
    SitePoint Member dpsites's Avatar
    Join Date
    Nov 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Non-Member
    Join Date
    Mar 2005
    Location
    Bangkok
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Non-Member
    Join Date
    Mar 2005
    Location
    Bangkok
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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".

  6. #6
    SitePoint Wizard bronze trophy hooperman's Avatar
    Join Date
    Jan 2006
    Location
    Manchester, UK
    Posts
    4,301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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.
    I like this technique! If you want an example, look at Shaun Inman's site
    here . Very nice.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •