CSS Boxen Problem

fahluk

Hallo Forum,

so langsam gib ich den Kampf auf. Obwohl ich mir heute schon oft den Artikel über Boxmodell-Hack durchgelesen habe, so ganz verstehe ich es nicht.
Ich habe hier eine Test-Seite http://fahrner.it/kunden/f-tech/wordpress/category/johannes/ die mit Mac OS X und Firefox 3.5 so aussieht wie sie soll, nicht aber unter Safari und vermutlich auch nicht mit den Internet-Explorern von Windows.
Das Problem ist der rechte Rahmen um die Diaschau, bei Firefox geht er schön ums "Bild", Safari schneidet den Rahmen rechts ab, Windows habe ich erst gar nicht getestet da ich keinen zur Hand habe.
Jemand eine Ahnung wieso oder sogar eine Lösung?

Bitte nicht auf die Struktur vom CSS-Code schauen, wird noch schöner in der Reihenfolge angepasst :-D

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Ammaletu

Der Unterschied zwischen den Browsern ist wirklich ganz simpel: Firefox und einige andere Browser rechnen mit width + border-width + padding = reale Weite. Wohl korrekt, soweit ich mich erinnere, aber wenig intuitiv. Der IE dagegen nimmt die eingestellte width als Weite der Box und macht sie entsprechend größer für padding und border.

Ich habe mir das jetzt nicht genauer angeschaut, aber daran wird es vermutlich liegen. Finde erstmal raus, welches Element denn den Inhalt abschneidet und was da als Weite definiert ist. Ggf. darfst Du die Weitenangabe nicht ans gleiche Element wie die border und das padding packen. Leg einfach noch ein div drumrum, welches nur die Weite bekommt. Das ist zwar etwas sinnlos, aber damit kriegt man alle modernen Browser in den Griff, ohne zu IE-Hacks greifen zu müssen.

fahluk

Guten Morgen,

danke für die Hilfe :-)
War zwar nicht ganz so wie du gemeint hast, aber ich habe mir deine einfache Erklärung durch den Kopf gehen lassen und habe getestet welcher Browser was wieso macht und da bin ich darauf gekommen.

Ich habe die Div-Verschachtelung so aufgebaut:

PHP

<div id="sidebar2"> <!-- sidebar2 -->
  <div id='team'> <!-- team -->
    <div id="crew"> <!-- crew -->
      <strong>F-TECH</strong>crew
    </div> <!-- end crew -->
    <div class="slideshow"> <!-- slideshow -->
      <div class="swfobject" id="so3_1" style="width:500px; height:500px;"> <!-- swfobject -->
      </div> <!-- end swfobject -->
     </div> <!-- slideshow -->
  </div><!-- end team -->
</div><!-- end sidebar2 -->

Alles anzeigen

und im CSS-Code steht folgendes:

Code

#team .slideshow {
	border: 10px solid #36a7e9;
}

Was passiert also?
Firefox macht um den Div-Container #team einen Border von 10 px und um den div-Container mit der Klasse .slideshow vermutlich keinen mehr oder umgekehrt. Safari macht um beide Container einen Border mit 10 px, also zb. ist links ein Border mit 20 px und da der Container nur Platz für 20 px Border hat, schneidet er rechts ab.

Klingt verwirrend ist aber einfach oder?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS Boxen Problem

Jetzt mitmachen!