CSS backgrounds of inline tags are not rendered




CSS Parsing and Computation
16 years ago
16 years ago


(Reporter: TGOS, Assigned: dbaron)


Windows 98

Firefox Tracking Flags

(Not tracked)





16 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.1b) Gecko/20020905
Build Identifier: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.1b) Gecko/20020905

I'm just playing around to find different ways how to produce rollover images
using pure HTML/CSS, without a single line of JavaScript. I found a way that
works very well in Mozilla and IE, but it will fail once the browser has no CSS
support or CSS is disabled (as then no picture is displayed at all). So I tried
to find a fall-back solution, that will still display a picture if CSS support
is missing.

I came up with a pretty neat idea, that works exactly like I expected it to work
in IE, but there is absolutely nothing in Mozilla and I now wonder if that is a
CSS implementing bug or whether Mozilla handles it correctly and it's in fact a
bug in IE's render engine.

The idea is to place a normal picture there, but prevent the browser from
displaying it via CSS (what a browser that doesn't understand won't do and thus
the picture will display anyway). Instead one specifies a background picture
that is displayed instead of the picture and that changes on hover and active
(visited is possible, too).

Reproducible: Always

Steps to Reproduce:
1. Just open the page once with Mozill and once with IE6

Actual Results:  
There are no pictures in Mozilla, even though the links are there.

Expected Results:  
I think it should look the way IE6 renders this page (screenshot can be posted
as attachment if there is any interest).

As you can see, the page has passed HTML4 and CSS validator, so there is no
syntax error on the page you could blame. I edited the page since the
validation, but I think it would still pass, as I didn't altered anything that
could cause it to fail.

If this gets verified as a bug, then I probably have a huge list of bugs to
follow. Because while palying around with CSS, I found a whole lists of
situations where Mozilla does not render the page like IE6 does and where I'm
actually in favor of the way how IE6 does it and I couldn't really find anything
that would speak against the way IE6 does it in the CSS specification. This
includes stuff like inheritance of properties or setting properties for a
specifig SPAN tag and so on (most of it handled correctly in IE6).

Comment 1

16 years ago
The 'width' and 'height' properties do not apply to inline non-replaced
elements.  See CSS2 10.3.1 and 10.6.1.  (WinIE does this wrong, displaying
elements with 'display: inline' more like they had 'display: inline-block' once
they're given a 'width' and 'height'.  Neither Mozilla nor WinIE actually
supports 'inline-block' yet, although MacIE does.)

That said, your testcase would probably work a little better in Mozilla if you
were in standards mode since the inline elements would have different sizes. 
See http://mozilla.org/docs/web-developer/quirks/

I can also only guess how it looks in WinIE since there is no WinIE for Linux.

Comment 2

16 years ago
Even if you leave out the width and height attributes for the a tag, it doesn't
matter in IE6. CSS clearly writest that if a tag is declared to not be visible,
it's not displayed, but unlike display:none, the dimension of the element still
affect the page layout. That means even so I hide the image, the image has a
dimension specified in CSS, which is certainly allowed and thus the a element
should have the dimension of the IMG tag, regardeless whether it's displayed or
not, shouldn't it? Mozilla correctly creates an empty box with the dimension of
the image, but it's not possible to give this box a background... why not?
Giving IMG a background doesn't work, as if the image is not visible, its "box"
isn't visible either, and without box, there is no background of the box.

Well, I will for sure file another bug, as when I made the test with DIV tags
(that can for sure have a dimensions), I couldn't give them a background either.

Comment 3

16 years ago
No, inline elements do not expand vertically to contain their children.  That's
another bug in WinIE.  See CSS2 10.6.1 (the height is given by the 'line-height'
property).  That said, in quirks mode, the height we're using may be incorrect
(zero rather than the height of the 'line-height') -- see my previous comment.

Perhaps you could link to or attach your DIV testcase here, since all the other
issues in this bug are not valid?

Comment 4

16 years ago
I don't have the DIV test case anymore, because it's useless for a practical
purpose, since it's a block tag and A is not (a big mistake IMHO); also IE
doesn't handle it well either, so I deleted it again. But I will file another
bug if I can re-build this test case again. Marking this one invalid.
Last Resolved: 16 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.