| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> |
| |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| |
| <head> |
| <title>Background:inherit doesn't reset the background color</title> |
| <style type="text/css"> |
| div, h1 { margin-bottom:30px; margin-left:auto; margin-right:auto; width:80%; border:4px solid;} |
| p {font: bold 16px monospace;} |
| |
| div.test { background: lightgreen; color:green;} |
| h1 { background-color: pink; } |
| h1#test { background: inherit !important; } |
| </style> |
| </head> |
| |
| <body> |
| |
| <div class="blurb"> |
| <p>Affected Browsers: Safari 2.0, Windows Internet Explorer 6 SP2</p> |
| <hr> |
| <p>Bug Description: On the Affected Browsers, if a rule sets the 'background-color' of an element, this color cannot be overridden by 'background:inherit' declarations. </p> |
| <hr> |
| <p>Example: With the following code, the background color of H1 elements stays pink, no matter what background color the parents have:<br> |
| H1 { background-color: pink; }<br> |
| H1 { background: inherit; } |
| </p> |
| <hr> |
| <p>Work-around: The 'background-color' can only be overridden by another 'background-color' declaration, or by a 'background' declaration that does specify a color.</p> |
| <hr> |
| This is in contradiction with the CSS2 specification which says: |
| <ul> |
| <li>The <a href="http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background">'background'</a> property first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration. |
| </ul> |
| </div> |
| |
| |
| |
| <div class="test"> |
| This DIV has a green background. |
| |
| <h1 style="background: inherit;">This header should have a green background (not pink) but the inline style rule is ignored on the Affected Browsers.</h1> |
| |
| The DIV continues here. |
| |
| <h1 id="test">This header should have a green background (not pink) but the !important rule is ignored on the Affected Browsers.</h1> |
| |
| The DIV continues here. |
| |
| <h1 style="color:red">This header has a pink background and that's good.</h1> |
| |
| </div> |
| |
| |
| </body> |
| </html> |
