Linked Image Border

**fLUx1337** · Sep 12, 2007 10:22

Hey,

I'm having some trouble with a image link in my wordpress blog, heres the html/css, just pop it into a file and view it, you will understand what I mean:

Code HTML4Strict:

<style>
body{
  color:#000000;
  font-family:Verdana;
  font-size:0.6em;
}
 
.entry a{
color:#15A1DC;
border-bottom:1px dashed #6CC509;
text-decoration:none;
font-weight:bold;
}
 
.entry a:hover{
color:#fff;
background:#15A1DC;
text-decoration:none;
font-weight:bold;
border-bottom:0px;
}
 
.entry a img{
border:none;
}
</style>
 
 
<div class="entry">
<p>blah blah blah  <a href="http://google.com">test</a> blah blah blah</p>
<p><a href="http://google.com"><img src="http://i2.sitepoint.com/graphics/flipbook.jpg" title="test" alt="&nbsp;" /></a></p>
</div>

...when you hover over the image, the dashed green border goes away (due to ".entry a:hover"), but all border:none; on .entry a img does is remove the #15A1DC border (well, its acctully the background).

Anyone know how I could remove the green dashed border under the image?

Cheers in advance!

fLUx

P.s. I understand this works...

.blah a{
border:none;
}

... but surely their is a way to do it without diving into Wordpress's insides to add "<div class="blah">...</div>" where it turns the WYSIWYG image into the html?

**Paul O'B** · Sep 12, 2007 11:33

Hi,

When you tell an anchor to have a dotted underline it gets a dotted underline. Selectors aren't physic and won't suddenly not underline an anchor just because it contains an image.

Remember that the image is inside the anchor and the styling is on the anchor, so therefore addressing the image has no effect on the anchors styles. It may as well be just a different word as far as the selector goes.

You will need to apply a class to the anchor or the p wrapper to do this properly.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body{
  color:#000000;
  font-family:Verdana;
  font-size:0.6em;
}
 
.entry a{
color:#15A1DC;
border-bottom:1px dashed #6CC509;
text-decoration:none;
}
 
.entry a:hover{
color:#fff;
background:#15A1DC;
border-bottom:0px;
}
 
.entry a img{
border:none;
}
.fbook a,.fbook a:hover{border:none;background:#fff}
</style>
</head>
<body>
<div class="entry">
    <p>blah blah blah <a href="http://google.com">test</a> blah blah blah</p>
    <p class="fbook"><a href="http://google.com"><img src="http://i2.sitepoint.com/graphics/flipbook.jpg" title="test" alt="" /></a></p>
</div>
</body>
</html>

Now having said all that above - there actually may be an easy fix in some cases and you can try this first but it depends on what else is going on in your layout. Just set the image to display:block or float:left.

Code:

.entry a img{
border:none;
display:block
}

That should make the image hide the border but it does depend on how your layout is structured.

**fLUx1337** · Sep 13, 2007 02:10

Originally Posted by Paul O'B

Code:

.entry a img{
border:none;
display:block
}

That should make the image hide the border but it does depend on how your layout is structured.

That worked....thanks!

So stupidly simple....

User Tag List

Thread: Linked Image Border

Thread Tools

Display

Linked Image Border

Bookmarks

Bookmarks

Posting Permissions