...

View Full Version : Bug or mistake? Child margins damage container background.



MattyUK
11-23-2005, 03:28 PM
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/examplecode/child_margins_damage_container_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:

<!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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum