• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Firefox vs. Internet Explorer

markuss

Neues Mitglied
Hallo zusammen,

Wenn ich den unten stehenden HTML Code im Firefox anschaue wird er nicht richtig angezeigt.
Das Div Gallerycontainer wird nicht angezeigt. Das Div City erscheint über dem Gallerycontainer.
Wenn ich die Seite aber im Internet Explorer anzeige wird sie korrekt dargestellt.
Kann mir jemand sagen, was ich falsch machen?

Code:
<!doctype html>
<html>
<head>
    <title></title>
    <style>
        #maincontainer
        {
            background:lightgray;
            width:1200px;
            height:1200px;
            margin:0 auto 0 auto;
            
        }
        
       #gallerycontainer
       {
        width:1100px;     
        margin:margin:0 15px 12px 10px;
        background:pink;       
       }
       
       #element9
       {
        width:1100px;
        background:pink;
        margin:20px;    
        
       }
        
        .element
        {
            width:200px;
            height:200px;
            background:aqua;
            float:left;
            margin:40px;
        }
    </style>

</head>
<body>
    <div id=maincontainer>
        
        <div id=gallerycontainer>
            
            <div id=element1 class=element>
                Element1
            </div>

            <div id=element2 class=element>
                Element2
            </div>

            <div id=element3 class=element>
                Element3
            </div>

            <div id=element4 class=element>
                Element4
            </div>

            <div id=element5 class=element>
                Element5
            </div>

            <div id=element6 class=element>
                Element6
            </div>

            <div id=element7 class=element>
                Element7
            </div>

            <div id=element8 class=element>
                Element8
            </div>

        </div>
        
        <div id=Element9>
            city
        </div>
    </div>

</body>
</html>
 
Hallo

Internet Explorer

Welchem? Bei mir wird im IE9, Chrome, Opera und Safari die Seite wie im Firefox dargestellt, also so, wie du es nicht erwartest. Von daher ist eher die Darstellung in deinem IE falsch, auch wenn du die gerne als korrekt ansehen würdest.

Du solltest dich mal näher mit dem "float" beschäftigen (und dabei das clear nicht unterschlagen).

Gefloatete Elemente werden aus dem normalen Textfluß herausgehoben, schweben also dreidimensional gesehen eine Ebene "höher". Dadurch, das sich im #gallerycontainer nur gefloatete Elemente befinden (oder genauer: über ihm schweben) hat der keinen direkten Inhalt mehr und kann sich in der Höhe auf Null zusammenziehen, so das er auf dem Bildschirm nicht mehr angezeigt wird. Das ist auch das korrekte und vorgesehen Verhalten.

Dieses Verhalten kannst du vielleicht nachvollziehen, wenn du etwas rumspielst und dem #gallerycontainer entweder im css eine Höhe (height) mit auf dem Weg gibst oder in ihm nicht gefloateten Inhalt einfügst.

Gruss

MrMurphy
 
Bei sauberem HTML zeigt der IE nur minimale Abweichungen die du mit einem Korrektur-Skript beheben kannst. Chrome und Firefox sind im Gegensatz zum IE bei weitem genauer mit der HTML-Darstellung, wobei Chrome und Firefox auch kleine Unterschiede aufweisen. Jedoch sind diese so selten und gering, dass dafür selten ein Korrektur-Skript benötigt wird.
 
Zurück
Oben