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

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

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?

Kommt auf den Zweck des Bildes an:

Bild transportiert Inhalt:

img

Bild dient zum Layout:

background-image

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?

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

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.

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

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?

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.