Grow your CSS skills. Land your dream job.

Unable to Override Text Link Decoration

  • # August 24, 2009 at 10:43 am

    I have been so stumped on this one. I cannot figure out how to lose the image link text: decorations specifically on hover for the splash image and playlist entry images below that. Since I am pulling from two external style sheets on this page is this something that should be done inline and if so how? Thank you. The page link is provided below.

    http://www.charlottes-saddlery.com/finaltest2.htm

    # August 24, 2009 at 1:15 pm

    Not sure if this will solve it.
    Firstly – Why is the flash player in a ‘a’ tag?
    Secondly try putting this in the class specific to the thing you want to remove the border from -
    border-bottom: 0px !important; – Can someone else check this please – i have not had to use this code ‘important’ in a while so it might not be correct.

    # August 24, 2009 at 1:42 pm

    Thanx for chiming in on this Al. The <a> tag surrounds the player because of flowplayer config procedures for the type of setup I’m using..
    Someone has since pointed me in the direction of specificity. I guess I’m still not getting it as I have tried the following and it doesn’t work.

    #content #playlist_wrap #pl a:link img, a:visited img, a:hover img, a:active img { text-decoration: none; }

    # August 24, 2009 at 2:14 pm

    I dont think its the text-decoration that is causing it. You have a border-bottom on both the big image and the things under when they are hoverd on.

    Here is your code on screen.css line 16

    a:hover, a:active { border-bottom: 1px solid #990000; }

    that is what is causing the red line to appear, if you remove it, it will not happen.

    # August 24, 2009 at 2:38 pm

    I agree with you there but then I lose my text link format.

    # August 24, 2009 at 2:53 pm

    which links back to what i said on my first reply,
    the main image and the things under it are both ‘a’ tags and so are being ruled by this ‘a:hover, a:active’ but they each have there own class aswell, so the main images class is player.
    so in a.player, put

    Code:
    border-bottom: none !important;

    Also, like i said i havnt used this the important thing in a while so i might be using it the wrong way, you might have to google how to use it.

    # August 24, 2009 at 2:58 pm

    Ok i tested this on your site and it seems to work.
    On
    playlisttwo.css (line 39)
    #pl div.entries a {
    and
    playlisttwo.css (line 3)
    a.player {

    add this code

    Code:
    border-bottom: medium none !important;
    # August 25, 2009 at 8:09 am

    Sorry I’m so late in responding back to you Al. That did it. Thank you very much for your help.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".