Browser Bugs

Die automatische Vergrößerung von Containern

Hier wird der Container dem Text angepasst, obwohl man eine feste Größe verwendet hat.

Bsp:

Code:
<div style:”width:100px; background-color:#CCCCCC;”> Donauflussschifffahrtskapitänsanwärter</div>

Richtig: Der Text fließt aus der Box.

Falsch: Die Box passt sich dem Text an.

Um dieses Problem im Internet Explorer zu verhindern muss man ein weiteres div verwenden und dieses über das andere legen.

Bsp.

Code:

<div style=” position:absolute; background-color:#CCCCCC; width:100px;”>&nbsp;</div>
<div style=”position:absolute;”>Donauflussschifffahrtskapitänsanwärter</div>

In diesem Beispiel gibt einem der Internet Explorer mehr Abstand, wie man angegeben hat.

Bsp:

Code:

<div style=”width:360px; height:92px; background-color:#f0f0f0; border:3px solid black;”>
<div style=”float:left; width:150px; height:90px; margin-left:100px; border: 1px dashed black; background-color:#ffcc99; text-align:center;”>
Text
</div>
</div>

Um dieses Problem zu lösen, muss man das float:left im zweiten div-Tag weglassen. Dann funktioniert es in allen Browsern.

Bei dem Boxmodel-Bug geht es darum, dass man eine Größe für den Inhalt definiert und diese vom Internet Explorer nicht angenommen wird.
Bsp:

Code:

<table border="0" cellspacing="10" cellpadding="10">
    <tr>
        <td>
            <div style="width:100px; background-color:#e0e0e0;
            padding:10px; border:3px solid  black;">
                <p>kurzer Text</p>
            </div>
        </td>
        <td>
            <div style="width:100px; background-color:#e0e0e0;
            padding:10px; border:3px solid black;">
                <p>ein Text mit nicht so vielen Worten</p>
            </div>
        </td>
    </tr>
</table>

Um dieses Problem zu vermeiden muss man die Breite für den Internet Explorer vergrößern. Die richtige Gesamtbreite für den Internet Explorer wäre dann 126px. Denn 3px (border) + 10px (padding) + 100px (Inhalt) +10px (padding) + 3px (border) = 126px

Bsp:

Code:

<div style="width:300px; height:100px; border:1px solid black">
    <div style="float:left; width:100px; height:100px;
    background-color:#ffcc99;">
        Box 1
    </div>
    <div style="float:left; width:100px; height:100px;
    background-color:#e0e0e0;">
        Box 2
    </div>
    <div style="float:left; width:100px; height:100px;
    background-color:#ffcc99;">
        Box 3
    </div>
</div>

Das Problem im Internet Explorer ist, dass er den Rahmen von der Gesamtbreite abzieht. Deshalb hat man nur noch 298px Platz. Darum ist die 3. Box nach unten verschoben. Um dieses Problem zu beheben, muss man entweder 302px Gesamtbreite angeben oder den Rahmen weglassen.

Im Internet Explorer kann kursive Schrift zu erheblichen Problemen führen.
Bsp:

lorem ipsum

lorem ipsum

Code:

<p style="width:200px; border:1px solid black; font-size:32px;
  font-family:Verdana, Arial;white-space: nowrap;">
    lorem ipsum
</p>
<p style="font-style:italic;width:200px; border:1px solid black;
  font-size:32px; font-family:Verdana, Arial;white-space: nowrap;">
    lorem ipsum
</p>

Wenn man 2 div-Tags mit float nebeneinander positioniert erhält man im Internet Explorer einen Seitenabstand von 3px.

Bsp: