Tabellengröße unterschiedlich bei IE und Mozilla

[Giovanni]

Hallo, hab hier ne Seite die XHMTL 1.0 gerecht ist und mit nem HTML Validator geprüft ist. Es ist aber immer noch ein Problem.

Die Tabelle ist größer als die Bildschirmseite. Dadurch kann man nach unten scrollen, was unschön aussieht. Zudem unterscheidet sich die größe noch zwischen IE und Mozilla. Hoffe jemand kann mir helfen den Fehler zu finden.

http://test.compmess.net/index.php

Gruß Giovanni

[Zeromancer]

Hallo,

Hallo, hab hier ne Seite die XHMTL 1.0 gerecht ist und mit nem HTML Validator geprüft ist.

Ich kann nicht glauben, dass die Seite valide ist.

<table border="1" style="height:100%; width:100%;" cellspacing="0" cellpadding="0">
    <tr>
         <td style="height:72px; width:145px;">  &#160; </td>
         <td style="height:72px;             ">  &#160; </td>
    </tr>

Warum trennst du nicht Struktur (html) und Layout (css)?

Mit freundlichen Grüßen

André

[Giovanni]

Sorry, ich versteh nicht wie? Kannst du mir ein beispiel geben?

http://validator.projektmedien.de/check?uri=http%3A%2F%2Ftest.compmess.net%2Findex.php&doctype=Inline

Meinst du dass ich alle CSS in die style.css packe und der rest bleibt in der html-Datei? Aber wie soll das gehen. gerade bei meiner tabelle hier, habe sich viele verschiedene angaben. da brauch ich ja für fast jede zelle eine neue css-zeile in der css-datei.

[wahsaga]

hi,

Meinst du dass ich alle CSS in die style.css packe und der rest bleibt in der html-Datei?

ja.

Aber wie soll das gehen. gerade bei meiner tabelle hier, habe sich viele verschiedene angaben. da brauch ich ja für fast jede zelle eine neue css-zeile in der css-datei.

welchen grossartigen unterschied siehst du zwischen mehreren "zeilen" in einer externen CSS-datei, und jede menge style-attributen direkt an den tags?

darüber hinaus mach dir mal klar, was das "cascading" in CSS zu bedeuten hast, und schau dann nach, ob und wo du regeln zusammenfassen/vereinfachen kannst.

gruss,
wahsaga

[Giovanni]

Also, ich hab das jetzt mal so grob agbeändert. Stimmt das so von der Art her?

<table border="0" class="TableFull" cellspacing="0" cellpadding="0">
    <tr>
         <td class="TableT1" >  &#160; </td>

<td class="TableT2" >  &#160; </td>
    </tr>
    <tr>
         <td class="TableT3"  >  &#160; </td>
         <td class="TableT4" valign="top">
              <table class="TableT5" cellspacing="0" cellpadding="0">
              <tr>

<td class="TableT6"></td>
              </tr>
              </table>
              <table class="TableT7" border="0" cellspacing="0" cellpadding="0">
              <tr >
              <td class="TableT8"> &#160; </td>
              <td class="TableT2"                                     > &#160; </td>

</tr>
              </table>
         </td>
    </tr>
</table>

und dazu die css datei:

body,html     { padding:0px; margin:0cm 0cm 0cm 0cm; height:100%; width:100%; }
A:link        { text-decoration: none; color: #000000; }
A:visited     { text-decoration: none; color: #000000; }
A:hover       { text-decoration: none; color: #0000FF; }
#Corner       { position:absolute; top:10px; left:100px; height:13px; width:12px; background-image:url(Pics/corner.bmp);}
table         {}
.TableFull    { height:100%;  width:100%;  }
.TableT1      { height:100px; width:100px; }
.TableT2      { height:100%;               }
.TableT3      { height:100px; width:100px; }
.TableT4      { height:100%;               }
.TableT5      { height:5px;   width:100px; background-image:url(Pics/line2.bmp) }
.TableT5      { height:5px;   width:100px; background-image:url(Pics/line2.bmp) }
.TableT6      { height:5px;                }
.TableT7      { height:100px;              }
.TableT8      { height:100px;   width:5px; background-image:url(Pics/line1.bmp) }

[Zeromancer]

Hallo,

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

Raus mit border="0" und cellspacing und cellpadding. Das sollte CSS jetzt für dich machen.

und dazu die css datei:

body,html

Warum schreibst du body und html klein und bei

A:link

'a' groß?

url(Pics/corner.bmp);}

Nimm lieber ein corner.jpg oder corner.gif oder noch besser ein corner.png

Mit freundlichen Grüßen

André

[wahsaga]

hi,

A:link        { text-decoration: none; color: #000000; }
A:visited     { text-decoration: none; color: #000000; }
A:hover       { text-decoration: none; color: #0000FF; }

text-decoration:none soll also offenbar für alle linkzustände zutreffen - dann schreib stattdessen
a { text-decoration: none; }
und gib bei den pseudoformaten nur noch die abweichenden werte (hier:color-angabe) an.

.TableT1      { height:100px; width:100px; }
.TableT3      { height:100px; width:100px; }

zwei klassen mit identischer formatierung -> _eine_ klasse.

.TableT2      { height:100%;               }
.TableT4      { height:100%;               }

dito.

.TableT5      { height:5px;   width:100px; background-image:url(Pics/line2.bmp) }
.TableT5      { height:5px;   width:100px; background-image:url(Pics/line2.bmp) }

zwei mal die gleiche formatierung für _eine_ klasse?
falls tippfehler: siehe oben.

gruss,
wahsaga