Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hyperlink Borders

    I've made all hyperlinks have a bottom border like so -

    a:link { color:#666; border-bottom: 1px dashed #666 }

    Trouble is the border is also forming on images which are hyperlinks, how can I stop that happening? Don't really want to resort to writing different classes for links.

  • #2
    New Coder
    Join Date
    Feb 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try
    Code:
    a img {
    	border: none;
    	}

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope, tried things like that and still there... Thanks anyway.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Got code? or Link? The link would be better.

  • #5
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry don't really have a link atm... here's the html though (it's an image gallery thing like I was asking about earlier...) -

    PHP Code:
    <div id="thumbwrap">
    <
    div id="thmargin">

    <
    div class="thumbnail">
    <
    a href="arrival.html">
    <
    img src="images/image.gif" 
    alt="" width="100" height="100"></a><br>
    ITEM
    </div>

    <
    div class="thumbnail">
    <
    a href="arrival.html">
    <
    img src="images/image.gif" 
    alt="" width="100" height="100"></a><br>
    ITEM
    </div>

    <
    div class="thumbnail">
    <
    a href="arrival.html">
    <
    img src="images/image.gif" 
    alt="" width="100" height="100"></a><br>
    ITEM
    </div>

    <
    div class="thumbnail">
    <
    a href="arrival.html">
    <
    img src="images/image.gif" 
    alt="" width="100" height="100"></a><br>
    ITEM
    <br class="clearboth">
    </
    div>

    <
    div class="thumbnail">
    <
    a href="arrival.html">
    <
    img src="images/image.gif" 
    alt="" width="100" height="100"></a><br>
    ITEM
    </div>

    </
    div>
    </
    div
    And the CSS for that part -

    Code:
    a { text-decoration: none; }
    
    a:link    { color:#666; border-bottom: 1px dashed #666 }
    a:visited { color:#666; border-bottom: 1px dashed #666 }
    a:active  { color:#666; border-bottom: 1px dashed #666 }
    a:hover   { color:#FF6600; border-bottom: 1px solid #FF6600 }
    
    .thumbnail
    {
    float: left;
    width: 100px;
    margin: 0 10px 10px 0;
    padding: 5px;
    text-align: center;
    border: 1px solid #EFEFEF
    }
    
    .clearboth { clear: both }
    
    #thumbwrap { 
    width: 500px;
    margin: 30px auto 30px auto;
    }
    
    #thmargin { margin-left: 10px }
    
    .thumbnail img { 
    border: none;
    margin-bottom: 2px;
    }

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    add this to your css
    Code:
    .thumbnail a, .thumbnail a:link, .thumbnail a:visited, .thumbnail a:hover, .thumbnail a:active {
    border:0;
    }
    They all have to be specified or the ones you have set for normal links will take precedence.

  • #7
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks alot, thought it would be something like that but couldn't figure it out lol, thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •