Firefox underlining images
Someone help me out before I go crazy.
Why is firefox underlining the image in this example?
Here is a screenshot (in case you’re not using firefox) - the above link looks like this in firefox:
The code on that page is simply:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 type="text/css">
<!--
a img {
text-decoration: none;
border: none;
}
-->
</style>
</head>
<body>
<a href="#"><img src="gecko.gif" alt="gecko" /> Test</a><br />
<a href="#"><img src="gecko.gif" alt="gecko" /></a> <a href="#">Test</a>
</body>
</html>
I thought it might be a doctype issue - but changing it doesn’t seem to make a difference.
Added after: Just to make this even more mysterious… This DOES NOT create that line:
<a href="#"><img src="gecko.gif" alt="gecko" /> </a>
It doesn’t show up until we add a *character* within the <a> tag that the underline pops up…(I’ve updated the example to show this…)
Updated 3/30/07 Shaun wins the prize for finding the solution!:a img {
display:block;
border: none;
float: left;
}
The example has been updated…
February 22nd, 2007 at 4:53 pm
heres what u gotta do, when u add a character have another link for it (that way you’ll have two links, one for the image and one for the text) and when u have it for the image sure there are no spaces
February 22nd, 2007 at 5:06 pm
That’s what I’m doing in the second example (when it *doesn’t* show up. But with the idea of wanting to simplify things, I wanted to keep it as one anchor tag. (And actually spaces don’t matter - it’s adding a character that causes the problem). When I discovered the problem, I was creating a page where these links that may change on a regular basis… and while it’s only two links each time… imagine that x50 links or so… it really becomes a pain for something that just doesn’t make any sense.
February 26th, 2007 at 10:15 am
This might be a useful trick, depending on how you plan to use it.
On the assumptions that this is some sort of menu with a certain number of link images that are reused, and the link icon (and its alt-text) are not crucial content, it might be easier to display the images with css and then only have to change each link once.
For example:
a.geckolink {
line-height: 36px;
padding-left: 36px;
padding-top: 20px;
background: transparent url(gecko.gif) no-repeat center left;
}
and then:
Test
This shows up properly in FF and IE, although it can get a bit hacky if you’re using differently sized or large images, and can cause display problems in FF with decreased display font sizes. It does also allow you to easily create new links with the same image, if that’s your intent.
Hope that helps.
March 23rd, 2007 at 10:21 pm
There is no pretty way to do this.
A little better than creating double the links would be setting the “text-decoration: none;” for all links, not just the “a img” like you have above. Set a span to underline text and then mark up your link text with that.
It saves you from changing out the url x2 for each instance like in your 2nd example and comment.
This method also gets rid of the ugly underline butting up against your image in IE that gets created when it also underlines the space preceding your nonspace text of the link.
The only down side of this is that you have to wrap all plain old regular link text in that span even on links you aren’t using the picture… unless you wanted set classes for your links that didn’t have images + text. Like I said, it’s probably just a little bit cleaner than making pictures and text each their own links…
March 29th, 2007 at 7:08 am
a img {
display:block;
border: none;
float: left;
}
October 10th, 2007 at 6:19 pm
Now try putting two links side by side with
a img {
display:block;
border: none;
float: left;
}
See in FireFox how the icon floats below the first icon? Looking for another solution for this type of scenario
March 4th, 2008 at 11:32 pm
Give the anchor tag a padding to the left.
Set the background of the anchor tag to the image required, eg
a.example{background: transparent url(gecko_icon.gif) no-repeat scroll left}
March 5th, 2008 at 9:09 am
Had to add a little more stuff to get it right - but that works - here’s what I added:
a.gecko {
background: transparent url(gecko.gif) no-repeat left top;
padding: 0 0 0 38px;
display: block;
height: 32px;
line-height: 32px;
}
(the gecko image is 32px x 32px)
(I’ve updated the example to include and show this)