<!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>
	&nbsp;&nbsp;H1       { background-color: pink; }<br>
	&nbsp;&nbsp;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>
