Florian Schuetz: css, tabellen und firefox

Ich hab ein problem mit firefox, tabellen und css. Ich verwende

Mozilla/5.0 (Windows; U; Windows NT 5.1; de-DE; rv:1.7.5) Gecko/20041108 Firefox/1.0

unter windows.

ich hab folgende css datei:

[CODE]
/* This is the stylesheet for the screen media */

/* Global page settings */
body { background-color:#CCCFFF; }
p  { color:#000000; }

/* Page Layout */
.page   { background-color:#CCCFFF; }
table.page  { border:solid #000000 1px; width:90%; margin-left:5%; margin-right:5%; }
div.page  { align:center }

/* Menu layout */
.menu    { background-color:#666699; text-align:left; }
td.menu    { width:100pt; }

.submenu   { font-size:80%; }
*.submenu p   { text-indent:5pt; line-height:5pt; }

.subsubmenu   { font-size:60%; }
*.subsubmenu p  { text-indent:10pt; }

/* Data layout */
.data    { vertical-align:top; background-color:#FFFFFF;}
[/CODE]

und folgende html datei

[CODE]
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Put your title here</title>
  <meta name="DC.Title" content="OTHERLAND/index" />
  <meta name="DC.Creator" content="Florian Schuetz" />
  <meta name="DC.Subject" content="Personal Pages Home" />
  <meta name="DC.Description" content="The entry point for the personal pages of Florian Schuetz." />
  <meta name="DC.Publisher" content="Florian Schuetz" />
  <meta name="DC.Date" content="2005-01-02" />
  <meta name="DC.Type" content="Text" />
  <meta name="DC.Format" content="text/html" />
  <meta name="DC.Identifier" content="http://otherland.homelinux.com/personal" />
  <meta name="DC.Source" content="Design inspired by [URL]www.invisiblethings.org[/URL]" />
  <meta name="DC.Language" content="en" />
  <meta name="DC.Relation" content="Index" />
  <meta name="DC.Coverage" content="Worldwide" />
  <meta name="DC.Rights" content="All rights reserved" />
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Language" content="en-us" />
  <link type="text/css" rel="stylesheet" media="screen" href="screen_style.css" />
  <link type="text/css" rel="stylesheet" media="print, embosed" href="print_style.css" />
 </head>
 <body>
  <div class="page">
   <table class="page" cellspacing="0" cellpadding="10">
    <tr>
     <td class="menu" valign="top">
      <!-- MENU -->
      <p><a href="index.html">Home</a></p>
      <p><a href="about.html">About</a></p>
      <p><a href="papers.html">Papers</a></p>
      <p><a href="tools.html">Tools</a></p>
      <p><a href="misc.html">Misc</a></p>
      <p><a href="contact.html">Contact</a></p>
     </td>
     <td class="data">
      <!-- DATA -->
      <h1>Put your Data here</h1>
      <p>Do it.</p>
     </td>
    </tr>
   </table>
  </div>

<!-- This page is valid xhtml 1.0, so show it -->
  <p style="text-align:center;">
   <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88"
     style="border:none;" /> </a>
  </p>
 </body>
</html>

[/CODE]

das problem ist, dass bei der tabelle der rechte rand nur dann angezeigt wird, wenn das fenster klein genug ist damit mozilla eine scrollbar einblendet.  auch anzusehen unter

http://n.ethz.ch/student/fschuetz/template.html

Wie ich richtig vermutet habe, liegt das problem am background (weiss) des data teils. dieser scheint den ein pixel breiten rahmen zu überlappen, wenn keine scrollbar da ist (wieso nur dann?).das problem tritt sogar nur auf, wenn das browserfenster fullscreen ist und keine scrollbar hat. wenn ich dem .data einfach rechts einen rahmen gebe, wird der rahmen zwar angezeigt, aber der hintergrund geht noch einen pixel weiter. das sieht auch unschön aus. wie soll ich das lösen? unter ie wird alles korrekt angezeigt.

danke für die hilfe

  1. Hallo,
    meine Homepage sieht unter Firefox auch etwas anders aus. Er scheint irgendwo die Pixel etwas anders zu berechnen.

    Warum machst Du das so:
    <td class="menu" valign="top">
          <!-- MENU -->
          <p><a href="index.html">Home</a></p>

    ist das nicht besser so:
    <td class="menu" valign="top">
          <!-- MENU -->
          <td><a href="index.html">Home</a></td>

    Nur so als Vorschlag. Zudem wäre es nett,wenn Du die Tabelle (um die es hier geht) evtl. mit einen sichtbaren Rahmen ausstattest.
    luiggi

    1. hi,

      ist das nicht besser so:
      <td class="menu" valign="top">
            <!-- MENU -->
            <td><a href="index.html">Home</a></td>

      nein, natürlich nicht - td in td zu verschachteln, ist nicht korrekt.

      gruß,
      wahsaga

      --
      "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
  2. Hi,

    table.page  { border:solid #000000 1px; width:90%; margin-left:5%; margin-right:5%; }

    Deine Tabelle hat eine Gesamtbreite, die um 2px größer als der verfügbare Platz ist.
    Absicht?

    div.page  { align:center }

    align ist keine CSS-Eigenschaft.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Re

      table.page  { border:solid #000000 1px; width:90%; margin-left:5%; margin-right:5%; }

      Deine Tabelle hat eine Gesamtbreite, die um 2px größer als der verfügbare Platz ist.
      Absicht?

      wieso ist die 2px breiter? seh grad nicht wieso das so sein sollte (Absicht ist das sicher nicht)

      align ist keine CSS-Eigenschaft.

      jup, dann werd ich das dur text-align ersetzen müssen, richtig?

      danke

      flo

      1. Hi,

        table.page  { border:solid #000000 1px; width:90%; margin-left:5%; margin-right:5%; }
        Deine Tabelle hat eine Gesamtbreite, die um 2px größer als der verfügbare Platz ist.
        Absicht?
        wieso ist die 2px breiter? seh grad nicht wieso das so sein sollte (Absicht ist das sicher nicht)

        Weil 5% + 1px + 0 + 90% + 0 + 1px + 5% nunmal 100% + 2px sind.

        (ich setze mal voraus, daß padding für die Tabelle 0 ist, ansonsten erhöht sich der Wert natürlich entsprechend.

        align ist keine CSS-Eigenschaft.
        jup, dann werd ich das dur text-align ersetzen müssen, richtig?

        Wenn Du Text ausrichten willst, ja.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Ok, ich seh das problem. Ich habe die margins verwendet um die tabelle zentriert auszurichten. das verursacht dann das problem. ich hab nun gedacht ich könne die ganze tabelle einfach in ein div mit style="text-align:center" einpacken um die tabelle im browserfenster zu zentrieren. das geht aber nicht. wie zentriere ich denn jetzt die ganze  tabelle am besten ohne die margins?

          1. Hi,

            wie zentriere ich denn jetzt die ganze  tabelle am besten ohne die margins?

            Hm, wenn Du die sinnvollste Möglichkeit (margin:auto) ausschließt, vermutlich gar nicht.

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            1. auto, das wars. wusste nicht dass das zentriert. danke, mal wieder was gelernt und korrekt angezeigt wirds nun auch.

              1. hmmm, war wohl etwas voreilig, das problem tritt immer noch auf.

                1. Florian,

                  hmmm, war wohl etwas voreilig, das problem tritt immer noch auf.

                  In welchem Browser, in welchem Modus?
                  </archiv/2004/12/t97610/#m594216>

                  Gunnar

                  --
                  „Solang wir noch tanzen können
                  und richtig echte Tränen flennen,
                  ist noch alles offen,
                  ist noch alles drin.“
                  (Gundermann)
                  1. »»In welchem Browser, in welchem Modus?

                    In firefox, wie der posttitel und das erste post sagt. Ich hab das Problem mitlerweile gelöst. Ich hab die div's entfernt, den pagestyle direkt im body angegeben, die liniendicke von 1px auf thin gewechselt und die margin weggelassen, den tabellen hintergrund auf weiss gesetzt.
                    Hier mein funktionierendes Template, falls es interessiert:

                    Das css:

                    /* This is the stylesheet for the screen media */

                    /* Global page settings */
                    body { background-color:#CCCFFF; text-align:center;}
                    p  { color:#000000; }

                    /* Page Layout */
                    table.page  { border:solid thin #000000; width:90%; margin:auto; background-color:#FFFFFF; text-align:left;}

                    /* Menu layout */
                    .menu    { background-color:#666699; text-align:left; }
                    td.menu    { width:100pt; border-top:solid 1px #000000; border-bottom: solid 1px #000000; border-left: solid 1px #000000; }

                    .submenu   { font-size:80%; }
                    *.submenu p   { text-indent:5pt; line-height:5pt; }

                    .subsubmenu   { font-size:60%; }
                    *.subsubmenu p  { text-indent:10pt; }

                    /* Data layout */
                    .data    { vertical-align:top; }

                    das html:
                    <?xml version="1.0" ?>
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml">
                     <head>
                      <title>Put your title here</title>
                      <meta name="DC.Title" content="OTHERLAND/index" />
                      <meta name="DC.Creator" content="Florian Schuetz" />
                      <meta name="DC.Subject" content="Personal Pages Home" />
                      <meta name="DC.Description" content="The entry point for the personal pages of Florian Schuetz." />
                      <meta name="DC.Publisher" content="Florian Schuetz" />
                      <meta name="DC.Date" content="2005-01-02" />
                      <meta name="DC.Type" content="Text" />
                      <meta name="DC.Format" content="text/html" />
                      <meta name="DC.Identifier" content="http://otherland.homelinux.com/personal" />
                      <meta name="DC.Source" content="Design inspired by www.invisiblethings.org" />
                      <meta name="DC.Language" content="en" />
                      <meta name="DC.Relation" content="Index" />
                      <meta name="DC.Coverage" content="Worldwide" />
                      <meta name="DC.Rights" content="All rights reserved" />
                      <meta http-equiv="content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
                      <meta http-equiv="Content-Style-Type" content="text/css" />
                      <meta http-equiv="Content-Language" content="en-us" />
                      <link type="text/css" rel="stylesheet" media="screen" href="screen_style.css" />
                      <link type="text/css" rel="stylesheet" media="print, embosed" href="print_style.css" />
                     </head>
                     <body>
                      <table class="page" cellspacing="0" cellpadding="10">
                       <tr>
                        <td class="menu" valign="top">
                         <!-- MENU -->
                         <p><a href="index.html">Home</a></p>
                         <p><a href="about.html">About</a></p>
                         <p><a href="papers.html">Papers</a></p>
                         <p><a href="tools.html">Tools</a></p>
                         <p><a href="misc.html">Misc</a></p>
                         <p><a href="contact.html">Contact</a></p>
                        </td>
                        <td class="data">
                         <!-- DATA -->
                         <h1>Put your Data here</h1>
                         <p>Do it.</p>
                        </td>
                       </tr>
                      </table>

                    <!-- This page is valid xhtml 1.0, so show it -->
                      <p style="text-align:center;">
                       <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88"
                         style="border:none;" /> </a>
                      </p>
                     </body>
                    </html>