chapter 7

pelopito · January 1st, 2008, 04:21 PM

hi once again everyone

the first think i wanna ask is this:

the behavior of expand to fit(horizontally)
and shrink to fit (vertically), for block
level elements, is applied whatever the values(auto, px,%) of
width or height properties are?

second question:

i followed the instructions on how to fix the
<li> spacing bug (page 437) in IE 6 but couldn't
get the desirable result.
any ideas on what exactly should i do?

richard.york · January 1st, 2008, 05:15 PM

1st question, depends on what you mean:

You mean if you set the width to px or % (but set no height) will height still be shrink-to-fit? Yes, it will. And if you set height to px or % (but set no width) will width still be expand-to-fit? Yes, it will.

If you set both width and height to px or % (or other measurements other than auto) then no, the width and height are no longer governed by those rules, the measurement replaces those models. Auto is the default value, so, auto means expand-to-fit (width) and shrink-to-fit (height), only when you explicitly define a value other than auto does that model go away for the particular property. Of course, relative, fixed, and absolute positioning change the rules, but that's covered in that chapter.

2nd question:
I can't say without seeing the complete markup and CSS.

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

pelopito · January 1st, 2008, 06:27 PM

1st question
you covered me, but:

fig 7-36

div {
    font: 12px sans-serif;
    border: 1px solid black;
    background: lightsteelblue;
     width: 100%;
    height: 100%;
    padding: 5px;
}

<body>
        <div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum tellus orci, dignissim ut, consequat in,consectetuer et, nibh. Donec luctus ante a neque convallis ultricies.
Curabitur ac lorem. Etiam adipiscing, nisi id eleifend feugiat,dui lorem tempus lacus, at rutrum lectus ligula quis diam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum tellus orci, dignissim ut, consequat in,consectetuer
et, nibh. Donec luctus ante a neque convallis ultricies.
Curabitur ac lorem. Etiam adipiscing, nisi id eleifend feugiat,dui lorem tempus lacus, at rutrum lectus ligula quis diam.
        </div>
    </body>

we have width: 100% and height: 100% => we don't have expand to fit
(horizontally)and shrink to fit (vertically.)
why the <div> element overflows horizontally and vertically it doesn't?

2nd question

fig 11-27

<body>
        [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>
    </body>

body {
    background: lightyellow;
}
ul {
    list-style: none;
    width: 200px;
}
li {
    background: pink;
    border: 1px solid red;
    margin: 2px;
    position: relative;
    width: 200px;
    height: 20px;

}
div {
    background: lightblue;
    border: 1px solid blue;
    position: absolute;
    z-index: 2;
    top: 2px;
    left: 150px;
    height: 100px;
    width: 200px;
}

how exactly do we fix the IE6 <li> spacing bug(the additional space
that is included below the <li> element)?

richard.york · January 6th, 2008, 11:40 AM

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