432181 - block-in-inline not parsed correctly, causing CSS selectors to not match

Status: RESOLVED FIXED

(Core :: DOM: HTML Parser, defect)

Description

[Mark Sicignano]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b5) Gecko/2008032620 Firefox/3.0b5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b5) Gecko/2008032620 Firefox/3.0b5

This happened in Firefox 2.0, and I see it's still here in FF 3.0b5.

On this website (http://www.renewalmedspa.com/), there is a vertical menu of services. When you hover over the links in that vertical list, the image should change to the left of that menu, as well as the text on the right. This is being done without javascript (pure CSS hovers)

Often on initial display of the page, one of the items nested images will displayed inline in the list, along with the text block that would be shown on the hover... 

If it doesn't initially, try refreshing (or control refreshing) the page. Again, it's inconsistent. Something to do with the rendering of the page before the whole page is fully downloaded perhaps?  

Reproducible: Sometimes

Steps to Reproduce:
1. Visit the website
2. Sometimes an image appears in the center list. It shouldn't. Image should appear to the left when you hover over items in the list. But on initial page load, image sometimes shows inline, in the list.
3.  F5 or Ctrl+F5 to refresh the page, the bug sometimes appears and other times it will render fine.



I wrote the HTML and the CSS, and while I won't say I'm a guru, I believe it's valid.  But if I'm doing something that is not legit, I'd certainly want to know. Worked fine in IE and Safari though.

Comment 1

[Ria Klaassen (not reading all bugmail)]

Regression range is
http://bonsai.mozilla.org/cvsquery.cgi?module=PhoenixTinderbox&date=explicit&mindate=2005-02-26+05%3A00&maxdate=2005-02-27+07%3A00
Caused by bug 283459 ?

Comment 2

[Ria Klaassen (not reading all bugmail)]

The problem is only about the "laser facials" image, BTW.

Comment 3

[Mats Palmgren (inactive)]

The markup for the items basically looks like this:

<li><a href="services.html#massage">massage
        <div class="popup"><img></div>
        <div class="popuptext">...</div>
</a></li>

That is, a block-in-inline situation.  When the error occurs, the DOM
for the item that is erroneously displayed is:

<li><a href="services.html#massage">massage</a>
    <div class="popup"><a href="services.html#massage"><img></a></div>
    <a href="services.html#massage"></a>
    <div class="popuptext"><a href="services.html#massage">...</a></div>
    <a href="services.html#massage"></a>
</li>

which makes the CSS selectors not match as the author intended,
for this rule:  #subnav a div.popup { display:none; ... }

I suspect the underlying issue is bug 414418.

Comment 4

[Henri Sivonen (:hsivonen)]

Marking fixed based on trying the markup from comment 3 in Hixie's Live DOM Viewer.