SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you override a css property

    Hello All:

    I have a page where I have a thin img border around my images. However, being they are linked, the border is taking on the hover property so the border turns red when you hover and purple when you visited.

    I tried creating a class with this snip here but it is just putting the border around that original one.

    a.pokerchips:hover, a.pokerchips:link, a.pokerchips:visited {
    border-style:solid;
    border-color:black;
    border-width:1px;
    }


    Is there something I can do to make this work and not take out the property that is causing this?

    Thanks,

    Paul
    ********
    Regards,

    P

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're only specifying the border for the link, not for the image. Try this,
    Code CSS:
    a.pokerchips:link img, a.pokerchips:visited img {
      border-color:black;
    }
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    You're only specifying the border for the link, not for the image. Try this,
    Code CSS:
    a.pokerchips:link img, a.pokerchips:visited img {
      border-color:black;
    }

    Whoo Hoooo.....

    Worked just like you said!!!! Thanks for your help with that I would have never figured it out.

    a.pokerchips:link img, a.pokerchips:visited img, a.pokerchips:hover img {
    border-style:solid;
    border-color:black;
    border-width:1px;
    }
    ********
    Regards,

    P

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm glad it solved your problem!

    You can combine those three declarations into one, using the border shorthand property:
    Code CSS:
    a.pokerchips:link img, a.pokerchips:visited img, a.pokerchips:hover img {
      border:1px solid black;
    }
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, I know. I guess I am just old school. Plus I have this huge css file that way so I am not going to start in the middle with shorthand.

    Thank again for your help,

    Paul
    ********
    Regards,

    P

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay. I just thought I'd mention it in case you weren't aware. No offence meant in any way.
    Birnam wood is come to Dunsinane


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
  •