Cascading Style Sheets { Internet Explorer : Beispiel "Border-Chaos" }

Internet Explorer, Beispiel "border-chaos"

Beispiel 1:

Zwei identische Absätze innerhalb eines div-Containers, deren Unterschied nur in den Außenabständen liegt. Für die zweite Box ist margin-top negativ deklariert:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eu magna nec leo porta imperdiet. Nullam accumsan ipsum non ipsum. Nunc nulla purus, tincidunt ut, rhoncus vitae, ornare ut, lacus. Mauris elementum eros quis tellus. Donec diam nibh, sollicitudin id, bibendum eget, fermentum sodales, metus. Fusce id odio. Integer porttitor luctus ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ultricies lorem ac est. Nulla placerat augue a sem. In dapibus sollicitudin nulla. Nunc hendrerit, erat ut tincidunt cursus, nulla risus cursus turpis, nonummy iaculis arcu nibh sit amet velit. In mauris. Etiam posuere pretium ligula. Pellentesque euismod libero eget massa. In hac habitasse platea dictumst. Sed eu pede id enim ultricies accumsan. Nullam accumsan.

Beispiel 2

Zwei Absätze, die genauso formatiert wurden wie im Beispiel 1, mit einem Unterschied: hier sind beide Absätze zusätzlich relativ positioniert.

Das Style-Sheet sieht so aus:

div.container {
    background-color: #f9f9f9;
    padding: 25px;
    border: 3px double #999;
    margin: 25px;
    }
p.para-1 {
    padding: 2em;
    border: 2px solid #e66;
    margin-top: 20px;
    }
p.para-2 {
    padding: 2em;
    border: 2px solid #66c;
    margin-top: -30px;
    margin-right: 30px;
    }
p.para-3 {
    padding: 2em;
    border: 2px solid #e66;
    margin-top: 20px;
    position: relative;
    }
p.para-4 {
    padding: 2em;
    border: 2px solid #66c;
    margin-top: -30px;
    margin-right: 30px;
    position: relative;
    }

Das HTML für die Container sieht so aus:

<div class="container">
    <p class="para-1">Lorem ipsum dolor sit amet ... </p>
    <p class="para-2">Lorem ipsum dolor sit amet ... </p>
</div>
<div class="container">
    <p class="para-3">Lorem ipsum dolor sit amet ... </p>
    <p class="para-4">Lorem ipsum dolor sit amet ... </p>
</div>

Internet Explorer, Beispiel "border-chaos"

Beispiel 1:

Beispiel 2

Internet Explorer, Beispiel "`border`-chaos"