Linked images underlined in firefox

[DaveS]

Please help, this is doing my head in!

In Firefox some images which are links are displaying a blue underline link, like linked text..

here..

http://www.tonedeafmusic.co.uk/shop/...=index&cPath=1

and here...

http://www.tonedeafmusic.co.uk/shop/...&products_id=1

After reading some good advice in another thread I added

img {display: block;}

which fixed the problem... no more underlines.. only problem is, now the images are no longer

display: inline

so they are left aligned and have a line break after them.

I'm guessing there is no css solution to this, as it seems to be a problem with the html on the page. The generated html reads....

<a href="http://www.tonedeafmusic.co.uk/shop/index.php?main_page=index&amp;cPath=1_9"><img src="images/pitch-pipe.jpg" alt="Other Accessories" title=" Other Accessories " height="150" width="200"><br>Other Accessories</a></div>

I think it should read...

<a href="http://www.tonedeafmusic.co.uk/shop/index.php?main_page=index&amp;cPath=1_9"><img src="images/pitch-pipe.jpg" alt="Other Accessories" title=" Other Accessories " height="150" width="200"></a><a href="http://www.tonedeafmusic.co.uk/shop/index.php?main_page=index&amp;cPath=1_9">
<br>Other Accessories</a></div>

ie. 2 sets of 'a' tags, one for the image one for the text

But where do I go to make it generate it like this? php is beyond me!

Thanks in advance to anyone who can sort this!

[DaveS]

Just to make the html example a little clearer I will post it again but remove the filenames and other junk...

The generated page reads...

 <a href="page link"><img src="image.jpg"><br>Other Accessories</a>

Whereas I think it should read...

<a href="page link"><img src="image.jpg"></a><br>
<a href="page link">Other Accessories</a>

Maybe without the <br>, not sure on that bit.

Hope that reads easier!

[CIPFriction.com]

I'm having the exact same problem, I tried the display:block property, this solves the underline under the image but now displays the page incorrectly (images far left and links centered no longer under the images)

I've been looking into this problem all morning all over google and it seems to be a problem lots of people are having, does anyone here have a fix?

Thanks!

[CIPFriction.com]

I GOT IT !!

Insert this in your stylesheet.css :

a img {
    border: none;
    vertical-align: middle;
}

The important part is the vertical-align statement, which "drops down" the image a bit from what I've read to probably disassociate the image from the link in Firefox, anyways it works!

Tried in both Firefox 3.0 and Internet Explorer 7.0 and works/displays perfect for me without that annoying underline in FF!

Let me know how it turns out on your side!

David