SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dotted underline link missing in IE but not Firefox

    This is the watch-while-I-pull-my-hair-out post. Have dotted underline class in my external css file which applies only to certain links. So in the "a" tag I call that class. Everywhere in the page it works perfectly except in the navigation at the top. The same code that works anywhere else (page proper and footer) fails in the navigation. In Firefox it works perfectly but in IE not.
    If it failed consistently I would have a way to sort it but... phew!
    Any thoughts would help at this stage. Code below:
    a.dashLink:link { color: #696969; text-decoration: none; border-style: none none dotted none; border-bottom-width: 1px; }
    a.dashLink:active { color: #696969; text-decoration: none; border-style: none none dotted none; border-bottom-width: 1px;}
    a.dashLink:visited { color: #696969; text-decoration: none; border-style: none none dotted none; border-bottom-width: 1px;}
    a.dashLink:hover { color: #C60000; text-decoration: none; border-style: none none dotted none; border-bottom-width: 1px;}

  2. #2
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is possible that your "a" declarations are overwritten but is impossible to be sure if I don't see the whole css style.

    BTW, usually the order in which "a" pseudo-classes are declared is:
    link, visited, active, hover

  3. #3
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK here is all the code that relates to links:
    a.blue:link { color: #7192B3; text-decoration: none; border-style: none none dotted none; border-bottom-width: 1px;}
    a.blue:visited { color: #7192B3; text-decoration: none }
    a.blue:active { color: #7192B3; text-decoration: none }
    a.blue:hover { color: #55779A; text-decoration: none }

    a.grey:link { color: #777777; text-decoration: none; border-style: none none none none; border-bottom-width: 1px; }
    a.grey:visited { color: #777777; text-decoration: none; border-style: none none none none; border-bottom-width: 1px;}
    a.grey:active { color: #777777; text-decoration: none; }
    a.grey:hover { color: #000000; text-decoration: none; border-style: none none none none; border-bottom-width: 1px;}

    a.dashLink:link { color: #696969; text-decoration: none; border-style: none none dotted none; border-bottom-width: 1px; }
    a.dashLink:visited { color: #696969; text-decoration: none; border-style: none none dotted none; border-bottom-width: 1px;}
    a.dashLink:active { color: #696969; text-decoration: none; border-style: none none dotted none; border-bottom-width: 1px;}
    a.dashLink:hover { color: #C60000; text-decoration: none; border-style: none none dotted none; border-bottom-width: 1px;}

    a:link { color: #C60000; text-decoration: none; border-style: none none none none; border-bottom-width: 1px; }
    a:active { color: #C60000; text-decoration: none; }
    a:visited { color: #C60000; text-decoration: none; border-style: none none none none; border-bottom-width: 1px;}
    a:hover { color: #9E0806; text-decoration: none; border-style: none none none none; border-bottom-width: 1px;}

  4. #4
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Found one more thing here

    When I place the link inside a nested table cell it does not show the dotted underline. However, if I put it in the "outer" table it works. Note that the outer table is not the most outside but still nested. Could it be the number of levels of nesting that does this?


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
  •