Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to Remove Underline

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #42142
    mintertweed
    Participant

    I have an issue. Here is the CodePen. I have an “h1” as the title of my page. I added an underline to “a” and I had to systematically remove it from everything I did not want a underline on. But I can’t seem to figure out how to get rid of it for the “h1.” I used text-decoration: none, but it seems to do nothing. Also, the underline is repeating itself four times over because I have a text-shadow on my “h1” as well. How do I get rid of it? Thank you in advance!

    #121656
    uneart
    Member

    The problem is that you did not give the underline to the h1 element but instead to the parent a element. So to remove that underline you would have to give the a tag text-decoration:none; not the h1. [Like this](http://codepen.io/uneart/pen/bDtnC)

    #121657
    mintertweed
    Participant

    But that removes the underline from all links. I want my links to have an underline if they are anything but the header area. How do I accomplish this?

    #121663
    dfogge
    Participant

    add this:

    `#logo{
    text-decoration: none;
    }`

    #121666
    mintertweed
    Participant

    Thank you muchly, @defogge.

    #249405
    pnichols
    Participant

    I am having the exact same problem—being unable to remove a link underline, and have been unable to resolve it with text-decoration: none.

    I’ve also got some weird spacing and inconsistent hover coloring going on as well.

    I am a neophyte and am probably doing something blatantly wrong and am jut to clueless to see it. The link below will show you the css if you don’t mind checking the resources.

    http://www.paulanichols.com/pn-email

    Thanks!

    #249406
    Shikkediel
    Participant

    Looks like what uneart mentioned in his reply should work. So targeting the a itself. I’m not seeing any of the other issues you mentioned.

    I’d advise against putting your e-mail address there in plain text by the way, lots of bots around scanning for that. You’ll just end up being on spam lists…

    #249456
    pnichols
    Participant

    So are you saying this configuration should work?

    a {
    style=”color: #3EBDA7;
    font-family: lato;
    font-size: 12pt;
    font-style: normal;
    font-weight: 200;
    line-height: 18pt;
    text-align: left;
    text-decoration: none;
    text-shadow: 0px 0px #3EBDA7;
    }

    I am still doing it incorrectly, as nothing has changed.
    Regarding the other issues of color spacing and font size, I have enclosed a sample of what it is supposed to look like in the link so the two can be compared.
    http://www.paulanichols.com/pn-email

    Thank you so much for your help btw!

    #249459
    Atelierbram
    Participant

    In your example these inline-styles are set on the parent td-element, but those styles will only apply to the styles of that td itself: it is not “hitting” the child a element, so browsers-default styles are being applied, hence the underlining. BTW, one doesn’t need a table for such a thing.

    http://codepen.io/atelierbram/pen/XNvBdj

    #250142
    pnichols
    Participant

    This is extremely helpful, thank you!!

    The only problem I encountered was when trying to rewrite this as an inline style. I am too ignorant to know how to handle some of the more sophisticated coding like multiple classes or id’s. If I am using the correct terminology.

    I have had a very difficult time finding any instruction on anything more than the most simplistic inline styling.

    Here is the link again: http://www.paulanichols.com/pn-email?Preview=True

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.