Peikert: Problem mit Tabellenbreite in Opera und Mozilla

Hallo,
ich benutze verschachtelte Blöcke und habe dummerweise nicht von Anfang an zentral den Style der Blöcke definiert. Nun werden Tabellen in Mozilla und Opera nur so groß, wie der Inhalt groß ist. Die Breite lässt sich nicht anders festlegen. (Der Bug geht sogar so weit, dass innerhalb einer Tabelle die Spaltenbreite variiert :). Dann habe ich doch zu jedem Block zentral einen Style festgelegt, der widht und heights enthält (jedoch mit den Werten Null). Damit funktioniert es dann bis auf eine Stelle. (in der Linken Navigation ist es bei der Schrift immernoch so, nicht jedoch beim Hintergrund !) Das Problem m uss jedoch Grundlegend gelöst werden. Wo ist der Fehler, ich finde ihn nicht ?

<HTML>
<HEAD>
   <meta http-equiv="Content-Type" content="text/html">
   <meta name="Author" content="Vincent Peikert">

<TITLE>Swiss Wafers AG</TITLE>
<link rel="stylesheet" type="text/css" href="./globalstyles.css">

<script language="JavaScript">
<!--

Wtag = "MoTuWeThFrSaSu";
function datum()
{
    var ndatum = new Date(),ntag = "",wert ="I";
    Wtag = "MoTuWeThFrSaSu";
    if (ndatum.getDay() == "0")

{Wtag="So. ";}else{Wtag=Wtag.slice((ndatum.getDay()*2-2),(ndatum.getDay()*2))+". ";}
    ntag = ndatum.getDate();
    if (ntag < 10){    Wtag=Wtag + "0"+ntag;}else{    Wtag=Wtag + ntag;}
    ntag = ndatum.getMonth()+1;
    if (ntag < 10){    Wtag=Wtag+"." + "0"+ntag;}else{    Wtag=Wtag+"." + ntag;}
    ntag = ndatum.getYear();ntag = ntag.toString();
    if (ntag.length ==4){ntag= ntag.slice(2,4)}else
    if (ntag.length ==3){ntag= ntag.slice(1,3)}
    Wtag = Wtag + "." + ntag.toString();
document.write("<TD height=0 width=0 bgcolor=#CC0033 class=standard align=center><font color=white><center><strong>"+Wtag+"</strong></center></font></TD> ");
}
//-->
</script>
</HEAD>

<body bgcolor="#FFFFFF" LINK="#4682B4" VLINK="#4682B4" ALINK="#4682B4" TOPMARGIN="15" LEFTMARGIN="10" MARGINWIDTH="10" MARGINHEIGHT="11">

<STYLE type="text/css"><!--
     #allthehead       { position: absolute; z-index: 3; top: 0px; left: 0px; width: 0; height: 0; }
     #holebody         { position: absolute; z-index: 3; top: 0px; left: 0px; width: 0; height: 0; }
     #alltheleftnavy   { position: absolute; z-index: 3; top: 0px; left: 0px; width: 0; height: 0; }
  #leftNavigation   { position: absolute; z-index: 3; top: 0px; left: 0px; width: 0; height: 0; }
  #leftnavigation   { position: absolute; z-index: 3; top: 0px; left: 0px; width: 0; height: 0; }
  -->
</style>

<div id="allthehead" style="position:absolute; top:5px; left:5px;" >

<!-- Logoline -->

<div id="logoline" style="position:absolute; top:5px; left:5px;">

<table width="625" height="71" cellspacing="1" cellpadding="0" border="0">
        <tr>

<td width="" height="90" BGCOLOR="#FFFFFF"><a href="index.php?mainnav=home"><img src="pictures/SwissWafersLogo.gif" border="0" height="93"></a></td>

</tr>
    </table>
    </div>
<!-- End Logoline -->

<!-- Mainnav -->
<div id="mainnav" style="position:absolute; top:115px; left:188px;">
  <table width="625" height="" cellspacing="1" cellpadding="0" border="0"><tr>

<td onmouseover="this.bgColor='#E5E5E5';" onmouseout="this.bgColor='#CC0033';" width="" height="" bgColor='#CC0033' align=center><a href="index.php?mainnav=home" target="_top"  class="navi"> home </font></a></td>

<td onmouseover="this.bgColor='#E5E5E5';" onmouseout="this.bgColor='#CC0033';" width="" height="" bgColor='#CC0033' align=center><a href="index.php?mainnav=products"  target="_top"  class="navi"> products </font></a></td>
     <td onmouseover="this.bgColor='#E5E5E5';" onmouseout="this.bgColor='#CC0033';" width="" height="" bgColor='#CC0033' align=center><a href="index.php?mainnav=cuttingservice"  target="_top"  class="navi"> cutting service </font></a></td>
     <td onmouseover="this.bgColor='#E5E5E5';" onmouseout="this.bgColor='#CC0033';" width="" height="" bgColor='#CC0033' align=center><a href="index.php?mainnav=customers"  target="_top"  class="navi"> customers </font></a></td>
     <td onmouseover="this.bgColor='#E5E5E5';" onmouseout="this.bgColor='#CC0033';" width="" height="" bgColor='#CC0033' align=center><a href="index.php?mainnav=news"  target="_top"  class="navi"> news </font></a></td>
     <td onmouseover="this.bgColor='#E5E5E5';" onmouseout="this.bgColor='#CC0033';" width="" height="" bgColor='#CC0033' align=center><a href="index.php?mainnav=jobs"  target="_top"  class="navi"> jobs </font></a></td>

<td onmouseover="this.bgColor='#E5E5E5';" onmouseout="this.bgColor='#CC0033';" width="" height="" bgColor='#CC0033' align=center><a href="index.php?mainnav=contact"  target="_top"  class="navi"> contact </font></a></td>
        <td  bgColor='#E5E5E5' align=center><a target="_top"  class="naviwo"> archive </font></a></td>

<script language="JavaScript" type="text/javascript">datum()</script>
    </td></tr></table>
  </div>
  <!-- End Mainnav -->

</table>
     </div>
<!-- end all the head -->

<!-- all the body -->
<div id="holebody" style="position:absolute; top:0px; left:10px;">

<!-- left-Navigation -->

<div id="alltheleftnavy" style="position:absolute; top:15px; left:0px;">

<div id="leftnavigationback" style="position:absolute; top:120px; left:0px;">
<TABLE  BORDER="0" cellspacing="0" CELLPADDING="0" height="500" width="160" topmargin="15" leftmargin="10" marginwidth="10" marginheight="15">

<TR>
    <TD width="160" valign="top" align="right" bgcolor="#E5E5E5" class="tdmenuleft">
   <td>
  </tr>
</table>
</div>

<div id="leftnavigation" style="position:absolute; top:200px; left:0px;">
<table CELLSPACING="0" CELLPADDING="0" border="0">

<tr><td align="right" height="10" width="155" style="padding-right:5px;" class="navVerticalActiveBackground"><a href="index.php?mainnav=archive&archivenav=" class="navVerticalActiveCaption"><b>history&nbsp;&nbsp;&nbsp;</b></a></td></tr>

<tr>
    <td align="right" height="10">
      &nbsp;<br>
    </td>
   </tr>
  </table>
  </div>

</div>

<!-- End left-Navigation -->

<!-- the real content of the site -->

<div id="therealcontent" style="position:absolute; top:140px; left:220px;">
   <TABLE align="center" BORDER="0" cellspacing="0" CELLPADDING="0" height="500" width="500" topmargin="15" leftmargin="10" marginwidth="10" marginheight="15">
     <TR>
      </TD>
      <TD width="406" valign="top" class="standard">&nbsp;<BR>
       <p class="Subheader"><b>history</b>
       <p>

<table cellspacing="0" cellpaddding="0" border="0" width="500">
         <tr>
          <td>
      Dummytext

<td>
        </tr>
     <tr>
         <td class="standard" align="right">
         <A href="javascript:window.scroll(1,1)" class="standard">top</A>

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

<!-- end the real content of the site -->

</TABLE>
</div>

<!-- end all the body -->
</body>
</HTML>

  1. hallo,

    ich benutze verschachtelte Blöcke

    Aha ... und was sind "Blöcke"? Es kann nicht jeder darauf kommen, daß du DIVs meinst.

    und habe dummerweise nicht von Anfang an zentral den Style der Blöcke definiert

    Dein Fehler. Aber wenn du ihn bereits kennst, warum behebst du ihn dann nicht?

    Nun werden Tabellen in Mozilla und Opera nur so groß, wie der Inhalt groß ist. Die Breite lässt sich nicht anders festlegen. (Der Bug geht sogar so weit

    Das ist kein "bug", die beiden zeigen dir lediglich exakt das, was du selber in deinem Code vorgegeben hast.

    Dann habe ich doch zu jedem Block zentral einen Style festgelegt

    Wo hast du das getan, und wie ist deine externe CSS eingebunden?

    der widht und heights enthält

    Dann kann das nicht funktionieren. CSS kennt zwar "width" und "height", aber deine "widht" und "heights" sind völlig undefiniert.

    "widht" und "heights"(jedoch mit den Werten Null)

    Ups? Du gibst zentral jeweils Werte von Null vor? Dann sei froh, daß CSS deine "widht" und "heights" nicht kennt, weil du sonst gar nix mehr angezeigt bekommen würdest.

    Das Problem m uss jedoch Grundlegend gelöst werden. Wo ist der Fehler

    Du setzt zwar CSS ein, machst das aber auf eine erschreckend inkonsequente Weise.

    Grüße aus Berlin

    Christoph S.

  2. Hallo,

    ich benutze verschachtelte Blöcke und habe dummerweise nicht von Anfang an zentral den Style der Blöcke definiert. Nun werden Tabellen in Mozilla und Opera nur so groß, wie der Inhalt groß ist.

    Falsch, man kann die Höhe einer Tabelle sehr wohl mittels Styleanweisungen angeben.

    Die Breite lässt sich nicht anders festlegen. (Der Bug geht sogar so weit, dass innerhalb einer Tabelle die Spaltenbreite variiert :).

    Das ist kein Bug, sondern absolut korrekt. Voller Bugs ist jedoch dein HTML.

    Vielleicht schickst du deinen Qullcode einmal an einen Validator wie z.B. http://www.validome.org/validate und korrigierst zuerst einmal _deine_ Fehler, bevor du sie gerade den Browsern anlastest, die im Gegensatz zum IE (fast) alles richtig machen.
    Es ist dir dringend zu raten, dich von Sachen wie <center> zu trennen, das ist ein Auslaufmodell. Ersetze dies durch CSS; "margin-left:auto; margin-right:auto" zentriert dir ein Blockelement in Opera, Mozilla, Firefox, Netscape usw., nur im ollen IE brauchst du als workaround ein "text-align:center" im übergeordneten Element (z.B. im body).

    Wenn es der IE verdauen würde, könntest du auch vollständig auf Tabellen verzichten, siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display, wobei mir dein source zu lang war um zu prüfen, ob du auch duch den konsequenten Einsatz von CSS auf Tabellen verzichten kannst. Vielleicht kannst du die Seite ja online zur Verfügung stellen, dann ist es für uns wesentlich leichter, deine Probleme nachzuvollziehen.

    cu,
    ziegenmelker

    1. hallo ziegenmelker,

      Falsch, man kann die Höhe einer Tabelle sehr wohl mittels Styleanweisungen angeben.

      Nein, gerade das kann man nicht.

      Vielleicht schickst du deinen Qullcode einmal an einen Validator

      Guter Hinweis.

      Wenn es der IE verdauen würde, könntest du auch vollständig auf Tabellen verzichten, siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

      Der IE legt keinen gesteigerten Wert auf Tabellen und unterscheidet sich darin nicht von vernünftigen Browsern.

      wobei mir dein source zu lang war um zu prüfen, ob du auch duch den konsequenten Einsatz von CSS auf Tabellen verzichten kannst.

      Er kann.

      Grüße aus Berlin

      Christoph S.

      1. Hallo Christoph,

        hallo ziegenmelker,

        Falsch, man kann die Höhe einer Tabelle sehr wohl mittels Styleanweisungen angeben.

        Nein, gerade das kann man nicht.

        Hast du dich oben verlesen? Selbstverständlich kann man das und alle 'main browser' stellen das auch richtig dar.

        Wenn es der IE verdauen würde, könntest du auch vollständig auf Tabellen verzichten, siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

        Der IE legt keinen gesteigerten Wert auf Tabellen und unterscheidet sich darin nicht von vernünftigen Browsern.

        Mir ging es hier um display:table/table-row/.../table-caption.
        "Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu display zur Verfügung. ... Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten."

        Grüße aus Mittelhessen,
        ziegenmelker

        1. morgens,

          man kann die Höhe einer Tabelle sehr wohl mittels Styleanweisungen angeben.
          Nein, gerade das kann man nicht.
          Hast du dich oben verlesen?

          Höchstwahrscheinlich habe ich mich nicht verlesen. Die Debatte, daß "nur" der IE Höhenangaben für eine Tabelle befolgt und die anderen nicht, hatten wir bereits des öfteren. Du kannst die Höhe einer Zeile festlegen, aber die Höhe einer Tabelle eben nicht.
          Und wenn es, wie im angeführten Beispiel, eine Tabelle ist, die sowieso in einem DIV liegt, haben die Höhen- bzw. Breitenangaben für dieses DIV auch noch einen gewissen "Mitsprachewert".

          Daß ich es für nicht sehr sinnvoll halte, "Tabelle in DIV" oder (schlimmer noch) "DIV in Tabelle" zu konstruieren, ist eine ganz andere Geschichte.

          Grüße aus Berlin

          Christoph S.

          1. moin,

            man kann die Höhe einer Tabelle sehr wohl mittels Styleanweisungen angeben.
            Nein, gerade das kann man nicht.
            Hast du dich oben verlesen?

            Höchstwahrscheinlich habe ich mich nicht verlesen. Die Debatte, daß "nur" der IE Höhenangaben für eine Tabelle befolgt und die anderen nicht, hatten wir bereits des öfteren.

            ok, hier wird klar, daß du dich doch verlesen hast. Ich sprach von CSS, nicht vom unzulässigen Attribut 'height'. Das ist ein kleiner feiner Unterschied.
            http://www.w3.org/TR/REC-CSS2/tables.html#height-layout

            Du kannst die Höhe einer Zeile festlegen, aber die Höhe einer Tabelle eben nicht.

            Siehe oben.

            Und wenn es, wie im angeführten Beispiel, eine Tabelle ist, die sowieso in einem DIV liegt, haben die Höhen- bzw. Breitenangaben für dieses DIV auch noch einen gewissen "Mitsprachewert".

            Zweifellos.

            Daß ich es für nicht sehr sinnvoll halte, "Tabelle in DIV" oder (schlimmer noch) "DIV in Tabelle" zu konstruieren, ist eine ganz andere Geschichte.

            Hehe, hier sind wir uns sicher einig.

            cu,
            ziegenmelker