459168 - broken up box in web page, css rendering issue

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Vinh Le]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.0.3) Gecko/2008092414 Firefox/3.0.3
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.0.3) Gecko/2008092414 Firefox/3.0.3

The css rendering of the <li> tag breaks it up into several random rectangles. The specific area that breaks up varies randomly upon refreshing. The xhtml/css is the same every time. 

Reproducible: Sometimes

Steps to Reproduce:
1. Go to the URL.
2. Stare at the bottom of the page, in the footer area where it says recent posts.
3. If you don't see the issue, then keep refreshing. It will pop up randomly and in different spots.
Actual Results:  
The css rendering of the <li> tag breaks up into several rectangles. The specific tag that breaks up varies randomly upon refreshing. The xhtml/css code is the same every time though. 

Expected Results:  
The <li> tag should not be broken up and look like the other <li> tags.

Problem only exists in firefox 3. Yes, it works fine in IE 6+, safari, etc. I have used browsershots.org to confirm this as well as asking several other web designers/developers to take a look at the site. We are all clueless.

Link to screenshot of problem: http://blogdesignblog.com/downloads/firefox3.png

One last note: The bug only appears on maybe 1 or 2 pages out of every 10 pages. Yes, it is that random. The only thing I could think up is that it gets rendered slightly different for some reason on these pages, but I can't pinpoint why that is.

Comment 1

[philippe (part-time)]

Have you tried validating your HTML ?
http://validator.w3.org/

There are quite a few errors, for example, this is the structure of your list:
<li>
  <a>
    <div>
A <div>, block-level element, can't be contained within a <a>, inline element.

I think this bug should be invalid.

Comment 2

[Vinh Le]

No, I made the mistake of not running it into a validator. Thanks for pointing me in that direction.

I see your point about not putting a block-level element inside an inline element. I will reconsider my options, but the rendering is still interesting. It is so inconsistent.

I am curious if anyone else has a take on this?