Div-Layout und Rowspan (FF ist korrekt, alle anderen haben Fehler)

[GonzIlla]

Hallo!

Zuerst einmal worum es geht:

Es geht um folgende Seite:

http://exchange.mcxsc-online.de/_newdesign/index.html

Im Firefox wird alles so anezeigt, wie gewünscht. Doch dan gehts los; hier erstmal ein paar Screenshots:

Mozilla Firefox:

Internet Explorer 7:

Safari (im Opera 1:1):

Wie man sieht: Im Firefox ist alles korrekt. Im IE7 ist alles zerschossen. Opera und Safari igorieren in der Contenttabelle das rowspan der Mainspalte und setzen als Höhe der blaue Sidebar nicht die "rowspan-Spalte", sondern die "inhaltliche" Größe...

...hat vielleicht jemand einen Tipp für mich bezüglich des IE bzw. Safari/Opera-Problemes?

Danke im voraus,
MCXSC

 

[prm]

Verwende einen qualifizierten Doctype, dann sollte es auch im IE hinhauen.

 

[hela]

...hat vielleicht jemand einen Tipp für mich bezüglich des IE bzw. Safari/Opera-Problemes? ...

Hallo,
mein Tipp: Zunächst mal den HTML-Quelltext valide gestalten. Der Quelltext ist fehlerhaft. Auf den ersten Blick sieht man z.B. folgendes:

...
<div id="navigation">
    <div id="tab"><img src="_images/_navigation/mainmenue.png" alt="" title="" border="0" /></div>
    <div id="tab"><img src="_images/_navigation/aboutme.png" alt="" title="" border="0" /></div>
    <div id="tab"><img src="_images/_navigation/mycine.png" alt="" title="" border="0" /></div>
    <div id="tab"><img src="_images/_navigation/programme.png" alt="" title="" border="0" /></div>
    <div id="tab"><img src="_images/_navigation/downloads.png" alt="" title="" border="0" /></div>
    <div id="tab"><img src="_images/_navigation/tutorials.png" alt="" title="" border="0" /></div>
    <div id="tab"><img src="_images/_navigation/mblog.png" alt="" title="" border="0" /></div>
</div>
...

Der ID-Bezeichner "tab" ist übrigens nicht der einzige, den du mehrfach verwendest.
Außerdem werden m.E. nur in XHTML leere Tags mit einem Slash-Zeichen abgeschlossen. Dein Dokument hat keine Dokumenttyp-Deklaration, so dass die Browser im Quirksmode arbeiten. Kann mich da der Meinung von prm nur anschließen.

 

[GonzIlla]

Verwende einen qualifizierten Doctype, dann sollte es auch im IE hinhauen.

Oops... Erledigt. Hatte ichwohl vergessen...

Der ID-Bezeichner "tab" ist übrigens nicht der einzige, den du mehrfach verwendest.
Außerdem werden m.E. nur in XHTML leere Tags mit einem Slash-Zeichen abgeschlossen.

Jau, wusste gar nicht, dass ID-Tags nur einmal vorkommen dürfen... Aber auch irgendwie logisch.

So, jetzt siehts in allen Browsern schonmal gleich aus:

http://exchange.mcxsc-online.de/_newdesign/

Aber folgendes Problem existiert irgendwie noch: Wie man sieht ist über dem Contentbereich der Sidebar ein weißer Balken, und die Sidebar geht nicht ganz bis nach unten (soll da enden, wo die letzte Contentbox endet)... Hat dafür jemand 'ne Idee?

 

[hela]

... Wie man sieht ist über dem Contentbereich der Sidebar ein weißer Balken, und die Sidebar geht nicht ganz bis nach unten (soll da enden, wo die letzte Contentbox endet)... Hat dafür jemand 'ne Idee?

Auch tabellenorientes Layout hat seine Tücken:
Ursache dafür ist offensichtlich, dass die Tabellenzellen mit der ID "sidebartop", "sidebarbottom" und die darunterliegende Tabellenzelle größer als 4px Höhe dargestellt werden. Nach meiner Erfahrung (habe allerdings seit über 5 Jahren kein Tabellenlayot mehr gemacht) schafft man es mit CSS-Mitteln auch nicht dieses Problem browserübergreifend in den Griff zu kriegen. Ich kann mich natürlich auch irren.

Bestenfalls kannst du noch folgendes ändern:

...
#sidebartop {
  background: url(images/sidebar_top.png) no-repeat bottom;
  width: 209px;
  height: 4px;
}
...