SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: a:hover problem

  1. #1
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Rome
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a:hover problem

    Hello

    I have this css to apply a border up/bottom when I click on a link

    Code:
    a:hover {
    
       text-decoration: none;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #B22222;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #B22222;
    	background-color: #FFFACD;
    	
    
    }

    The problem is that this applies also to link images.
    How to avoid that this will be applied to images links (if a solution exists) ?

    Thank you!

  2. #2
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Create a seperate class for image links

    Code:
    .imagelink
    {
        border: 0;
    }
    And add that class to each link that has an image within the tag

    Code:
    <a class="imagelink"><img src="" alt="" /></a>

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    a:hover img {border:0}

  4. #4
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Rome
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dr John View Post
    a:hover img {border:0}
    Thank you

    But how to enter your css code on a style.css file ?

    I entered it in this way but does not work

    Code:
    a:hover img 
    {
    border: 0;
    }

  5. #5
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dr John View Post
    a:hover img {border:0}
    While this removes the border from the image, it doesn not remove the border from the <a> tag

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Ruben said the border is on the anchor and the only (reliable) way to remove a border from the anchor is by addressing the anchor. Which means you will have to add a class to the anchors where you don't want borders.

    The anchor doesn't care what content it has inside (whether its text or an image) and will apply the border as dictated by the css.

    There are some tricks which are unreliable cross browser but if the image is bigger than the line-height and the anchor has no padding and isn't display:block then you can use something like this:

    Code:
    a img{border:none;vertical-align:bottom}
    This just hides the border by putting the image on top but it only works if the situation is as I described above (and only works in some browsers).

    The correct method is to address the anchor that holds the image by applying a class that removes the border.

  7. #7
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Rome
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for great explanation.

  8. #8
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Rome
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ruben K. View Post
    Create a seperate class for image links

    Code:
    .imagelink
    {
        border: 0;
    }
    And add that class to each link that has an image within the tag

    Code:
    <a class="imagelink"><img src="" alt="" /></a>

    Alos this solution does not work ....
    I continue to see borders top and bottom when I go over an image link.

    Any idea ? Thanks

  9. #9
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Which browser?

    In IE6 I have found I have needed to add the border attribute to each of the pseudo-classes for it to respond correctly ...

    Code:
    A.imgLink:link {
        border: 0;
    }
    A.imgLink:visited {
        border: 0;
    }
    A.imgLink:active {
        border: 0;
    }
    A.imgLink:hover {
        border: 0;
    }
    Ian Anderson
    www.siteguru.co.uk

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you have given more weight to the original declarations then you need to make sure you have over-ridden it.

    Code:
    a.imagelink
    {
        border:none!important;
    }

  11. #11
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Rome
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you

  12. #12
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    What's the definition of having given more weight?

    If all the declarations are in the same CSS file, how is weight determined?
    Ian Anderson
    www.siteguru.co.uk

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If all the declarations are in the same CSS file, how is weight determined?
    A weight is added to selectors depending on certain criteria. If you make an element more specific then it will carry more weight due to the process above.

    e.g

    .imagelink {color:red}

    will be over-ruled by a.imagelink {color:green} because it is more specific.

    however:

    p#test a{color:blue}

    (e.g. <p id="test"><a class="imagelink" href="#">text</a></p>)

    will over-rule a.imagelink {color:green} because IDs carry more weight and is therefore more specific that the previous style.

    If the rules have exactly the same weight then those that appear later in the stylesheet will win out (unless user styles have been defined using !important).

    !important over-rules other rules not using !important. If they both have !important then the previous specificity rules determine the winner (except that user stylesheets using !important will take precedence).

    The full details can be found here but will take some reading

    http://www.w3.org/TR/CSS21/cascade.html#specificity

  14. #14
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanation. I'll save reading that link until I'm suffering from insomnia.
    Ian Anderson
    www.siteguru.co.uk


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
  •