Problem mit Tabelle und FF

[AdrianK]

Hallo,

ich bin gerade dabei meine Website erstellen. Auf der Startseite soll eine Newslist sein, die ich mit einer Tabelle und ein bischen CSS realisiert habe sein. Im IE7 klicksieht das alles wie gewünscht aus, doch zum erstenmal bringt der FF mir ein unerwünschtes Ergebniss. Die Bilder haben wie in diesem Bild klick zu sehen einen größeren Abstand. Ich habe schon verschiedene Margin / Padding Werte probiert, doch es klappt nicht. Hier der CSS codefür den IE:

div#ListHeader {
  margin-left: 15px;
  background-image: url('../img/list_header.png');
  width: 687px;
  height: 18px;
  color: white;
  padding-top: 3px;
  padding-left: 7px;
  font-family: sans-serif;
  font-size: 10pt;
}

div#List {
  margin-left: 15px;
  border-style: solid;
  border-width: 2px;
  border-left-color: blue;
  border-right-color: blue;
  border-bottom-color: blue;
  border-top: none;
  width: 690px;
  background-color: white;
  font-size: 8pt;
}

Hier der für den FF:

div#ListHeader {
  margin-left: 15px;
  background-image: url('../img/list_header.png');
  width: 687px;
  height: 18px;
  color: white;
  padding-top: 3px;
  padding-left: 7px;
  font-family: sans-serif;
  font-size: 10pt;
}

div#List {
  margin-left: 15px;
  font-size: 8pt;
  border-style: solid;
  border-width: 2px;
  border-left-color: blue;
  border-right-color: blue;
  border-bottom-color: blue;
  border-top: none;
  width: 690px;
  background-color: white;
}

und hier schließlich noch der HTML Code:

<div id="ListHeader"><b>News</b></div>
  <div id="List">

  <table border="0">
  <tr>
    <td><img src="../img/nxc_item.png" style="float: left; margin-right: 5px;"/></td>
    <td><p><b>08.05.2008 Sensormeter online!</b><br />
    Sensormeter ist ein einfaches Programm zum Darstellen der Sensorwerte auf dem NXT-Display... <a href="/nxt/sensormeter.php">mehr</a></p></td>
  </tr>

  <tr>
    <td><img src="../img/software_item.png" style="float: left; margin-right: 5px;"/></td>
    <td><p><b>04.05.2008 TexEdit 1.6 online!</b><br />
    TexEdit ist eine einfache Textverarbeitung mit allen wichtigen Funktionen,
    bis auf Tabellen... <a href="/projekte/texedit.php">mehr</a></p></td>
  </tr>

  <tr>
    <td><img src="../img/tutorial_item.png" style="float: left; margin-right: 5px;"/></td>
    <td><p><b>04.05.2008 Neues Tutorial: Dialogfenster</b><br />
    In diesem Tutorial erkl&auml;re ich die verwendung der Windows Standard-Dialoge mit
    Delphi. <a href="/tutorials/dialogfenster.php">zum Tutorial</a></p></td>
  </tr>

  <tr>
    <td><img src="../img/software_item.png" style="float: left; margin-right: 5px;"/></td>
    <td><p><b>03.05.2008 Multicopy 0.6 online!</b><br />
    Multicopy ist ein kleines OpenSource Tool das die Bedienung von Robocopy
    erleichtert. Alle Parameter k&ouml;nnen bequem mit Checkboxen ausgew&auml;hlt werden...
    <a href="/projekte/multicopy.php">mehr</a></p></td>
  </tr>
...

Danke schonmal!

 

[Efchen]

Moin!

und hier schließlich noch der HTML Code:

Der ist nicht vollständig. Man sieht z.B. nicht den Doctype. Die Wahrscheinlichkeit ist aber groß, sagt mir meine Glaskugel, dass sich Dein IE im Quirks Mode befindet, wo er das falsche Boxmodel nutzt. Dann erscheinen die Abstände im IE kleiner. Verwende deswegen immer einen Doctype, der alle Browser in den Standards Mode versetzt. Ohne Standards Mode sind Darstellungsunterschiede vorprogrammiert.

Gruß,
-Efchen

P.S.: Warum verwendest Du verschiedene Stylesheets für verschiedene Browser, zumal sie den selben Inhalt haben?
P.P.S.: "pt" ist eine geeignete Einheit für Schriftgröße beim Druck. Am Bildschirm wäre "px" besser, wenn der IE da nicht das Skalieren verbieten würde. Verwende daher besser "em".

 

[neuroleptika]

Bei solchen Abständen ist es wirklich hilfreich den verwendeten Doctype zu wissen.
Ich nehme an du verwendest html4.0 transitional oder xhtml in der Variante transitional.
mit html 4.0 strict oder xhtml 1.0 strict würde der Abstand in beiden Browsern ähnlich sein.

Das Bild (img) liegt nicht auf der Unterkante von td sondern auf der Grundlinie des Textes. Unter dieser Grundlinie ist Platz für überstehende Buchstaben (z.B. p, g und q).
Blockelemente reihen sich nicht mit in den Textfluss ein. Deshalb haben sie keinen freien Platz unter der Grundlinie.

Mit display: block wird img wie ein Blockelement behandelt:

td img {
display: block;
}

Der Abstand sollte jetzt in beiden Browsern gleich sein.
Auch mit html4.0 transitional.

 

[AdrianK]

Ja, es ist XHTML 1.0 Strickt, und die abstände sind jetzt geleich danke!
PS: ich verwende verschiedene Stylesheets, da andere Sachen (menu etc.) in den Browsern verschiden dargestellt werden...

 

[stachelbeer]

Mit display: block wird img wie ein Blockelement behandelt:

Die Bilder sind hier jedoch gefloated, so dass das nicht notwendig ist.

 

[neuroleptika]

Die Bilder sind hier jedoch gefloated,...

Das hab ich nicht gesehen.
Dann sind die Abstände von p vielleicht nicht definiert:

td p {
margin: 0;
padding: 0;
}

Ansonsten vielleicht mal einen Link posten.

 

[Efchen]

Guten Morgen!

PS: ich verwende verschiedene Stylesheets, da andere Sachen (menu etc.) in den Browsern verschiden dargestellt werden...

Aber die Auszüge, die Du hier gepostet hast, sind doch redundant. Das erhöht doch den Wartungsaufwand, wenn Du gleiche Dinge in unterschiedlichen Dateien hältst. Wenn ich wirklich in die Situation käme, wo ich für verschiedene Browser unterschiedliche Stylesheets bräuchte (hast Du auch ein eigenes für Opera, für IE5, für Netscape 4, usw.?), dann würde ich nur die Dinge getrennt halten, die wirklich unterschiedlich sein, und alles andere in einem gemeinsamen Stylesheet halten. Und es gibt ja auch genug Tricks, um Styles vor bestimmten Browsern zu verbergen, ohne gleich ein eigenes Stylesheet zu benötigen.

Aber ist ja nur so ein Tipp.

Gruß,
-Efchen