Forums

How to Remove Underline

  • # January 20, 2013 at 8:43 pm

    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!

    # January 20, 2013 at 8:48 pm

    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)

    # January 20, 2013 at 9:00 pm

    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?

    # January 20, 2013 at 9:24 pm

    add this:

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

    # January 20, 2013 at 9:31 pm

    Thank you muchly, @defogge.

    # December 28, 2016 at 2:56 pm

    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!

    # December 28, 2016 at 4:12 pm

    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…

    # December 29, 2016 at 2:27 pm

    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!

    # December 29, 2016 at 3:17 pm

    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.

    # January 17, 2017 at 7:42 pm

    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)

You must be logged in to reply to this topic.

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag