Browser ignorieren meine CSS Angaben.

Wasserleiche

Also erstmal ein "Hallo" an das Forum und seine User...

Nun zu meiner Frage:

Ich lerne gerade html und css. Doch das folgende Problem bekomme ich einfach nicht in den Griff.
Ich habe zum Test eine winzige html Datei erstellt, um ein paar Sachen auszuprobieren. Doch Firefox wie auch der Inet-Explorer fügen mir unerwünschte Spalten zwischen meiner Tabelle und dessen Inhalt ein.

Aber seht selbst:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
body { margin:5px; color:#FFFFFF; font-family:Arial,sans-serif; background-color:#555555; }
div#name { color:#D5AD1A; text-decoration:underline; }
table { margin:0px; padding:0px; border-style:solid; border-width:1px; border-color:red; table-layout:fixed; }
td { margin:0px; padding:0px; border-style:solid; border-width:1px; border-color:blue; }
img { border:0px; }
-->
</style>
</head>
<body>
<table>
 <tr>
  <td style="width:400px">
   <div id="name">3N-Mind:</div>
  </td>
 </tr>
 <tr>
  <td style="max-height:20px">
   [img]http://bf2s.com/player/44021140/sig.png[/img]
  </td>
 </tr>
 <tr>
  <td style="max-height:15px">
   [img]http://bf2s.com/player/44021140/sig5.png[/img]
  </td>
 </tr>
 <tr>
  <td style="max-height:15px">
   [img]http://bf2s.com/player/44021140/sig3.png[/img]
  </td>
 </tr>
 <tr>
  <td style="max-height:66px">
   [img]http://bf2s.com/player/44021140/awards.jpg[/img]
  </td>
 </tr>
</table>
</body>
</html>

Alles anzeigen

Und natürlich das ganze noch als Link(edit: Link entfernt, da nichtmehr vorhanden).

Mein Problem:
Also erstens werden meine "max-height" Befehle im "td" Element ignoriert und dadurch Leerraum unter den Bilder eingefügt (nur im Inet-Explorer), und außerdem gibt es ungewollte Spalten zwischen den einzelnen Zellen (trotz margin und padding : 0 Angaben).

Ich hab schon so viel probiert und in Foren gesucht, doch nicht wirklich fündig geworden. Die Rahmen sind nur um das ganze anschaulich zu machen.

Schonmal danke im vorraus...

Beatz

Hallo, das Problem mit den Freiräumen zwischen den Zellen kannst Du mittels border-collapse:collapse; lösen. TD besitzt, soweit ich weiß, keine Eigenschaft margin.

Wasserleiche

Hi,

danke für die Antwort. Das hat schonmal super geklappt !!!

Und in Firefox ist jetzt auch die Größe der Bilder richtig, aber der I-net Explorer macht die Tabllenzellen immernoch ca. 2 Pixel zu groß...

Hat jemand ne Ahnung was der Internet Explorer da für ein Problem hat?

Nochmal der Link.

Ronald

Moin!

versuchs mal mit

Code

<table cellspacing="0" cellpadding="0" border="0">

Dann sollte es passen (wenn die Werte nicht auf null gesetzt sind, dann gehen die Browser immer vom Standard = 1 Pixel aus. Da Mozilla und Firefox Stylesheets unterschiedlich interprätieren, ist das so die beste Lösung beiden gerecht zu werden).

Boarder-Collaps brauchst du normalerweise nicht, wenn du cellpadding und cellspacing auf null setzt.

G.a.d.M.

Ronald

thuemmeli

Hallo, habe ein ähnliches Problem und poste deshalb auch gerade in diesen Beitrag (ich hoffe man darf das :?)

ALso, bin absoluter HTML-Anfänger und möchte mit einem CSS einen gelben Hintergrund hinkriegen. Habe das folgendermassen versucht:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">


<html>


  <head>
  <title></title>


       <style type="text/css">
          body
          {
          background-color=#FFFF00;
          }


       </style>
  </head>


  <body> 
      Diese Text sollte einen gelben Hintergrund haben
  </body>


</html>

Alles anzeigen

leider wird der Hintergrund der Page nicht wie gewünscht gelb, sondern weiss angezeigt, meine CSS-Angaben werden also ignoriert

Wär cool, wenn mir jemand helfen könnte.

grüsse thuemmeli

Beatz

In CSS werden Parametername und Parameterwert durch einen Doppelpunkt getrennt. Ersetze

Code

background-color=#FFFF00;

durch

Code

background-color:#FFFF00;

ich dummerchen

vielen dank für die rasche hilfe.

gruss

Wasserleiche

@Roland:

Nein, das hat nichts verändert. Die Tabellenzellen sind immernoch zu groß (im IE)

Hier nochmal der aktuelle Quelltext:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
body { margin:5px; color:#FFFFFF; font-family:Arial,sans-serif; background-color:#555555; }
div#name { color:#D5AD1A; text-decoration:underline; }
table { margin:0px; padding:0px; table-layout:fixed; }
 -->
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td style="width:400px">
   <div id="name">3N-Mind:</div>
  </td>
 </tr>
 <tr>
  <td style="max-height:15px">
   [img]http://bf2s.com/player/44021140/sig.png[/img]
  </td>
 </tr>
 <tr>
  <td style="max-height:15px">
   [img]http://bf2s.com/player/44021140/sig5.png[/img]
  </td>
 </tr>
 <tr>
  <td style="max-height:15px">
   [img]http://bf2s.com/player/44021140/sig3.png[/img]
  </td>
 </tr>
 <tr>
  <td style="max-height:66px">
   [img]http://bf2s.com/player/44021140/awards.jpg[/img]
  </td>
 </tr>
</table>
</body>

Alles anzeigen

Und hier nochmal der Link.

Nochmal danke für die Mühe![/code]

Ronald

Du hast in jeder Zelle unsichtbare Zeichen - Mozilla ignoriert die, der IE macht dafür einen Zeilenumbruch innerhalb der Tabelle.

Mach es so:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
body { margin:5px; color:#FFFFFF; font-family:Arial,sans-serif; background-color:#555555; }
div#name { color:#D5AD1A; text-decoration:underline; }
table { margin:0px; padding:0px; table-layout:fixed; }
 -->
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td style="width:400px">
   <div id="name">3N-Mind:</div>
  </td>
 </tr>
 <tr>
  <td style="max-height:15px">[img]http://bf2s.com/player/44021140/sig.png[/img]</td>
 </tr>
 <tr>
  <td style="max-height:15px">[img]http://bf2s.com/player/44021140/sig5.png[/img]</td>
 </tr>
 <tr>
  <td style="max-height:15px">[img]http://bf2s.com/player/44021140/sig3.png[/img]</td>
 </tr>
 <tr>
  <td style="max-height:66px">[img]http://bf2s.com/player/44021140/awards.jpg[/img]</td>
 </tr>
</table>
</body>

Alles anzeigen

Wie du sicherlich bemerken wirst habe ich den Verweis auf w3.org aus dem Quelltext enttfernt. Mit diesem Verweis gibt es bei Höhenangaben in Tabellen falsche Darstellungen.

G.a.d.M.

Ronald

Wasserleiche

Natürlich, das macht Sinn... Vielen dank, darauf wäre ich niemals gekommen.

Aber warum werden Höhenangaben falsch dargestellt, wenn ich den w3.org Verweis drinnen habe? Es ist doch nur ein Link zu den html4.01 transitional Regeln, die der Browser dort nachschlagen kann!? Oder hab ich bei self-html verlesen?

Ronald

Hi!

Die Frage stell ich mir auch immer wieder - ist aber fakt. Ohne den verweis gehen Funktionieren die Höhenangaben in allen Browsern, mit nicht.

Ich habb mich einfach damit abgefunden.

G.a.d.M.

Ronald

Wasserleiche

Ich hätte da noch eine allerletze Frage.

Zwar funktioniert jetzt alles, aber sobald ich die Doctyp Variante "Strict" benutze (der W3 Validator erkennt keine Fehler), macht mir FIREFOX Leerzeilen unter die Bilder. Der IE gibt wie vorher bei "Transitional" alles korrekt wieder...

Entferne ich die Angabe, oder ändere ich sie nach Transitional um, funktioniert alles wieder prächtig.

Warum das?

Beatz

Das liegt daran, dass STrict eine Art Browserweiche für den IE ist, und der IE dann die Eigenschaften anders interpretiert. Was genau kann ich Dir aber leider nicht sagen ... ich weiß aber ganz sicher, dass man keinen reinen Text verwenden darf, man muss ihn immer in Blockelementen stehen, beispielsweise Überschriften, Absätzen oder DIV-Blocks. Könnte daran liegen! Außerdem werden darin bestimmte "alte" Einstellungen nicht mehr akzeptiert, die durch modernere abgelöst wurden. Such mal bei Google, welche das im einzelnen sind.

Wasserleiche

ja, das mit den alten einstellungen weiß ich. alle die per css ersetzt werden können (zumindestens die meisten) sind deswegen vom w3c als deprecated eingestuft, also als unerwünscht. aber solche elemente habe ich nicht drinnen, zumindestens jetzt nicht mehr.

aber das mit der browserweiche hab ich schonmal gelesen. das wird es wohl sein. werd mich nochmal informieren...

Tags