link styles across browsers

[4ndr3]

I'm building a page which will list several different items with three items per row and an unknown number of rows. In order to save markup and time (in development) I would like to enclose both an image and a piece of text within the same "a tag".

The problem however, is that Firefox does not do treat this markup like IE, and Opera. The image gets underlined in Firefox but not in the other browsers. The markup looks like this.

the doctype is XHTML 1.0 Transitional

CSS:
.prodListItem{background-color:#fff; border:1px solid #acaaa4; width:217px; padding:13px; margin:0 20px 20px 0; float:left;}
.prodListItem img {border:1px solid #e2e2e2; margin-bottom:40px;}
.prodListItem a {text-decoration:none; color:#474335}
.prodListItem a:hover {text-decoration:underline; color:#09F}

XHTML:
<div class="prodListItem">
<a href="#">
<img src="images/image.jpg" alt="some text" />
<!-- the image has a bottom margin of 20px; so there is space between image and text -->
<br />
Some text here
</a>
<br />
fr. <span class="prodListPrice">5 799,-</span>
</div><!-- end prodListItem -->

Any clues on how to get rid of the underline in FireFox?

[Little_G]

Hi,

Add

display:block

to

.prodListItem img

.

Andrew

[4ndr3]

Great! thanks a lot!