View Single Post
  #3 (permalink)  
Old January 1st, 2008, 06:27 PM
pelopito pelopito is offline
Registered User
 
Join Date: Nov 2007
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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)?