Gucky der Mausbiber: Unterschied IE <> Mozilla?

Hallo Leute,
ich verstehe die Welt nicht mehr. Ich bin gerade dabei meine Homepage neu zu machen, dabei ist auch eine Fotogalerie. Als Vorschau werden immer 2 Bilder angezeigt, die dann eine Art "Dia-Rahmen" bekommen. Das ganze ist mit ner Tabelle gelöst. Mitte das Bild und recht,links, oben und unten der Dia-Rahmen.
Schaut es euch an unter www.christopher-boehm.de -> PRIVAT -> Fotogalerie   (die Homepage ist ca. 1-2 Tage online)
Im Internet-Explorer sieht das top aus, aber bei Mozilla-Browsern verschiebt es sich und sieht schrecklich aus, aber schaut es euch mal selbst an.
Der Code dazu ist dieser

print('<div class="rahmen">');

print('<div class="datum">'.$datum.'</div>');

print('<div class="titel"><a href="galerie_edit.php?themenNr='.$id.'">'.$titel.'</a></div>');

print('<div class="inhalt">');

print('<table width="630" border="0" cellspacing="0" cellpadding="0" height="134">');

print('<tr height="16">');

print('<td rowspan="3" width="5" height="134"><img src="links.gif" alt="" width="5" height="134" border="0"></td>');

print('<td valign="bottom" width="150" height="17"><img src="oben.gif" alt="" width="150" height="17" border="0"></td>');

print('<td rowspan="3" width="5" height="134"><img src="rechts.gif" alt="" width="5" height="134" border="0"></td>');

print('<td rowspan="3" width="20" height="134"><img src="spacer.gif" alt="" width="20" height="1" border="0"></td>');

print('<td rowspan="3" width="5" height="134"><img src="links.gif" alt="" width="5" height="134" border="0"></td>');

print('<td valign="bottom" width="150" height="17"><img src="oben.gif" alt="" width="150" height="17" border="0"></td>');

print('<td rowspan="3" width="5" height="134"><img src="rechts.gif" alt="" width="5" height="134" border="0"></td>');

print('<td rowspan="3" width="20" height="134"><img src="spacer.gif" alt="" width="20" height="1" border="0"></td>');

print('<td width="270" height="17"><img src="spacer.gif" alt="" width="270" height="17" border="0"></td>');

print('</tr>');

print('<tr height="100">');

print('<td width="150" height="100"><img src="leer.gif" alt="" width="150" height="100" border="0"></td>');

print('<td width="150" height="100"><img src="leer.gif" alt="" width="150" height="100" border="0"></td>');

print('<td valign="top" width="270" height="100"><p class="beschreibung">'.$beschreibung.'</p></td>');

print('</tr>');

print('<tr height="16">');

print('<td valign="top" width="150" height="17"><img src="unten.gif" alt="" width="150" height="17" border="0"></td>');

print('<td valign="top" width="150" height="17"><img src="unten.gif" alt="" width="150" height="17" border="0"></td>');

print('<td width="270" height="17"><img src="spacer.gif" alt="" width="270" height="17" border="0"></td>');

print('</tr>');

print('</table>');

print('</div>');

print('<div class="buttons">');

print('Test');

print('</div>');

print('</div>');

print('<br>');

und die CSS-Datei

div.rahmen     { background-color: #003d3d; position: static; width: 700px; height: 250px; border: solid 2px white }

div.datum  { color: white; font-size: 18px; font-family: Arial; padding: 5px; position: static; width: 690px }

div.titel  { background-color: white; padding: 5px; position: static; width: 690px }

div.inhalt    { color: white; font-size: 14px; font-family: Arial; font-weight: normal; padding: 8px 10px; position: relative; width: 680px; height: 134px }

div.buttons  { background-color: #651e20; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; position: static; width: 690px; height: 15px; border-top: 2px solid white }

p.beschreibung   { color: white; font-size: 11px; font-family: Arial; font-weight: normal }

a { color: black; font-size: 28px; font-family: Arial; font-weight: bold; text-decoration: none }

Hmm, ich wusste ja das es Unterschiede gibt, aber bei ner Tabelle?!? Oder mache ich irgendwas falsch?
Kann mir jemand sagen wie ich es richtig machen muss/kann?

  1. Hi!

    Also erstmal:
    Mit dem hier geposteten Code kann ich nicht viel anfangen. Hättest Du mal besser als Code posten sollen. Mit Syntax-Highlighting wäre das ein wenig besser zu lesen...
    Dann fällt mir beim kurzen drüber sehen so einiges auf, was ich besser machen würde.
    Ich würde erstmal nicht "Tabellen-Design" mit CSS mischen. Ich würde alle mit CSS formatieren und positionieren.
    Oder notfalls halt auch alles mit Tabelle - aber nicht mischen.
    Dann solltest Du bei den Schriften als letztes immer eine generische Schrift mit angeben, also z.B. sans-serif.
    Und dann gruselt es mich, wenn ich deine komischen Spacer-Gifs sehe...

    Tja und dann sehe ich in deinem Code, daß Du das height-Attribut verwendest.
    Ich vermute mal, daß der Fehler (bzw. dein Problem) hier zu finden sein könnte.
    Nachdem ich auf deine Site geschaut hab, sehe ich an der Doctype-Declaration, daß Du XHTML 1.0 Strict verwendest.
    Damit schaltest Du deinen Browser in den standardkompatiblen Modus und damit wird dann erstmal deine height-Angabe ignoriert...
    (Wieso machst Du das nicht mit CSS?)

    Tja, also ich hab keine Lust, den Code rauszukopieren und zu testen...
    Ich vermute aber einfach mal, daß Du deine Seite für den IE entwickelt hast bzw. damit getestet hast und so lange gebastelt hast bis da alles stimmte.
    Und vielleicht hast Du alles schön auf den BoxModel-Bug vom IE angepasst...

    Du solltest anders an die Sache ran gehen. Versuche korrekten Code zu erstellen (BTW: Benutze mal einen Validator!) und teste im Mozilla.
    Ist dein Code korrekt, sollte die Umsetzung da auch stimmen. Danach kannst Du dann anfangen, mit Hacks die Bugs des IEs zu umgehen und die Seite auch da anständig hinzubekommen.

    Dann hast Du mit deinem GoLive außerdem irgendwas mit der Zeichenkodierung durcheinander bekommen. Die Umlaute werden mir erst korrekt angezeigt, wenn ich meinen Browser auf UTF-8 umstelle, aber im Metatag hast Du iso-8859-1 als Charset angegeben...

    Gruß, rob

    1. Hallo,
      erstmal danke, habe den Fehler auch gefunden liegt an der Doctype-Declaration. Werde da einfach ne Brwoserweiche einbauen.

      Hmm, würde gerne Die Tabelle weglassen, wenn du mir sagst wie ich das machen kann in dem Beispiel? Wie kann ich den Diarahmen mit DIV's realisieren? Bzw. wie bekomme ich dann 2 von diesen DIV's nebeneinander?

      Warum generische Schrift angeben? Warum sollte ich das tun, bzw. was bewirkt es?

      Wie stelle ich die Zeichensatzcodierung den richtig ein?

      Aber einer Sache muss ich hier ganz extrem widersprechen ... ;-) ... und zwar dem Satz von dir "...Ich vermute aber einfach mal, daß Du deine Seite für den IE entwickelt hast bzw. damit getestet hast und so lange gebastelt hast bis da alles stimmte.
      Und vielleicht hast Du alles schön auf den BoxModel-Bug vom IE angepasst..." -> also echt mal net, ich meine, im Gegenteil(!), habe die ganze Seite so angepasst das sie auf beiden Browsern gleich aussieht, und zwar ohne Browserweiche. Ist nur diese eine Seite die noch Ärger macht.

      1. Hallo Gucky

        erstmal danke, habe den Fehler auch gefunden liegt an der Doctype-Declaration. Werde da einfach ne Brwoserweiche einbauen.

        Browserweiche für die Doctype-Declaration?

        Zu deinen Doctype-Declarationen:

        http://www.christopher-boehm.de/index.php ist ein Frameset.
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        Das dürfte kaum die Passende sein, selbst wenn da nicht das Ende fehlen würde.

        http://www.christopher-boehm.de/privat/foto/galerie_index.php

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        

        Das, was der Browser bekommt hätte selbst bei HTML 4.01 Transitional noch
        drei Fehler.

        Schau dir das, was der Browser bekommt unbedingt mit dem Validator an!
        (http://validator.w3.org/ oder http://validator.de.selfhtml.org/)

        Meiner Meinung nach ist es ziemlich sinnlos Anzeigefehler zu suchen und
        beseitigen zu wollen, solange der Browser keinen validen Code bekommt.

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
  2. Salü.

    Welche Version von Mozilla verwendest du denn?
    Ich hab 1.7.5 und damit sieht deine Seite genau so aus, wie mit dem IE. Scriptfehler werden in der Konsole JavaScript-Konsole vom Mozilla auch nicht angezeigt. Da ist, soweit ich das sehen kann, alles in Ordnung.

    Gruss Mero