View Single Post
  #4 (permalink)  
Old January 6th, 2008, 11:40 AM
richard.york's Avatar
richard.york richard.york is offline
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts

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;'>
   <li style='z-index: 3;'></li>
   <li style='z-index: 2;'></li>
   <li style='z-index: 1;'></li>

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:

* 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:

Google is your friend,


Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results