Closed Bug 595476 Opened 14 years ago Closed 14 years ago

.class:hover and .class:active only work on some elements in quirks mode

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 197686

People

(Reporter: antithesis, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3

This works in Chrome.

<html>
  <head>
    <style>
      .sizerBarVertical {background-image:url(img/sizer_bar_vertical.png); width:6px; cursor:col-resize}
      .sizerBarVertical:hover {background-image:url(img/sizer_bar_vertical_hover.png)}
    </style>
  </head>
  <body>
    <table border='0' cellpadding='0' cellspacing='0' style='margin-left:3px'>
      <tr>
        <td valign='top'><div id='SideBar' style='width:250px; overflow:auto'>&nbsp;</div>
        <td id='SizerBar' class='sizerBarVertical' valign='top'><img src='img/t.gif' width='6' height='1' border='0'/>
        <td valign='top'><div id='Canvas' style='overflow:auto'>&nbsp;</div>
    </table>
  </body>
</html>

Reproducible: Always

Actual Results:  
The background image is not changed on hover.

Expected Results:  
The background image is should changed on hover.
Note it also does not work set the DOM style to a new backgroundImage, although this does also work in Chrome.

However, as a workaround, FF does appear to support changing the background-image by changing the class of the element.
Could you link to the URL showing the problem rather than pasting an HTML snippet that doesn't actually work without the images?
Oh, wait, you're testing in quirks mode, and you've hit a known quirk that was done to emulate IE.

Really, I'd recommend using a doctype to trigger standards mode.
I thought we had a bug somewhere on removing this quirk, but I can't find it.
Summary: :hover does not render background-image:url() change → .class:hover and .class:active only work on some elements in quirks mode
> and you've hit a known quirk that was done to emulate IE.

In particular, the next-to-last bullet under "Miscellaneous & Style" on https://developer.mozilla.org/en/Mozilla_Quirks_Mode_Behavior

The closest we have to a bug on this is bug 197686, of course.
Thanks for the explanation.

Thus apparently changing one line in my HTML would have removed the quirk (and in IE too):

      td.sizerBarVertical:hover

I did search "hover background image" before posting this bug report.

Apologies, yes quirks mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I also observed the same quirk in IE6 testing.

I never imagined to check that quirks mode would remove functionality, but I suppose that could be justified to make some pages work.

The problem I have is that few times I've tried to code in Strict mode, afair I ran into proliferation of cross-browser/version complexity.

I wonder if webkit/Chrome think this quirk is not important and should die, or did they overlook it.

I am okay if you mark this Won't Fix or duplicate of bug 197686. I had to implement a work-around any way, because I wanted IE6 compatibility.
Ignore the orthogonal bug report in Comment #1.

I was setting the DOM style on 'background-image' instead of 'backgroundImage':

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties
Status: UNCONFIRMED → RESOLVED
Closed: 14 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.