57 lines
2.0 KiB
HTML
57 lines
2.0 KiB
HTML
<!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>
|