Inundating me with questions by repeatedly posting the same question here and mailing them to my personal email will not get you a response any faster. I saw your response the first time you posted it. Believe it or not, I participate in these forums voluntarily as my time permits. Harassing me with your questions is more likely to get you ignored than get you a response.
First question: The section on "Percentage Measurements" covers what to expect when dealing with percentage measurement, including your question. Width and height as percentages are *always* based on the width and height of the immediate parent element. The <body> element is block, its height is shrink-to-fit. The <body> element's parent is <html>, its height is shrink-to-fit. Therefore, when you apply a percentage height to the <div> element, its height is the same height as <body> and <html>. Apply height: 100%; to <body> and <html>, and you'll get different results.
Second Question: In the paragraph following Figure 11-27B is the suggested remedy for the IE white-space bug. At the time, it was, as far as I knew then, the only known fix, and it's one that I've personally been using for years.
The bug looks like this, though this displays two bugs actually, the z-index bug and the white-space bug.[list]
<li style='z-index: 4;'>
<div></div>
</li>
<li style='z-index: 3;'></li>
<li style='z-index: 2;'></li>
<li style='z-index: 1;'></li>
</ul>
The book suggests a couple of things to try, you may need one or more of these fixes.
* Remove all white-space from between the element tags in the markup source (just the[list] element), like so:
[list]<li style='z-index: 4;'><div></div></li><li style='z-index: 3;'><div></div></li><li style='z-index: 2;'><div></div></li><li style='z-index: 1;'><div></div></li></ul>
* Apply the following in a conditional comment style sheet to IE6:
li {
display: inline;
}
Now, what you'll find may turn pretty chaotic at first. The display: inline; fix is a pretty harsh one. To counteract that, place block containers inside each <li> element, and style the <li> or <div> elements to taste.
A Google search reveals that a few others have braved a fix for this glitch too, which gives you more to try:
http://www.hicksdesign.co.uk/journal/ie-whitespace-bug
* In a conditional comment style sheet, apply the following rule to IE (he states 6 and less, test with 7 before applying it to 7).
ul div {
float: left;
clear: left;
}
His example is using links, but it should work on the <div> elements too.
Then there is this one too:
http://csscreator.com/?q=node/6745
Google is your friend,
http://www.google.com/search?q=IE+list+whitespace+bug
Regards,
Rich
--
Author,
Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results
http://www.catb.org/~esr/faqs/smart-questions.html