Hi

Bug or mistake?

A nested div with margins and a container div with a background. The background fails to render vertically as expected. The nested divs margins are rendered but the containers background does not span them.

Easier to see an example:
http://www.realworldweb.co.uk/exampl...er_background/

As you can see from the page it does work when you set a border on the container div. I'd guess it also works when the container div has an explicit width/height setting. But if you want it to be "auto" then you are kinda stuck.

Code for those not wanting to browse is here:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>bug or mistake?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
div#containerDiv {
	background-image: url(test.jpg);
	background-repeat: repeat-y;
	background-position: 50px top;
}
div#marginDiv {
	margin: 70px;
	border: thin solid #660066;
}
div#containerDiv2 {
	background-image: url(test.jpg);
	background-repeat: repeat-y;
	background-position: 50px top;
	border: 1px solid #FF0000;
}
div#marginDiv2 {
	margin: 70px;
	border: thin solid #660066;
}
-->
</style>
</head><body>
<div id="containerDiv"><div id="marginDiv">Example 1: The containers background fails to render over the vertical margin dimensions set on this div.</div></div>
.<br />.<br />
<div id="containerDiv2"><div id="marginDiv2">Example2: The containers background is rendered over the vertical margin dimensions set on this div.</div></div>
</body></html>
I am eager to understand the theory behind this is someone can oblige.

This came up in another post I had going but the other post tended to focus on a particular layout whereas this one is trying to identify a bug or simple coding issue.

MattyUK