SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question why won't my text decoration go away?

    Here is the [abbreviated] HTML:

    <div class="navigation">
    <li><a href="index.html">Home</a></li>
    </div> <!-- close navigation div-->

    Here's the CSS:

    .navigation {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    text-decoration: none; /*is not working */
    background-color: pink; /*just to show its box */
    }


    when I try "line-through" for the text decoration value, it does that, but when I try "none", the underlining does not go away.

    What am I doing/not doing?

    Thanks!

    Polly

  2. #2
    SitePoint Member
    Join Date
    Jan 2009
    Location
    BC Canada
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can I see your whole CSS file? I suspect that lower down in your CSS file is something else that is over-writing the rule above it...

  3. #3
    SitePoint Member
    Join Date
    Nov 2008
    Location
    Bristol, UK
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As zombieguy said, it's probably something else cascading down. The most specific rule is implemented, so you could add a new CSS rule:
    .navigation a
    {
    text-decoration:none;
    }
    That should sort it.
    Also, you should really put your <li> element within an <ul> element.
    Last edited by Narshada; Jan 21, 2009 at 15:58. Reason: better explanation

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was my css file! [g!] I'm learning as I go along in Lloyd's book.

    I copied Narshada's text decoration line into my text, and it worked!

    I had a space between the colon and "none", and Narshada didn't.

    Narshada, if I use "ul" I get bullets, and I don't want those. And what is the "a" in your suggestion?

    I really am a beginner.

    Thanks both for answering!

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    A is the link tag, as in <a href="somepage.htm">somewhere.htm</a>

    You can remove the bullets in a menu list by including
    #navigation ul {
    list-style-type:none;
    }

    To make the removal of underlining very specific to the nav section, you'd have
    #navigation ul li a {
    text-decoration:none;
    }

    (I tend to have an id rather than a class as there is usually only one menu on the page)
    Obviously you'd have more styles than just those given for these definitions of course...

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi

    text-decoration only applies to elements that have text inside of it directly (I assume). .navigation doesn't seem like an appropriate name for that as it is usually an unordered list.
    That's why it won't work.

    Cheers.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, were going to have to see the full CSS document. This way we can see what's really going on inside the page. Except part's of it.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  8. #8
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    Yeah, were going to have to see the full CSS document. This way we can see what's really going on inside the page. Except part's of it.
    Though it's more common to have one instance of a navigation element, which should indicate the use of an ID, not a class ( let's avoid classitus - before your edit ).
    Cross browser css bugs

    Dan Schulz you will be missed

  9. #9
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    Though it's more common to have one instance of a navigation element, which should indicate the use of an ID, not a class ( let's avoid classitus - before your edit ).
    His code is a class. ^
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  10. #10
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    His code is a class. ^
    Yeah, I meant to direct it toward him.. beh.
    Cross browser css bugs

    Dan Schulz you will be missed

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pellerbe View Post
    when I try "line-through" for the text decoration value, it does that, but when I try "none", the underlining does not go away.
    The reason is that all browsers (to my knowledge) declares text-decoration:underline for links in their user agent style sheet. And the text-decoration is not inherited (although it applies to descendant boxes too).

    In other words, there's a rule like this one in the browser's built-in style sheet,
    Code CSS:
    a:link, a:visited {text-decoration:underline}
    According to the rules of the cascade, you'll have to override that with a rule that applies to the same elements, e.g.,
    Code CSS:
    .navigation a {text-decoration:none}

    The line-through decoration applies because text-decoration is applied to all descendant boxes (the li's and the a's, for instance). And text decorations are additive; you can specify more than one text decoration for an element.
    Birnam wood is come to Dunsinane

  12. #12
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    So the browser is changing my CSS rules on me!

    Makes perfect sense; thanks a lot!

    Polly

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pellerbe View Post
    So the browser is changing my CSS rules on me!
    LOL

    It's more a question of you not shouting loud enough to override its built-in rules.
    Birnam wood is come to Dunsinane

  14. #14
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll make sure to yell louder next time!

    In all seriousness, particularly that now I know browsers can do that.

    Thanks!

    Polly


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
  •