Closed
Bug 167076
Opened 22 years ago
Closed 22 years ago
CSS backgrounds of inline tags are not rendered
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: spamcop, Assigned: dbaron)
References
()
Details
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).
Assignee | ||
Comment 1•22 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.
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.
Assignee | ||
Comment 3•22 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?
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.
Status: UNCONFIRMED → RESOLVED
Closed: 22 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•