Re: Background and non-auto-width questions

"Gérard Talbot" <newsblahgroup (AT) gtalbot (DOT) org> wrote

Ben C a écrit :
snip

First, remove the width:100% to see MSIE display correctly.

Must be another *feature* of MSIE to display as you expect when the width
is set to 100%

Where do you read that the resultant margin takes its background color
from closest containing box (body in my example) within the containing
hierarchy?

The margin has no background color. A margin is the space around an
element. Try putting a border around your example divs. ie, border: 2px
solid black;

I don't think you understand how margins work. I'll give a simple
explaination.

A margin of 150px on a div simply means that you do not want any content
(in the same stacking context) to come within 150px of that div. The margin
itsself has no properties such as backgound color (there's no margin-color,
or margin-border), it's just space. If there is a background-color or
background-image "behind" the div, it will show through the margin.

In this case, your parent div has no content, no borders, no padding. In
other words there is nothing for the margin in the child div to "keep away"
so the border of parent div does not expand to "keep away" from the child
div. That's where the margins collapse. The parent div is essentially the
same size as the child div which is why you can't see the background of the
parent div. The child div still wants to maintain a 150px margin so it
applies it to the next available content, in this case it's the body so you
get the body's background color "showing through" the margin of the child
div.

Try putting a border on, or some padding in, the parent div. The margins on
the child div will then have something to "keep away". If you just put a
margin on the parent div (with no border, padding, or content), it won't
work, the margins will "collapse" and the largest margin will apply.

Read the links I posted earlier (again) for other ways margins can collapse
(see the paragraph examples)

Rich

rh wrote :

First, remove the width:100% to see MSIE display correctly.

Must be another *feature* of MSIE to display as you expect when the width
is set to 100%

[snipped]

I've added 4 demo/testcases here:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
(see bug entries #35, #36, #37 and #38)

I'm taking a break (am busy these days). I'll read your newest posts
later. I appreciate your replies to my posts and the time you spent
explaining and trying to answer my questions.

Gérard
--
remove blah to email me