Skaos: Tabelle Firefox

hallo
ich bin recht neu im dem Bereich Html und verusche mit einem Freund eine HP mit CSS zu schreiben
So nun habe ich eine Tabelle gemacht und dies positioniert mit hilfe von css
nur leider funktioniert des in firefox nicht er positioniert die überschriften richtig aber die Tabellen können nicht richtig positioniert werden
hier mal der Qullecote

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title></title>  
<meta name="author" content="Benjamin">  
<meta name="editor" content="html-editor phase 5">  
</head>  
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" background="Kessel2.jpg">  
<style type="text/css">  
  
p.weinschrift  
      {  
        font-style: italic;  
        font-weight: bold;  
        font-size:21pt;  
        text-align:center;  
        color:black;  
        width:800px;  
        height:300px;  
        /* fuer horizontale und vertikale zentrierung */  
        position: absolute;  
        left:50%;  
        margin-left:-870px;  /* Um die Hälfte der Breite nach links schieben */  
        top:50%;  
        margin-top:-220px;  /* Um die Hälfte der Höhe nach oben schieben */  
      }  
      p.wein  
      {  
        font-style: italic;  
        font-size:14pt;  
        text-align:left;  
        font-weight: bold;  
        color:black;  
        width:800px;  
        height:300px;  
        /* fuer horizontale und vertikale zentrierung */  
        position: absolute;  
        left:50%;  
        margin-left:-600px;  /* Um die Hälfte der Breite nach links schieben */  
        top:50%;  
        margin-top:-180px;  /* Um die Hälfte der Höhe nach oben schieben */  
      }  
  
  
      p.sektschrift  
      {  
        font-style: italic;  
        font-weight: bold;  
        font-size:21pt;  
        text-align:center;  
        color:black;  
        width:800px;  
        height:300px;  
        /* fuer horizontale und vertikale zentrierung */  
        position: absolute;  
        left:50%;  
        margin-left:-320px;  /* Um die Hälfte der Breite nach links schieben */  
        top:50%;  
        margin-top:-220px;  /* Um die Hälfte der Höhe nach oben schieben */  
      }  
  
      p.sekt  
      {  
        font-style: italic;  
        font-size:14pt;  
        text-align:left;  
        font-weight: bold;  
        color:black;  
        width:800px;  
        height:300px;  
        /* fuer horizontale und vertikale zentrierung */  
        position: absolute;  
        left:50%;  
        margin-left:00px;  /* Um die Hälfte der Breite nach links schieben */  
        top:50%;  
        margin-top:-180px;  /* Um die Hälfte der Höhe nach oben schieben */  
        }  
</Style>  
<p class=sektschrift>  
          Sekt  
 </p>  
 <p class=sekt>  
  
 <table width="50%" border="0" cellpadding="0" cellspacing="0">  
  <tr>  
   <td>Flasche Hausmarke</td>  
   <td>0,7 l</td>  
   <td>€ 15,00</td>  
  </tr>  
  <tr>  
   <td>Flasche Asti</td>  
   <td>0,7 l</td>  
   <td>€ 15,00</td>  
  </tr>  
  <tr>  
   <td>Piccolo</td>  
   <td>0,2 l</td>  
   <td>€ 4,50</td>  
  </tr>  
 </table>  
 </p>  
<p class=weinschrift>  
Weine  
</p>  
<p class=wein>  
  
<table width="50%" border="0" cellpadding="0" cellspacing="0">  
 <tr>  
  <td>Müller Thurgau</td>  
  <td>0,2 l</td>  
  <td>€ 2,10</td>  
 </tr>  
 <tr>  
  <td>Weißherbst</td>  
  <td>0,2 l</td>  
  <td>€ 2,80</td>  
 </tr>  
 <tr>  
  <td>Betschgräbler</td>  
  <td>0,2 l</td>  
  <td>€ 2,80</td>  
 </tr>  
 <tr>  
  <td>Müller Thurgau Schorle</td>  
  <td>0,2 l</td>  
  <td>€ 1,90</td>  
 </tr>  
 <tr>  
  <td>Weißherbstschorle</td>  
  <td>0,2 l</td>  
  <td>€ 2,10</td>  
 </tr>  
 <tr>  
  <td>Betschgräbler Schorle</td>  
  <td>0,2 l</td>  
  <td>€ 2,10</td>  
 </tr>  
 <tr>  
  <td>Dornfelder Rot</td>  
  <td>0,2 l</td>  
  <td>€ 2,80</td>  
 </tr>  
 <tr>  
  <td>Dornfelder Rot Schorle</td>  
  <td>0,2 l</td>  
  <td>€ 2,10</td>  
 </tr>  
</table>  
  
</p>  
</body>  
</html>

wäre net wenn mir einer tips geben könnte oder mir helfen kann
bringe mir gerade alles selber bei deshalb bin ich auf hilfe angewiesen
danke schon mal

  1. <p class=sektschrift>
              Sekt
    </p>

    Entferne dies und nutze das http://de.selfhtml.org/html/tabellen/umgebung.htm@title=caption-Element

    <p class=wein>

    Ein table-Element in einem p-Element ist nicht wirklich OK - du kannst die Klasse der Tabelle geben - oder darauf verzichte, ich nehme an die Tabellen sollen halbwegs einheitlich sein. Mit deiner Klassenwüste verspielst du sehr viele Vorteile von CSS.

    <table width="50%" border="0" cellpadding="0" cellspacing="0">
    </table>

    Entferne sämtliche attribute aus dem table-Element und nutze CSS zur Formatierung dieser - damit sparst du Code und hast mehr Möglichkeiten.

    selbriges gilt für das body-Element

    wäre net wenn mir einer tips geben könnte oder mir helfen kann

    Eine Tabelle ist ansich ein Block-Element - diese solltest du mit margin: 0 auto; zentrieren, position: absolute; ist selten eine gute Idee.

    Sei bitte so gut und entferne sämtliche für die Darstellung verantwortlichen Attribute (und dein bisheriges CSS) und stelle das ganze irgendwo als online-Beispiel zur Verfügung. Ebenso solltest du deinen DOCTYPE auf XHTML 1.0 Transitional (besser gleich Strict) umstellen. Da du hier weniger geneigt bist fehler zu machen.

    Wenn dein HTML-Dokument "fertig" ist (sprich die logische, vernünftige Struktur der Inhalte = Semantik), kümmere dich um die Formatierung.

    1. Hallo suit,

      <table width="50%" border="0" cellpadding="0" cellspacing="0">
      </table>

      Entferne sämtliche attribute aus dem table-Element und nutze CSS zur Formatierung dieser - damit sparst du Code und hast mehr Möglichkeiten.

      Für das CELLSPACING-Attribut gibt es, wenn man nicht gleichzeitig <http://de.selfhtml.org/css/eigenschaften/tabellen.htm#border_collapse@title=zusammenfallende Zellenbegrenzungslinien> haben will, nicht unbedingt eine http://de.selfhtml.org/css/eigenschaften/tabellen.htm#border_spacing@title=CSS-Alternative, die von jedem Browser interpretiert wird, den man vielleicht bedienen will.

      Gruß Gernot

      1. @@Gernot Back:

        nuqneH

        wenn man nicht gleichzeitig <http://de.selfhtml.org/css/eigenschaften/tabellen.htm#border_collapse@title=zusammenfallende Zellenbegrenzungslinien> haben will

        Ich wüsste nicht, warum man die nicht haben wollen würde. Das ist doch die verbreitete Art, Tabellen darzustellen.

        In CSS 2 wurde "collapse" auch als Defaultwert der 'border-collapse'-Eigenschaft spezifiziert. [CSS2 §17.6]

        Offenbar wollten einige Browserhersteller klüger sein als die Jungs beim W3C und haben auf die Spec geschissen. Das Resultat ist in CSS 2.1 zu sehen. [CSS21 §17.6]

        Qapla'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
  2. @@Skaos:

    nuqneH

    aber die Tabellen können nicht richtig positioniert werden

    ?? Was heißt „richtig“?

    <title></title>

    Das wird noch sinnvoll gefüllt?

    </Style>

    Auch wenn HTML 4 nicht case-sensitiv ist, bietet sich doch durchgängige Kleinschreibung von Element- und Attributbezeichnern an.

    <p class=sektschrift>

    Auch wenn HTML 4 die Anführungszeichen um Attributwerte nicht in jedem Fall verlangt, bietet es sich doch an, sie immer zu setzen.

    <tr>
       <td>Flasche Hausmarke</td>

    Das sieht doch sehr nach Kopfzelle aus, also 'th', nicht 'td'.

    <td>€ 15,00</td>

    Im Deutschen steht die Währungseinheit hinter der Zahl.

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    1. Hallo,

      <td>€ 15,00</td>
      Im Deutschen steht die Währungseinheit hinter der Zahl.

      im Fließtext schon; auf Rechnungen, Angeboten oder in Preislisten sieht man aber auch das Währungssymbol (oder auch EUR ausgeschrieben) vorangestellt.
      Alternativ: Gar kein Währungssymbol angeben, dafür an prominenter Stelle drüber- oder drunterschreiben: Alle Preisangaben in Euro.

      So long,
       Martin

      --
      Wer schläft, sündigt nicht.
      Wer vorher sündigt, schläft besser.
  3. Mahlzeit Skaos,

    zusätzlich zu dem bisher Gesagten:

    </head>
    <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" background="Kessel2.jpg">
    <style type="text/css">

    <http://de.selfhtml.org/html/referenz/elemente.htm#style@title=<style> darf nur im <head> vorkommen.>

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|