✔ IE-Problem mit Zellenformatierung

Status
Nicht offen für weitere Antworten.
N

Nexlamar

Erfahrenes Mitglied
Hi!

Im Anhang Mal 2 Screens mit Darstellungen in Firefox (rechtes Bild, korrekt ausgerichtet) und IE.

Die Tabelle wird hiermit formatiert:

HTML: 
#statistik table tr td
{
  color:#A4C500;
  line-height: 6px !important;
  line-height: 0px;
  border:1px solid #fff;
}

Wie bekomme ich die IE Darstellung korrekt gebogen? Auf line-height schlägt der gute IE nicht an ...
Die Rahmen könnt Ihr Euch wegdenken - ist nur zur besseren Darstellung des Problems ...

Grüße,
Nexlamar
 

Anhänge

  • screen1.gif
    screen1.gif
    1,4 KB · Aufrufe: 16
  • screen2.gif
    screen2.gif
    1,3 KB · Aufrufe: 15
Was erwartest du, wenn die Zeilenhöhe für die Tabellenzelle 0 Pixel beträgt?

Der IE schlägt nämlich sehr wohl auf die line-height-Eigenschaft an, wenn ich den Wert erhöhe ;)

Und aus welchem Grund verwendest du hier die !important-Regel?
 
Ehrlich gesagt, bei mir tut sich im IE nichts, wenn ich line-height verändere. Nur wenn ich es vergrößere, dann erhöht sich auch der Abstand. Aber das will ich ja gerade nicht, ich möchte ihn verkleinern.
Da bei mir im FF und im IE unterschiedliche Ergebnisse herauskamen und ich mir erhofft hatte, dass bei festgesetzter Firefox-Regel, ein wenig mit dem anderen Wert spielen kann um das Ergebnis anzugleichen. Hat nicht funktioniert.
 
Könntest du mal den dazugehörigen Seitenquelltext und die weiteren CSS-Formatierungen für das Dokument zeigen, oder einen Link zur Problemseite nennen?

Deinen CSS-Codeschnippsel interpretieren die beiden Browser bei mir ganz anders (OS: win2000):

  1. Firefox1.5-Screenshot

  2. IE6.0-Screenshot
Quelltext der Testseite:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body {
background: #007F00;
}

#statistik table tr td
{
  color:#A4C500;
  line-height: 6px !important;
  line-height: 0px;
  border:1px solid #fff;
}
-->
</style>

</head>
<body>

<div id="statistik">
     <table>
            <tr>
                <td>Status</td>
                <td>ausgeloggt</td>
            </tr>
            <tr>
                <td>Speed</td>
                <td>0.23s</td>
            </tr>
     </table>
</div>

</body>
</html>
 
Vielleicht solltest du es mal mit folgender CSS-Regel für die Tabellenzellen versuchen:

Code: 
td {
  font-size: 10px;
  font-family: arial;
}

#statistik table tr td
{
  color: #a4c500;
  line-height: 10px;
  border: 1px solid #fff;
  padding: 0;
}

/* oder konventionell */

#statistik table tr td
{
  color: #a4c500;
  height: 10px;
  border: 1px solid #fff;
  padding: 0;
}
 
Danke für Eure Vorschläge - das Problem besteht noch, aber ich weiß jetzt woran es liegt: An dem kleinen Pfeil-gif in der Zelle. Das gif ist zwar insgesamt nur so hoch wie die Schrift (der Firefox legt hier den Rahmen korrekt an das Bild und somit stimmt die Darstellung). Aber der IE baut da irgendwie einen Abstand zwischen gif und Tabelle ...
 
Vielleicht löst folgende Regel das Problem im IE:

Code: 
#statistik td img {
display: block;
}
Oder du verwendest die Grafik als Hintergrundbild für die entsprechenden Tabellenzellen.
 
Dann setzt er den Text in der Zelle unter dem gif fort (wie mit <br>) ... dieser schwachsinnige IE, aber das kennst Du sicher ...
 
Zuletzt bearbeitet:
Das wars, Weltklasse - Danke!

Für alle die das gleiche Problem haben hier der finale Code:

HTML: 
#statistik table tr td
{
  color:#A4C500;
  line-height: 6px;
  padding-bottom: 2px;
}

#statistik td img {
display: block;
float: left;
}

Warum padding-bottom? Weil er sonst komischerweise die "gg" bei "Ausgeloggt" unten abschneidet ... so kann ich aber sogar auf !important verzichten.

Nexlamar
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück