Div wird in Mozilla anders angezeigt als in Opera und IE

[Neptun]

Hallo Experten,

auf einer Unterseite meiner Homepage (For Sale!) habe ich mehrere Fotos jeweils in einzelne div's gepackt und mit Bildunterschriften versehen. Dann wollte ich 4 (Hochkant-)Bilder nebeneinander in eine "Zeile" angezeigt haben. Das funktioniert im IE und in Opera, aber nicht in Mozilla. Wenn IHR diese Seite mit verschiedenen Browsern aufruft, erscheinen die 4 ersten Bilder nach der Teilüberschrift "Weitere Detailbilder" auch in Mozilla über zwei Zeilen gebrochen??

Hier der link zu meiner besagten HP-Seite: http://www.halloneptun.de, ==> Tauchen und mehr ==> For Sale!

Hier ist mein verwendeter CSS-Code:

.saleimgleftvert {
	float: left;
	width: 184px;
	margin: 10px 5px 0px 12px;
	background-color: #bbb;
	padding: 15px 15px 2px 15px;
	border: 1px solid #666;
	text-align: center;
	font-style: italic;
	}

div.saleimgleftvert img {
	border-width: 1px;
	border-style: solid;
	border-color: #666;
	}

Und hier mein verwendeter HTML-Code:

<p class="textstrong">Weitere Detailansichten:</p>

<div class="saleimgleftvert">
<a href="../neptun-bilder/sale-rucksack/tauchrucksack-22-550px-80pro.jpg" target="main" title="Tauchrucksack Scuba Master Dive Motion" type="">
<img src="../neptun-bilder/sale-rucksack/tauchrucksack-22-200px-90pro.jpg" alt="Foto Tauchrucksack Scuba Master Dive Motion" title="Für größere Darstellung auf das Bild klicken" width="150" height="200"></a><br>Rucksack  mit Teleskopgriff</div>

<div class="saleimgleftvert">
<a href="../neptun-bilder/sale-rucksack/tauchrucksack-05-550px-80pro.jpg" target="main" title="Tauchrucksack Scuba Master Dive Motion" type="">
<img src="../neptun-bilder/sale-rucksack/tauchrucksack-05-200px-90pro.jpg" alt="Foto Tauchrucksack Scuba Master Dive Motion" title="Für größere Darstellung auf das Bild klicken" width="150" height="200"></a><br>Die Tragegurte ver- schwinden unter...</div>

<div class="saleimgleftvert">
<a href="../neptun-bilder/sale-rucksack/tauchrucksack-08-550px-80pro.jpg" target="main" title="Tauchrucksack Scuba Master Dive Motion" type="">
<img src="../neptun-bilder/sale-rucksack/tauchrucksack-08-200px-90pro.jpg" alt="Foto Tauchrucksack Scuba Master Dive Motion" title="Für größere Darstellung auf das Bild klicken" width="150" height="200"></a><br>... einer Abdeckung auf der Rückseite</div>

<div class="saleimgleftvert">
<a href="../neptun-bilder/sale-rucksack/tauchrucksack-09-550px-80pro.jpg" target="main" title="Tauchrucksack Scuba Master Dive Motion" type="">
<img src="../neptun-bilder/sale-rucksack/tauchrucksack-09-200px-90pro.jpg" alt="Foto Tauchrucksack Scuba Master Dive Motion" title="Für größere Darstellung auf das Bild klicken" width="150" height="200"></a><br>Teleskopgriff mit Reiß- verschlussabdeckung</div>

<div style="clear: left;"></div>

Ich habe festgestellt, dass die Bildunterschrift beim IE und bei Opera jeweils nur maximal die Breite des inneren Bildes einnimmt. Nur bei Mozilla geht die Unterschrift breiter, bis an den äußeren Div-Rahmen ran. Und dann wird der ganze Div-Rahmen eben zu breit und schiebt das rechte Bild in eine neue Zeile.

Gibt es eine Möglichkeit, dass die Seite genauso in Mozilla angezeigt wird wie in IE und Opera? An welchem CSS- oder HTML-Code liegt das?

Vielen Dank für Eure Hilfe!

Liebe Grüße vom Neptun

P.S.: Ja, meine HP basiert auf Frames. Ja, das ist blöd. Aber NEIN, das soll bitte nicht das Thema dieses Threads sein.

[threadi]

AW: Div wird in Mozilla anders angezeigt als in Opera und IE

Korrigier das margin, so dass der Abstand der Boxen zueinander nicht so groß ist. Und entferne außerdem das linke margin. Z.B.:

margin: 10px 13px 0px 0px;

[Ingo]

AW: Div wird in Mozilla anders angezeigt als in Opera und IE

Hi,

erscheinen die 4 ersten Bilder nach der Teilüberschrift "Weitere Detailbilder" auch in Mozilla über zwei Zeilen gebrochen??

das kann ich hier nicht nachvollziehen.
Wenn ich das Fenster aber schmaler mache (oder bei 1024er Breite der linke Frame dazukommt), reicht der Platz nicht mehr aus. Du könntest natürlich die Abstände verringern, aber da Du die Fenstergröße der besucher nichtr bestimmen kannst, wird zwangsläufig bei einigen umgebrochen - ist doch auch nicht tragisch und besser als querscrollen.

Gruß
Ingo

[Neptun]

AW: Div wird in Mozilla anders angezeigt als in Opera und IE

Hallo Threadi,

ich möchte an den Margins nichts ändern. Warum? Meine HP habe ich mit den Frames auf eine Seitenbreite von 1.024px eingestellt.
Beim coden der "For Sale!"-Seite habe ich durch Trial and Error, also einfach durch probieren, die margins so eingestellt, daß die 4 Bilder möglichst gleichmäßig auf eine Zeile passen. Die Margins sind nun so, daß es in Opera und im IE schön aussieht. Wenn ich jetzt die margins kleiner mache, zerhaut es mir das ("schöne") Layout in Opera und IE. Gut, zerhauen ist vielleicht übertrieben, aber die Abstände zwischen den Bildern sind JETZT schön gleichmäßig, und so gleichmäßig sollen sie auch bleiben.

Genauso soll es auch in Mozilla aussehen. Tut es aber (bei mir) nicht.

Meines Erachtens liegt das aber nicht an den margins zwischen den einzelnen Div's. Sondern daran, "dass die Bildunterschrift beim IE und bei Opera jeweils nur maximal die Breite des inneren Bildes einnimmt. Nur bei Mozilla geht die Unterschrift breiter, bis an den äußeren Div-Rahmen ran. Und dann wird der ganze Div-Rahmen eben zu breit und schiebt das rechte Bild in eine neue Zeile."

Daher glaube ich, daß der "Schlüssel" an den Bildunterschriften INNERHALB der Div's liegt. Ich weiß nur nicht, was konkret den Textlauf in Mozilla beeinflusst.

Liebe Grüße vom Neptun


Edit (autom. Beitragszusammenführung):

Hallo Ingo,

das kann ich hier nicht nachvollziehen.

Ingo, das wundert mich nicht. Meine HP basiert auf einem Frameset, und beim Verlinken direkt auf die Unterseite "For Sale!" wird das Frameset nicht mitgeladen. Daher habe ich in meinem Posting den link nicht direkt auf diese Unterseite gesetzt, sondern auf die Startseite mit dem Frameset (www.halloneptun.de), und dann manuell den Pfad angegeben (==> Tauchen und mehr ==> For Sale!)

Mein Frame habe ich auf eine Seiten-/Bildschirmbreite von 1.024px ausgerichtet.
Ich weiß, daß bei Bildschirmgrößen kleiner als 1.024px die Seiten gebrochen oder eine Laufleiste erscheint.
Das ist aber nicht das Problem, daß ich beseitigen möchte.

Sondern "dass die Bildunterschrift beim IE und bei Opera jeweils nur maximal die Breite des inneren Bildes einnimmt. Nur bei Mozilla geht die Unterschrift breiter, bis an den äußeren Div-Rahmen ran. Und dann wird der ganze Div-Rahmen eben zu breit und schiebt das rechte Bild in eine neue Zeile." DIESEN Effekt, der bei mir nur im Browser Mozilla auftritt, möchte ich "bekämpfen". Denn in IE und Opera bleibt die Breite der Bildunterschriften schön brav begrenzt auf die Breite des eingebetteten Bildes. Warum der Text im IE und Opera nicht breiter wird bis an den Rand des Div's weiß ich nicht. Aber es ist halt so. Nur in Mozilla wird die Bildunterschrift breiter, zieht die Breite der Div's hoch, die dann nicht mehr auf eine Zeile passen und dann eben in eine neue Zeile umbrechen.

Wie kann ich das in Mozilla verhindern? Oder wie kann ich es für Mozilla bewerkstelligen, dass die Bildunterschriften auch nur maximal die Breite des eingebetteten Bildes einnehmen? Dann wäre nämlich alles wieder paletti.

Vielen Dank für Deine und Eure Hilfe!!

Liebe Grüße vom
Neptun

[Ingo]

AW: Div wird in Mozilla anders angezeigt als in Opera und IE

Hi,

Meines Erachtens liegt das aber nicht an den margins zwischen den einzelnen Div's.

Stimmt.

Nur bei Mozilla geht die Unterschrift breiter, bis an den äußeren Div-Rahmen ran. Und dann wird der ganze Div-Rahmen eben zu breit und schiebt das rechte Bild in eine neue Zeile."

Daher glaube ich, daß der "Schlüssel" an den Bildunterschriften INNERHALB der Div's liegt. Ich weiß nur nicht, was konkret den Textlauf in Mozilla beeinflusst.

Falsch geraten.
Gebe der Seite http://halloneptun.de/neptun-frames/forsale.html mal einen vollständigen DOCTYPE mit URL-Angabe, dann sollten auch Opera und IE sie standardkonform anzeigen.
Und dann ändere die Breitenangaben gemäß dem standardkonformen Boxmodell.

Ingo, das wundert mich nicht. Meine HP basiert auf einem Frameset, und beim Verlinken direkt auf die Unterseite "For Sale!" wird das Frameset nicht mitgeladen.

Du konntest Dir nicht denken, warum ich den dahinter gesetzt hatte?

Gruß
Ingo

[Neptun]

AW: Div wird in Mozilla anders angezeigt als in Opera und IE

Hallo Ingo,

Du konntest Dir nicht denken, warum ich den dahinter gesetzt hatte?

*lach!* Ehrlich gesagt, bei meiner Antwort war mir schon etwas "mulmig" zumute, ausgerechnet DICH auf meine Frames hinzuweisen.... Mir war schon klar, daß Du über diesen Zusammenhang besser Bescheid weißt als ich - ich wollte dich also beileibe nicht "belehren" - wie könnte ich auch!! Ich habe es eigentlich dann nur der "Vollständigkeit/Gründlichkeit" wegen geschrieben und weil hier Tausend andere User und Newbies wie ich mitlesen.

Gebe der Seite http://halloneptun.de/neptun-frames/forsale.html mal einen vollständigen DOCTYPE mit URL-Angabe

Ups!!!! Potzblitz, das merke ich JETZT erst, dass der DocType unvollständig ist!! Und zwar auf ALLEN meinen Unterseiten! Vielen Dank, Ingo, für diesen Hinweis! Ich habe gleich in selfhtml nachgespickelt und den Fehler erkannt.

dann sollten auch Opera und IE sie standardkonform anzeigen

Na toll!! Jetzt gebe ich dieser Seite eine standardkonforme DOCTYPE mit URL, und was passiert?? Jetzt "zerhaut" es mir mein Layout auch beim Betrachten mit Opera und IE, also genau bei den beiden Browsern, auf denen es bisher so aussah, wie ich es haben wollte!!! Jetzt sieht es mit allen drei Browsern beschissen aus. Tolle Tipps gibst Du mir da, Ingo!! (und dieses Smiley steht jetzt hier aus demselben Grund wie Du es vorher benutzt hast! )

Und dann ändere die Breitenangaben gemäß dem standardkonformen Boxmodell.

Gut, über das Boxmodell ist in selfhtml erschöpfend Auskunft gegeben. Mir ist allerdings mein konkreter Fehler in meinem CSS unklar, der gegen das Boxmodell verstößt. Denn ich gehe mal davon aus, daß Du nicht meinst, dass ich jetzt die Höhen-/Breitenangaben von 12 auf 14 oder von x auf y ändern soll. Sondern dass mein CSS-Code als solcher irgendwo falsch ist und gegen die Regeln verstößt. Aber was??

Bei meinem CSS-Code:

.saleimgleftvert {
float: left;
width: 184px;
margin: 10px 5px 0px 12px;
background-color: #bbb;
padding: 15px 15px 2px 15px;
border: 1px solid #666;
text-align: center;
font-style: italic;
}

div.saleimgleftvert img {
border-width: 1px;
border-style: solid;
border-color: #666;
}

lege ich mit "width: 184px" die Breite des Div-Rahmens um die Bilder fest. Und mit "padding: 15px 15px 2px 15px;" bestimmte ich den Abstand zwischen Bild und "Aussenrahmen" des Divs.
Aber wie/womit kann ich bestimmen, wo der Text der Bildunterschrift umgebrochen wird, oder wie breit der Text im div sein darf?

PAUSE - TÜFTEL - AUSPROBIER - PAUSE - TÜFTEL - AUSPROBIER

So, nun habe ich 20min lang mit den padding- und width-Angaben herumgespielt und es doch durch verändern der Abstandszahlen erreicht, daß es nun in IE und Opera wieder "gut" aussieht - die vier Hochkant-Bilder erscheinen in einer Zeile, und die drei horizontalen Bilder auch. Bei den horizontalen Bildern habe ich noch zusätzlich ein "height:188px" eingefügt.

Mein neuer CSS-Code für die Hochkant-Bilder:

.saleimgleftvert {
	float: left;
	width: 166px;
	margin: 10px 5px 0px 10px;
	background-color: #bbb;
	padding: 15px 10px 2px 10px;
	border: 1px solid #666;
	text-align: center;
	font-style: italic;
	}

div.saleimgleftvert img {
	border-width: 1px;
	border-style: solid;
	border-color: #666;
	}

Allerdings funktioniert das jetzt auch wieder nur in IE und in Opera - in Mozilla werden die Bilder wieder in zwei Zeilen zerrissen.

a) Warum?

b) Und noch etwas ist mir aufgefallen bezüglich Boxmodell: Ich bin davon ausgegangen, daß die Breite des äußeren div-Rahmens durch die Breite des eingelagerten Bildes, der padding-Breiten und der border-Breiten bestimmt wird.

Die Hochkant-Bilder habe ich mit html im <img>-Tag auf 150px festgelegt. Dazu kommen links und rechts je ein Padding-Innenabstand von 10px, plus links und rechts je eine Border-Breite von 1. Macht zusammen 172px. Die gesamte Div-Breite habe ich aber auf width: 166px festgelegt, damit es in IE und Opera in eine Zeile passt. Welcher dieser eigentlich sich widersprechenden Angaben hat denn nun die "Oberhand", das "width:166px" oder die Summe der Bildbreite und der padding-Angaben?

Aber am meisten interessiert mich die Frage a)

Liebe Grüße vom Neptun

[Ingo]

AW: Div wird in Mozilla anders angezeigt als in Opera und IE

Hi,

Jetzt gebe ich dieser Seite eine standardkonforme DOCTYPE mit URL, und was passiert?? Jetzt "zerhaut" es mir mein Layout auch beim Betrachten mit Opera und IE, also genau bei den beiden Browsern, auf denen es bisher so aussah, wie ich es haben wollte!!! Jetzt sieht es mit allen drei Browsern beschissen aus.

tja, aber wenigstens gleich, oder?
Du solltest Deine Seiten bei der Entwicklung stets zuallererst im Firefox prüfen, da dieser die Fehler des IE nicht (wie Opera) nachahmt.
Und bei standardkonformen Rendering musst Du dann u.U. vielleicht ein paar Korrekturen für den IE6 einbauen - das ist weitaus einfacher, als anders herum.

Allerdings funktioniert das jetzt auch wieder nur in IE und in Opera - in Mozilla werden die Bilder wieder in zwei Zeilen zerrissen.

a) Warum?

Bei mir sieht's gleich aus. Lade die Seite mal neu.

b) Und noch etwas ist mir aufgefallen bezüglich Boxmodell: Ich bin davon ausgegangen, daß die Breite des äußeren div-Rahmens durch die Breite des eingelagerten Bildes, der padding-Breiten und der border-Breiten bestimmt wird.

Korrekt - sofern das Element gefloatet ist und Du keine Breite angibst.

Die Hochkant-Bilder habe ich mit html im <img>-Tag auf 150px festgelegt. Dazu kommen links und rechts je ein Padding-Innenabstand von 10px, plus links und rechts je eine Border-Breite von 1. Macht zusammen 172px.

Ebenfalls korrekt errechnet - diese Breite kannst Du der Box geben - dann werden längere Texte entsprechend umgebrochen.

Die gesamte Div-Breite habe ich aber auf width: 166px festgelegt, damit es in IE und Opera in eine Zeile passt. Welcher dieser eigentlich sich widersprechenden Angaben hat denn nun die "Oberhand", das "width:166px" oder die Summe der Bildbreite und der padding-Angaben?

Deine Angabe! Deine Boxen sind jetzt standardkonform in allen Browsern 166+2*20+2*1 = 188px breit - Du kannst es nachmessen.
Der Boxinhalt ist zentriert - daher siehst Du das effenktive padding auch gar nicht.

Wenn Du wirklich nur 10px padding haben willst, dann brauchst Du - standardkonform - überhaupt nicht zu rechnen und gibst einfach 150px an - die Breite der Bilder. Die Box wird dann wie Du oben richtig berechnest hast 172px breit.

Gruß
Ingo