CSS and Firefox Problem with a list

List problem only happens in Firefox

[sdguy]

I'm putting together a list of products where I want a container with all the product info (image, overview, title) to be clickable and highlight when the user rolls over it. I figured out a way to do it using a list with the following code:

<li>
<a href="example.com"><img src="anyimage.jpg" width="100" height="100">
<h3>Title Here</h3>
<p>Overview Here</p>
</a>
</li>

And then I style the HTML tags:

#sectionContainer #productSection li {
background-color: #f3f3f3;
float: left;
width: 750px;
margin-top: 5px;
}

#sectionContainer #productSection li a {
background-color: #f3f3f3;
padding: 10px;
float: left;
width: 730px;
}

#sectionContainer #productSection li a:hover {
background-color: #DCF2FA;
color: #000;
text-decoration: none;
}

Which all works great in IE, Safari, and Chrome. It even works fine in Firefox (3.6.13) to an extent, but then drops the CSS formatting for the <h3> and <p> tags on, get this, list items in multiples of the number 3 only. So it may drop on #3, #6, #9, #12, etc. It's also not consistent, so when I refresh a bunch of times #9 for example might format properly, and then go back on another refresh.

I'm guessing this is a bug with FireFox, but am hoping someone can point out an error in my code or a suggestions for a better way to do this?

[edited by: alt131 at 1:40 pm (utc) on May 26, 2011]
[edit reason] Thread Tidy - Examplifying overlooked href [/edit]

[rainborick]

I suspect that your HTML is invalid, which is causing Firefox to behave this way. I think your code should look something like:

<li>
<p><a href="example.com"><img src="anyimage.jpg" width="100" height="100">
<span class="h3text">Title Here</span><br>
Overview Here
</a></p>
</li>

[edited by: alt131 at 1:41 pm (utc) on May 26, 2011]
[edit reason] Thread Tidy - Examplifying overlooked href [/edit]

[webprutser]

Just for my learning to understand html/css: I never use <p>, because up to now I mainly use tables for the lay-out and putting text in <td> never urged me to use it. In a list however I don't see the advantages, a class for the header, all right, usefull, but why put the text wrapped up in a <p>? As someone being unfamiliar with the <p> tag, chances are I miss something.

[sdguy]

Thx rainborick, got it working. Didn't need the <p> tag so the only changes were pulling the <h3> and <p> tags, do you think the prob was having a block level element <h3> contained in an <a> tag?

<li>
<a href="example.com"><img src="anyimage.jpg" width="100" height="100">
<span class="h3text">Title Here</span>
<span class="productSectionText">Overview Here</span>
</a>
</li>

[edited by: alt131 at 1:41 pm (utc) on May 26, 2011]
[edit reason] Thread Tidy - Examplifying overlooked href [/edit]