✔ Divs und border

[Methos]

Weiß schon gar nicht mehr wie ichs am besten beschreiben soll.
Bin mir nur leider auch gar nicht sicher ob das überhaupt so machbar ist

Das Grundgerüst besteht aus 2 Divs welche ein 2 Spaltendesign erzeugen.
In dem content Bereich versuche ich dann wieder ein 3 Spaltendesign zu erzeugen.

Das ganze klappt auch, jedenfalls solange man keine border einbaut.

<!--kompletter Bereich-->
<div style="width:960px;text-align:left;">

<!--header Bereich-->
  <div style="width:960px;height:90px;background-color:#FFFFCC;">
  </div>

<!--navi Bereich-->
  <div style="width:200px;float:left;">
    <div style="padding-left:50px;border:0px solid #000;border-bottom-style:none;border-top-style:none;">
    </div>
  </div>

<!--Header-Navigation-->
  <div style="text-align:center;margin-bottom:0px;background-color:#FFFFCC;padding:2px;">

  </div>

<!--content -->
  <div style="width:760px;background-color:blue;float:right;">
  test
  </div>

  <div style="background-color:#FFFFFF;width:756px;float:right;padding-top:0px;background-color:#FFFFFF;
 border-color:red;border-style:solid;border-width:2px;">
    <div style="background-color:#FFFFFF;float:right;width:756px;border-color:red;border-top-style:solid;border-width:5px;">
   <div style="width:158px;float:left;text-align:center;float:left;background-color:#FFFFFF;">
      test
    </div>
    <span style=background-color:#FFFFFF;float:left;width:464px;padding:5px;border-color:red;border-right-style:solid;border-left-style:solid;border-width:1px;">

    </span>
    <span style="background-color:#FFFFFF;float:right;padding:5px;width:108px;">
       <b>
       test
       </b>
     </span>
</div>

überall wirds korrekt dargestellt, nur im opera verschiebt ers nach Rechts.

Wie schon gesagt, häng hier irgendwie fest und hab auch keine Ideen mehr wie ich das lösen könnte.

 

[Maik]

Vermutlich wirst du die Rahmenstärke von den Breitenangaben abziehen müssen, um so die gewünschte Breite zu erhalten, Stichwort: Abmessungen im Boxmodell.

 

[Methos]

Die sind eigentlich schon abgezogen worden
Es klappt ja auch im IE und Mozilla. Nur der Opera zickt mal wieder rum.

Wenn ich es abändere so das es im opera passt, gehts auch noch im IE aber dafür im Mozilla nicht mehr.

 

[Maik]

Habe deine Quelltext-Angaben mal in eine Testseite gepackt und in den genannten Browsern geladen. Hierbei kann ich keine Darstellungsunterschiede / Verschiebungen feststellen.

Testumgebung: Win2000, FF 1.5, IE 6.0, OP 8.5

Mir ist aufgefallen, daß hier das Anführungszeichen fehlt:

<span style="background-color:#FFFFFF;float:left;width:464px;padding:5px;border-color:red;border-right-style:solid;border-left-style:solid;border-width:1px;"> </span>

Was wird denn bei dir im Opera nach rechts verschoben? Welche Opera-Version verwendest du?

 

[Methos]

ups danke für die Verbesserung.
Also als Testumgebung hab ich im moment folgendes zur Verfügung:

Linux Opera 7.54 FF 1.5
Windows XP IE 6.0 Opera 7.23

Ich weiß das sind teilweise recht alte Versionen. Sobald ich daheim bin, werd ich den neuen Code mal im Opera 8.5 testen.

Die Frage ist dann nur falls es wirklich im neuen geht, wieviel da noch mit dem alten rumsurfen

ab diesem Code hier:

    <div style="background-color:#FFFFFF;float:right;width:756px;border-color:red;border-top-style:solid;border-width:5px;"> 
   <div style="width:158px;float:left;text-align:center;float:left;background-color:#FFFFFF;"> 
      test 
    </div> 
    <span style=background-color:#FFFFFF;float:left;width:464px;padding:5px;border-color:red;border-right-style:solid;border-left-style:solid;border-width:1px;"> 

    </span> 
    <span style="background-color:#FFFFFF;float:right;padding:5px;width:108px;"> 
       <b> 
       test 
       </b> 
     </span> 
</div>

wirds im opera (bei den alten Versionen) einige px nach Rechts verschoben.

 

[Methos]

so habs jetzt mit der opera Version 8.54 versucht und auch hier wirds nach rechts verschoben.

 

[Maik]

Hier mal mein Opera-Screenshot.

 

[Methos]

hmm komisch.
Wär mir fast lieber das es bei dir auch nicht gehn würd Denn im moment steh ich auf der Leitung.

So um auch wirklich irgendwelche Code Fehler zu vermeiden, hab ich kurz ne Datei hochgeladen:

testlink

 

[Maik]

Mir fällt gerade auf, daß am Ende des oben gezeigten Quelltextes noch zwei schliessende </div>-Tags fehlen, in der Online-Version fehlt jedoch nur eines.

 

[Maik]

Okay, ich habe nun den Grund gefunden: es liegt bei dir an der fehlenden Dokumenttyp-Deklaration.

Notiere mal folgenden Doctype in dem Dokument und die Layout-Verschiebungen lösen sich in Luft auf

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">