div added by appending to innerHTML does not respond to .class:hover in absence of doctype

RESOLVED DUPLICATE of bug 197686

Status

()

Core
CSS Parsing and Computation
--
minor
RESOLVED DUPLICATE of bug 197686
7 years ago
7 years ago

People

(Reporter: Hexadecima, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

7 years ago
User-Agent:       Mozilla/5.0 (Windows NT 5.1; rv:2.0b12pre) Gecko/20110220 Firefox/4.0b12pre
Build Identifier: Mozilla/5.0 (Windows NT 5.1; rv:2.0b12pre) Gecko/20110220 Firefox/4.0b12pre ID:20110220030351

The URL included should explain it all. When no doctype is present, a div inserted into the page by adding it through parent.innerHTML += "<div>...</div>" will not respond to :hover events specified by its class. This may be by design somehow (since adding an HTML4 strict doctype to this file fixes the problem) but the same behaviour does not occur in Chrome 11.0.672.2 dev, and the :hover specified in the class-specific CSS selector works as it does when the doctype is present.

Reproducible: Always

Steps to Reproduce:
1. document.getElementById("container").innerHTML += '<div class="a">hover me!</div>"
2. .a:hover { border: 3px red solid; }
3. leave out doctype
Actual Results:  
The selector for just .class was obeyed, but not the .class:hover selector.

Expected Results:  
The .class:hover selector should have been obeyed.

Elements inserted into the HTML initially (obviously) do not have this problem; for whatever reason (perhaps my Javascript-fu is weak) I had trouble assigning a class/id to a div created through DOM manipulation. If this latter behaviour is as intended, then the element added by appending to innerHTML should not have responded to any class-specific CSS selectors at all.

This behaviour is easily avoided by adding a doctype.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 197686
> Elements inserted into the HTML initially (obviously) do not have this problem;

Sure they do.  The behavior is the same no matter how you put the node in the DOM.
Component: DOM: CSS Object Model → Style System (CSS)
(Reporter)

Comment 3

7 years ago
Well, that will teach me not to wait five minutes for Bugzilla to finish searching before I file. Thanks guys.
You need to log in before you can comment on or make changes to this bug.