Closed Bug 305100 Opened 19 years ago Closed 19 years ago

CSS Inheritance between html elements does not work as specified in the W3C Recommendation

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: lucas, Unassigned)

Details

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6

I have not found a lot of information on it but from what I have found at: 
http://www.w3.org/TR/1999/REC-CSS1-19990111#inheritance FireFox does not 
properly support inheritance.  From what I have found the information 
in "steps to reproduce" should result in font-sizes that are identical.  I 
base this on what I have read of the W3C Recommendation and how IE handles it.


Reproducible: Always

Steps to Reproduce:
1. Create an HTML File with the following code in it.
<table id="BodyPanel">
<tr><td>test</td></tr>
<tr><td><table><tr><td>test2</td></tr></table></td></tr></table>

2. Make the required CSS data for BodyPanel and set it's font-size to like 
10px or something.  The inner table will not inherit the BodyPanel's font-size.
Actual Results:  
Different font sizes

Expected Results:  
same font sizes
The inner table does not inherit the outer table's font size because Firefox's
default stylesheet sets the font-size to a fixed value. If you override the
font-size to inherit on the inner table it will work just fine.
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → INVALID
I would assume you are talking about overriding in the actual HTML code.  Is 
that correct or is it an override in the browser?
No I am talking about overriding the style built into the browser's stylesheet.
For any more questions please use a support forum.
Great, I found it.  Within Quirk.css there is a line that says "Quirk: cut off 
all font inheritance in tables except for family."  This explicity violates 
the W3C Recommendations (available at the link earlier posted).  I'm marking 
this as 'Reopen bug' because this is not compliant; however, it's your 
software so I wont repost after this as this should provide all the 
information you would need to resolve the problem if it was desired.
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
Couple of quick points.

Firstly at http://www.w3.org/TR/1999/REC-CSS1-19990111#basic-concepts it says
"Each User Agent (UA, often a "web browser" or "web client") will have a default
style sheet that presents documents in a reasonable -- but arguably mundane --
manner"
Firefox has a default set of stylesheets (as do all browsers) and it may well
give values to some properties that are different to the what css lists as the
default value of properties, which are only the case if no value is given for a
property.

In this particular case, the quirk.css stylesheet is used by firefox to make
more changes to the document style than it normally would because it has
determined that the document is not totally standards compliant.

This behave a lot better if you use standards compliant html, this means having
a doctype etc.
You will still have cases where the browser's default stylesheet defines a few
things and you have to override them yourself.

In this case its as simple as putting the rule: table { font-size: inherit }
into a stylesheet on the page.
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago → 19 years ago
Resolution: --- → INVALID
I apologize if I am violating etiquette, but this process is new to me. My "bug" appears related to this one. It appears to be specific to Firefox as it does not occur in either IE6 or IE7; and it has been consistently happening in Firefox 1.5 through Firefox 2.0.0.7 on Windows XP Home Media Edition SP2. Both the XHTML and CSS documents in question have been "validated" using the free W3C validators.

The <div> element does not appear to be properly inheriting the text-align attribute defined for the <body> element. Specifically, if the stylesheet defines:

body {text-align:center;}

then all elements of the body should inherit this attribute. But the <div> element (maybe others, but the <div> I know for sure) does not. It stays hard set to the left. The only way to move it over that I have found is to encapsulate the target <div> element using either of the following non-CSS stylesheet and deprecated elements/attributes:

<center> or <div align="center">
  <div> <!-- target element -->
    .
    .
    .
  </div>
</center> or </div>

I have tried every way that I could think of using CSS to do this, but only the above seems to work. Thanks for any clarifications or pointers. Again, apologies if this doesn't follow proper etiquette.
You appear to be mistakenly believing that text-align on the body tag should affect where a div is displayed. It shouldn't, text-align should only apply to text content, not element boxes. See bug 238471 for example
You need to log in before you can comment on or make changes to this bug.