Garret: Anzeigefehler mit Firefox

Hallo,

Ich habe meine Webseite jetzt beinahe fertig gestellt, und habe nun angefangen sie für die wichtigesten Browser fehlerfrei zu machen.

Dabei bin ich nun an einem Toten punkt angelangt.
Folgendes:
Der folgende Code zeigt die "Registrieren/Login" seite.
Die Besteht aus einer Grafik die im Hintergrund angezeigt wird, und einer Tabelle in der die beiden Schaltflächen für den Login bzw. das registreiren stehen.

Beim IE (7) läuft die Seite 1A, beim Firefox dagegen wird die Tabelle mit den Schaltflächen linkbüdig angezeig, aber ich weiß nicht wie ich es unterbinden kann.

Hier der Code:
<html>
<link rel="STYLESHEET" href="../css/style.css" type="text/css">
<body class="hintern">

<div style="position:absolute; top:10px; left:50%; margin-left:-400px; z-index:1;">
<img src="../inc/pergament_transp.gif" style="width:800px; height:450px;">
</div>

<div style="position:absolute; top:150px; left:50%; margin-left:-90px; z-index:2;">
 <table border="0" width="180px" align="center"><tr><td valign="top">
 <table border="1" width="170px" bordercolor="#000000" bordercolordark="#FFFFFF" cols="1" align="center">

<tr><td>
 <center>
 <a href="./login/phx.php" class="text">Anmelden</a>
 </center>
 </td></tr>

<tr><td>
 <center>
 <a href="./login/reg.php" class="text">Registrieren</a>
 </center>
 </td></tr>

</table>
 </table>
</div>
</body>
</html>

  1. hi,

    Beim IE (7) läuft die Seite 1A, beim Firefox dagegen wird die Tabelle mit den Schaltflächen linkbüdig angezeig, aber ich weiß nicht wie ich es unterbinden kann.

    In dem du es mal vernünftig machst - </hilfe/faq.htm#css-zentrieren>

    <body class="hintern">

    Für'n Ar***, oder was?

    <div style="position:absolute; top:10px; left:50%; margin-left:-400px; z-index:1;">

    Formatierungen solltest du in ein externes Stylesheet auslagern.

    <table border="0" width="180px" align="center"><tr><td valign="top">

    Formatierungen solltest du ausschliesslich per CSS machen.

    <tr><td>
    <center>

    Formatierungen solltest du ausschliesslich per CSS machen.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. <div style="position:absolute; top:150px; right: 50%; left:50%; margin-left:-90px; z-index:2;">

      Das "right: 50%;" hat gefehlt! jetzt läufts :-)
      evt. lager ichs noch in meine externe css datei aus, aber da die formatierung mehr oder weniger nur für die seite gilt, und es ja jetzt geht, seh ich kaum ein grund mir mehr arbeit zu machen^^

      Aber danke für die schnelle Antwort!

  2. Hallo Garret,

    Das Problem wird vermutlich eher in deinem Stylesheet liegen, weil ohne dieses im Firefox die Tabelle rechts mit mittigen Texten angezeigt wird. Dennoch muesstest du deinen HTML-Code dringend ueberarbeiten. Du wuerdest dir auch einen Gefallen tun, wenn du Struktur und Darstellung strikt trennen wuerdest, schon der Uebersicht halber.

    <link rel="STYLESHEET" href="../css/style.css" type="text/css">

    Hier deklarierst du zwar ein Stylesheet, aber hier schliesst du erstmal den <head> nicht ab, sondern gehst gleich zum <body> ueber.

    <body class="hintern">
    <div style="position:absolute; top:10px; left:50%; margin-left:-400px; z-index:1;">

    Hier schreibst du den Style direkt in den Code, ebenso hier

    <div style="position:absolute; top:150px; left:50%; margin-left:-90px; z-index:2;">

    hier gibst du einer Tabelle die ungueltige Groessenangabe 180px

    <table border="0" width="180px" align="center"><tr><td valign="top">

    und hier zentrierst du mit <center>, das nebenbei bemerkt seit 1998 als veraltet gilt. Abgesehen davon dass Tabellen eigentlich nicht zum Layouten von Webseiten gedacht sind, koenntest du den gleichen Effekt durch align="center" im <td> erreichen. Der Validator zeigt noch eine ganze Reihe anderer Fehler an, insofern ist es eigentlich ein Gluecksfall, dass dein Code wenigstens einigermassen so angezeigt wird, wei du dir das gewuenscht hast.

    Am besten validierst du deinen Code erstmal, beseitigst die Fehler und kommst dann wieder mit dem Stylesheet im Schlepptau hierher.

    Gruß,

    Dieter

    1. »»Du wuerdest dir auch einen Gefallen tun, wenn du Struktur und Darstellung strikt trennen wuerdest, schon der Uebersicht halber.

      Mehr ode weniger, ich find den Code eigentlich relativ übersichtlich

      <link rel="STYLESHEET" href="../css/style.css" type="text/css">
      Hier deklarierst du zwar ein Stylesheet, aber hier schliesst du erstmal den <head> nicht ab, sondern gehst gleich zum <body> ueber.

      oh du hast recht, das hab ich komplett übersehen

      Hier schreibst du den Style direkt in den Code...

      Das ist eigentlich nur, weil ich keine perfekte lösung parat hatte und erst ausprobiert habe, und da fand ich die "erstmal alles in eine Datei" lösung am einfachsten. Außerdem würde die Formatierung mehr oder weniger nur für diese seite gelten, und ich wüsste nicht warum ich mir jetzt noch unnötige mehr mühe machen sollte, indem ich alles nochma etwas umschreibe/verschiebe (ist ja kein sicherheitsrisiko oder so)

      hier gibst du einer Tabelle die ungueltige Groessenangabe 180px

      <table border="0" width="180px" align="center"><tr><td valign="top">

      Wie ungültig? width="180px" ist doch eine ganz normale angabe? so hab ich in der Schule diese Jahr gelernt und es hat immer funktioniert :-/

      und hier zentrierst du mit <center>, das nebenbei bemerkt seit 1998 als veraltet gilt.

      aha, oha, naja, .. dafür funktioniert super einfach .... ich hoffe die moderne alternative besteht nicht aus einem dreimal so langem code ...

      Abgesehen davon dass Tabellen eigentlich nicht zum Layouten von Webseiten gedacht sind

      So hats mir google empfohlen :-o (in diesem falle)

      koenntest du den gleichen Effekt durch align="center" im <td> erreichen.

      stimmt ... das geht wohl unter "macht der gewohnheit" ^^

      Der Validator zeigt noch eine ganze Reihe anderer Fehler an, insofern ist es eigentlich ein Gluecksfall, dass dein Code wenigstens einigermassen so angezeigt wird, wie du dir das gewuenscht hast.

      hm, eigentlich wird er nach dem hinzufügen eines "right='50%'" nun in sämtlichen von mir getesten browser ganz genau so angezeigt wie ich es wollte

      Am besten validierst du deinen Code erstmal, beseitigst die Fehler und kommst dann wieder mit dem Stylesheet im Schlepptau hierher.

      Ahja, das werd ich mal ausprobieren :-)

      Das mit dem umpflanzen in meine exterme Stylesheet werd ich evt. mal machen.
      Allerdings läuft die seite ja jetzt so wie sie sollte in den wichtigesen Browsern (alle die ich getestet habe)

      1. Hallo Garret,

        Hier schreibst du den Style direkt in den Code...
        Das ist eigentlich nur, [...] umschreibe/verschiebe (ist ja kein sicherheitsrisiko oder so)

        Wenn du den Code in einer Datei haben willst, bietet sich das <style> Element an

        hier gibst du einer Tabelle die ungueltige Groessenangabe 180px

        <table border="0" width="180px" align="center"><tr><td valign="top">
        Wie ungültig? width="180px" ist doch eine ganz normale angabe?

        Es muss 180 heissen, px gibst es nur im style-Attribut. Ich habe auf die Schnelle keine Spezifikation, um das zu untermauern.

        und hier zentrierst du mit <center>, das nebenbei bemerkt seit 1998 als veraltet gilt.
        ich hoffe die moderne alternative besteht nicht aus einem dreimal so langem code ...

        td { text-align : center }

        Abgesehen davon dass Tabellen eigentlich nicht zum Layouten von Webseiten gedacht sind
        So hats mir google empfohlen :-o (in diesem falle)

        Das gleiche Tutorial, das auch <center> geschwaermt hat? ;-)

        hm, eigentlich wird er nach dem hinzufügen eines "right='50%'" nun in sämtlichen von mir getesten browser ganz genau so angezeigt wie ich es wollte

        div { margin: 150px auto 20px auto ) haette den gleichen Effekt gebat, jedenfalls bei den noch heute gebraeuchlichen Browsern

        Gruß,

        Dieter

        1. Hallo

          Wie ungültig? width="180px" ist doch eine ganz normale angabe?
          Es muss 180 heissen, px gibst es nur im style-Attribut. Ich habe auf die Schnelle keine Spezifikation, um das zu untermauern.

          Stimmt so, in HTML-Attributen zu Ausdehnungsangaben kann man nur Pixel- und Prozentwerte angeben. Wird _keine_ Maßeinheit angegeben, wird der Wert als Pixelwert interpretiert, Prozentwerte werden mit dem Prozentzeichen gekennzeichnet.

          div { margin: 150px auto 20px auto ) haette den gleichen Effekt gebat, jedenfalls bei den noch heute gebraeuchlichen Browsern

          Du zählst den MSIE 6 nicht zu den "noch heute gebraeuchlichen Browsern"?

          Tschö, Auge

          --
          Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
          (Victor Hugo)
          <dingdong /><dingdong /><toc /><toc /><toc /><shout>Florence!</shout>
          Veranstaltungsdatenbank Vdb 0.1
          1. Was koennte der den an margin:auto nicht?

            1. Hallo

              Was koennte der den an margin:auto nicht?

              Der MSIE < 7? Quasi alles. Vor Version 7 konnte der mit margin:auto; nicht um. Das ist doch aber eigentlich ein alter Hut.

              Tschö, Auge

              --
              Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
              (Victor Hugo)
              <dingdong /><dingdong /><toc /><toc /><toc /><shout>Florence!</shout>
              Veranstaltungsdatenbank Vdb 0.1
              1. hi,

                Was koennte der den an margin:auto nicht?

                Der MSIE < 7? Quasi alles. Vor Version 7 konnte der mit margin:auto; nicht um. Das ist doch aber eigentlich ein alter Hut.

                Natürlich konnte der IE 6, ausser du schickst ihn in den Quirks Mode. Das ist doch aber eigentlich ein alter Hut ...

                gruß,
                wahsaga

                --
                /voodoo.css:
                #GeorgeWBush { position:absolute; bottom:-6ft; }
                1. Hallo

                  Was koennte der den an margin:auto nicht?

                  Der MSIE < 7? Quasi alles. Vor Version 7 konnte der mit margin:auto; nicht um. Das ist doch aber eigentlich ein alter Hut.

                  Natürlich konnte der IE 6, ausser du schickst ihn in den Quirks Mode. Das ist doch aber eigentlich ein alter Hut ...

                  Jaja, schon geschnallt. *grummel*

                  Tschö, Auge

                  --
                  Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
                  (Victor Hugo)
                  <dingdong /><dingdong /><toc /><toc /><toc /><shout>Florence!</shout>
                  Veranstaltungsdatenbank Vdb 0.1
          2. Hallo Auge,

            Du zählst den MSIE 6 nicht zu den "noch heute gebraeuchlichen Browsern"?

            Natuerlich ist IE6 noch gebraeuchlich, aber im Standardsmode beherrscht er ja auch margin:auto problemlos.

            Gruß,

            Dieter

          3. Hi,

            Du zählst den MSIE 6 nicht zu den "noch heute gebraeuchlichen Browsern"?

            "noch heute gebräuchlich" mag auf den IE 6 zutreffen, aber "Browser"? ;-)

            cu,
            Andreas

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

              Du zählst den MSIE 6 nicht zu den "noch heute gebraeuchlichen Browsern"?

              "noch heute gebräuchlich" mag auf den IE 6 zutreffen, aber "Browser"? ;-)

              Hehe, so kann man das auch sehen. :-)

              Aber mal im ernst, solange es noch haufenweise Installationen von Windows unterhalb von XP gibt, wird der nicht verschwinden. Ich vermute mal, dass viele Firmen z.B. Win 2000 noch einige Zeit treu bleiben werden, womit dort ein Update auf IE 7 ausfällt.

              Tschö, Auge

              --
              Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
              (Victor Hugo)
              <dingdong /><dingdong /><toc /><toc /><toc /><shout>Florence!</shout>
              Veranstaltungsdatenbank Vdb 0.1
      2. Ich weiß nicht so recht in wie weit ich
        http://validator.w3.org/
        trauen kann, selbst bei Google meldet der sage und schreibe 46 Fehler o.O

        1. Hi,

          Ich weiß nicht so recht in wie weit ich
          http://validator.w3.org/
          trauen kann, selbst bei Google meldet der sage und schreibe 46 Fehler o.O

          Google liefert zwar meist Top-Suchergebnisse, hat aber offenbar kein Interesse an validem Code - na und? Solange es funktioniert... wenn mal ein Browser den Code nicht mehr frisst, wird halt nachgebessert.
          Die jetzigen Fehler resultieren aus unzulässigen Codeeinsparungen. Vielleicht liegt der Schwerpunkt auf Codereduzierung, solange das die Browser nicht übel nehmen?

          freundliche Grüße
          Ingo

        2. Ich weiß nicht so recht in wie weit ich
          http://validator.w3.org/
          trauen kann, selbst bei Google meldet der sage und schreibe 46 Fehler o.O

          Du kannst den Validator schon trauen. Webdesigner sind oft Laien in HTML und Co.
          Amazon >700 Fehler, ebay fast 300, t-online fast 200

          Struppi.

  3. Beim IE (7) läuft die Seite 1A, beim Firefox dagegen wird die Tabelle mit den Schaltflächen linkbüdig angezeig, aber ich weiß nicht wie ich es unterbinden kann.

    Das ist eine völlig falsche herangehensweise, erst in Browsern testen die weniger Fehler machen FF oder Opera und dann die Bugs des IEs ausmerzen.

    Hier der Code:
    <html>

    Da wird es schon schwierig, da deine Seite im Quirksmode ist, handelst du dir einen haufen Probleme ein, benutze einen vernüftigen DOCTYPE!

    <div style="position:absolute; top:10px; left:50%; margin-left:-400px; z-index:1;">

    und noch ein Tipp, absolut positionierte Elemente sollten eher die Ausnahme sein, zumal du dir es damit nur unnötig schwierig machst.

    Struppi.