Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

CSS - Container im IE größer als angegeben





Frage

Guten Abend (bzw. guten Morgen *gg*), ich habe hier ein kleines Problem in der CSS-Gestaltung. Ich habe zwei Container definiert, die nebeneinander dargestellt werden. Der erste Container soll 150x80 Px groß sein und enthält nur Text. Der zweite Container ist 300x80 px groß und soll ein Bild in mit den gleichen Abmessungen enthalten. Leider wird der Container bei Anzeige des Bildes etwas größer, so dass er nicht mehr bündig mit dem ersten abschließt - allerdings nur im IE. Im Firefox- und Opera-Browser wird alles so angezeigt, wie es eigentlich sein sollte. Kann man das mit einfachen Mitteln beheben?

Antwort 1 von Supermax

Verwendest du padding-, margin- oder border-Angaben?

Antwort 2 von rfb

2 Erklärungsmöglichkeiten:
- zum einen verrechnet sich IE im Quirksmodus und in älteren Versionen generell bei der Addition von padding + margin + border + inhalt = Gesamtgröße
Abhilfe: padding auf 0 setzen, bei Bedarf ein neues Innenelement mit margin einführen
oder (besser) den Browser nicht in den Quirksmodus schicken (also valider Code, vollständige korrekte DOCTYPE)
- zum anderen werden im IE Leerzeichen und anderer white-space wie Zeilenumbrüche im Quellcode zwischen div- und img-Element mit angezeigt

Antwort 3 von sutadur

Na, dann werd ich das mal prüfen. Danke. Aber zum Thema noch eine ergänzende Frage: Man kann ja durchaus Bilder auf untersch. Art und Weise innerhalb eines Elementes anzeigen, z.B. durch ein IMG-Tag im Quelltext oder innerhalb der CSS-Definition als Hintergrund des jew. Elementes. Was ist denn im Sinne der Barrierefreiheit besser?

Antwort 4 von rfb

Kommt auf den Zweck des Bildes an:
  • Bild transportiert Inhalt:
    img

  • Bild dient zum Layout:
    background-image


  • Antwort 5 von sutadur

    Na, dann hab ich hier gleich nochwas:

    Ich kämpfe gerade ein wenig mit der Interpretation von CSS im Opera. Ich wollte vier Container darstellen, jeweils zwei in einer Reihe, die Reihen direkt untereinander, das ganze innerhalb eines weiteren Containers. Um mein Problem zu verdeutlichen, habe ich zwei Screenshots angefertigt. Auf dem ersten ist zu sehen, wie die ersten beiden Container korrekt dargestellt werden. Sobald ich aber den nächsten Container in der zweiten Reihe einfügen möchte, wird die erste Reihe um genau diese Breite verlängert (s. Screenshot 2).

    Der dazugehörige CSS-Code lautet wie folgt:
    
    #row_middle {
     height: 100%;
     background-color: #CCCC99;
     border-right: 1px solid #FFFFFF;
     float: left;
     }
    
    #box_language {
     width: 150px;
     height: 80px;
     background-color: #999966;
     border-bottom: 1px solid #FFFFFF;
     color: #FFFFFF;
     font-size: 0.7em;
     padding-left: 10px;
     border-right: 1px solid #FFFFFF;
     float: left;
     }
    
    #box_welcome {
     width: 150px;
     height: 120px;
     background-color: #555555;
     border-bottom: 1px solid #FFFFFF;
     color: #FFFFFF;
     font-size: 0.8em;
     font-weight: bold;
     padding-left: 10px;
     border-right: 1px solid #FFFFFF;
     float: left;
     }
    
    #box_pict1 {
     width: 300px;
     height: 80px;
     border-bottom: 1px solid #FFFFFF;
     float: left;
     background-image: url(../img/pict1.jpg);
     }
    
    #box_pict2 {
     width: 300px;
     height: 120px;
     border-bottom: 1px solid #FFFFFF;
     float: left;
     background-image: url(../img/pict2.jpg);
     }


    In die HTML-Datei habe ich das so eingebunden:

    <div id="row_middle">
    <div id="box_language"><br>
    <img src="img/flagge_d.gif" width="24" height="15" border="0" alt="deutsch" align="middle">&nbsp;&nbsp;deutsch<br>
    <img src="img/flagge_gb.gif" width="24" height="15" border="0" alt="english" align="middle">&nbsp;&nbsp;english<br>
    <img src="img/flagge_fr.gif" width="24" height="15" border="0" alt="française" align="middle">&nbsp;&nbsp;française
    </div>
    <div id="box_pict1"></div>
    <div id="clear"></div>
    <div id="box_welcome"><br><br>Herzlich<br>willkommen</div>
    </div>

    Im Firefox und IE erfolgt die Darstellung wie gewünscht. Woran liegts?

    Antwort 6 von rfb

    was ist mit clear und wo ist box_pict2 ?
    Wird irgendwas vererbt?

    Antwort 7 von sutadur

    clear hab ich vergessen, in den obigen Code zu kopieren: #clear { clear: both; }
    box_pict2 habe ich im HTML-Quelltedt weggelassen, das ändert aber nichts. Wenn das eingefügt wird, verlängert sich die erste Reihe zusätzlich um diese Breite.

    Antwort 8 von rfb

    gib dem umgebenden DIV mal ne Breite (ca 465px)

    Antwort 9 von sutadur

    Hab ich gemacht. 465px ist aber zu breit, da der umgebende Container genau mit den innenliegenden Elementen abschließen soll. Ich hab nun den Wert soweit reduziert, bis es (optisch) passt, nämlich auf 460px. Erstmal ist das eine Alternative, aber wirklich im Sinne des Erfinders ist das nicht, oder?

    Antwort 10 von rfb

    nö, ich bin noch auf der Suche, aber ich glaub das geht in Richtung eines Opera-Bugs im Zusammenhang mit floating. Wenn ich mal wieder drüber stolpere poste ich die Beschreibung + Workarounds.