Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Alt bekanntes Boxenproblem“

johnreinert

Nicht mehr ganz neu hier

Ich ein Boxenmodel, das eine Überschrift und eine Unterschrift hat, dazwischen ist eine Box das wiederum 3 nebeneinanderliegende boxen hat...

------------------------------------
Überschrift
------------------------------------
...........|..................|..................|
...........|..................|..................|
Box 1....|...Box 2 .......|........Box 3..|
...........|..................|..................|
------------------------------------
Unterschrift
-------------------------------------


Der Code der 3 Boxen
HTML:
#left h4 {
  padding: 0;
  margin: 0;
  font-size: 12px;
  letter-spacing: 4px;
  text-indent: 20px;
}



#middle {
  position: relative;
  float: left;
  width: 500px;
  height: 460px;
  text-align: left;
  font-size: 11px;
  color: #004880;
}

#right {
  position: relative;
  clear: both;
  float: right;
  width: 200px;
  height: 460px;
  font-size: 12px;
  color: #004880;
  margin: 0px; 
  padding: 0px;
}

Beim IE ist alles ok, nur bei Firefox wird die rechte Box unterhalb der anderen Boxen angzeigt :'(



Schon gelesen, aber irgendwie habe ich den Hack einfach übelesen oder kriege das einfach nicht hin... jemand einen Tip?

Danke,
John
 

mw69

Chronisch wissbegierig

AW: Alt bekanntes Boxenproblem

1.: FF hat meistens recht ;)

Probiers mal so:
#left {
float:left;
position: relative;
}


#middle {
position: relative;
float: left;
width: 500px;
height: 460px;
text-align: left;
font-size: 11px;
color: #004880;
}

#right {
position: relative;
float:left;
width: 200px;
height: 460px;
font-size: 12px;
color: #004880;
margin: 0px;
padding: 0px;
}
Du hattest unter anderem nur die h4 in #left definiert. Größe etc. musst du da ggf. noch nachtragen.
 

johnreinert

Nicht mehr ganz neu hier

AW: Alt bekanntes Boxenproblem

Das war meine erste Variante, dann meckerte der IE rum und da ist nun die rechte Box beim IE unten, beim Firefox aber alles ok...
 

mw69

Chronisch wissbegierig

AW: Alt bekanntes Boxenproblem

Bei mir passt es im IE so auch ...

Ggf. musst du wegen margin und padding die Größe der äußeren Box, also des umgebenden Div ändern.

Sonst mal Link oder Screenshot und kompletten Code. Dann ist es leichter zu analysieren.
 

mw69

Chronisch wissbegierig

AW: Alt bekanntes Boxenproblem

Mach mal #rahmen breiter, auf 920 z.b.
Du hast da padding von 10 px auf allen Seiten, das nimmt nach innen ja Platz weg!

Guter Link dazu:
 

johnreinert

Nicht mehr ganz neu hier

AW: Alt bekanntes Boxenproblem

Der Opera ab der Version 5 und der Netscape 6 stellen das Boxmodell korrekt dar. Der Netscape 4 hatte schon immer seine Probleme. D.h. dass er padding und margin nur in <div>- und <layer>-Bereichen akzeptiert. Der Internet Explorer bis zur Version 5.5 und in der Version 6 im Quirks-Mode berechnet die Breite und Höhe nicht korrekt, wenn width- und/oder height-Eigenschaften angegeben sind.
D.h. dass die gesamte Breite, bzw. Höhe, wie oben bereits erwähnt, so berechnet wird:
Die gesamte Breite = linker Außenabstand + linke Rahmenbreite + linker Innenabstand + Breite des Inhalts + rechter Innenabstand + rechte Rahmenbreite + rechter Außenabstand.
Die gesamte Höhe = oberer Außenabstand + obere Rahmenbreite + oberer Innenabstand + Höhe des Inhalts + unterer Innenabstand + untere Rahmenbreite + unterer Außenabstand.
Der IE führt aber folgende Rechnung durch:
Die gesamte Breite = linker Außenabstand + Breite des Inhalts + rechter Außenabstand.
Die gesamte Höhe = oberer Außenabstand + Höhe des Inhalts + unterer Außenabstand.
Vereinfacht dargestellt: Den Bereich der Hintergrundfarbe (width + 2 x padding, height + 2 x padding) reduziert der IE auf die Werte von width und height.
Der Internet Explorer kennt natürlich den Innenabstand, nur stellt er das Element kleiner dar, als seine Browser-Kollegen.
Wenn kein Rahmen und keine Hintergrundfarbe benötigt wird, solltest Du deshalb statt padding margin verwenden.

Kenn ich alles, ich sitze dennoch fest... niemand der mir da helfen kann? Glaubt es einfach, gelesen habe ich da genug und ich glaube ich stehe im Wald und suche nach Bäumen :ko:
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.858
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben