...

View Full Version : Hyperlink Borders



mark87
06-03-2005, 11:54 PM
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.

Tricia
06-03-2005, 11:56 PM
Try


a img {
border: none;
}

mark87
06-03-2005, 11:58 PM
Nope, tried things like that and still there... Thanks anyway.

_Aerospace_Eng_
06-04-2005, 12:07 AM
Got code? or Link? The link would be better.

mark87
06-04-2005, 12:15 AM
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...) -



<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 -



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;
}

_Aerospace_Eng_
06-04-2005, 12:35 AM
add this to your css

.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.

mark87
06-04-2005, 01:26 AM
Thanks alot, thought it would be something like that but couldn't figure it out lol, thanks. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum