Siegmund: Darstellungsproblemchen

Hallo an alle,

ich habe ein Darstellungsproblem zwischen Firefox und IE 8.

Mit dem folgenden Script wird eine Tabelle mit zwei Spalten und zwei Reihen dargestellt. In der ersten Tabellen-Zelle wird eine Checkbox dargestellt, in der zweiten Zelle eine Überschrift. Die Zellenbreite der Checkbox soll nur so breit sein, dass die Checkbox dargestellt werden kann.
Sobald man jedoch die chekcbox anklickt, öffnet sich ein Menü, indem einige Buttons dargestellt werden -> die Zellenbreite wird also entsprechend größer dargestellt, sodass die Buttons sichtbar sind. Firefox macht soweit alles so, wie ich es haben will, der IE dagegen reisst die Zellenbreite ca. doppelt so weit auf, wie eigentlich notwendig. Folgend der code zum nachvollziehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Muster</title>
<script type="text/javascript">
function menue(chk)
         {
         var fs = document.getElementById('menue_' + chk.id);
         fs.style.display = (chk.checked) ? '' : 'none';
         }
</script>
</head>
<body bgcolor="#FFFF99">
<form action="test.php" method="POST">
<table style="width:98%;height:95%;background:black" border="1" cellpadding=0 cellspacing=0><tr style="height:25;">
<td style="width:10;">
<?PHP
$main=$_POST["main"];
if ($main=="")
   {
   $main="ja";
   }
echo"<input type="checkbox" id="a1" name="main" value="ja" onclick="menue(this);" ";
if ($main=="ja")
   {
   echo"checked=checked";
   }
echo"></td><td align="center"><font color=white>Headline</font></td></tr><tr><td valign="top" align="center">";
echo"<fieldset id="menue_a1" style="border:0; ";
if ($main=="nein")
   {
   echo"display:none;";
   }
echo""><font color=white>Menü</font>";
$x="1";
while ($x<="9")
      {
      echo"<hr><input type="submit" name="$x" value="Button_$x" style="width:120;">";
      $x++;
      }
echo"<hr></fieldset>";
echo"</td><td style="background:#CCCCCC;" valign="top" align="center">";
echo"<iframe src="inhalt.php" frameborder="0" style="width:100%;height:100%;"></iframe></td></tr>";
?>
</table></form>
</body>
</html>

Am <hr> zwischen den Buttons liegt es nicht, ich hatte es auch mal mit nur <br> getestet.

Wie kann ich es also anstellen, dass der IE nur die Breite darstellt, die man benötigt, um die Buttons darzustellen und nicht links un rechts noch 200 Pixel mehr angezeigt werden?

Freue mich über konstruktive Ratschläge

Siegmund

  1. Freue mich über konstruktive Ratschläge

    Du hast ein clientseitiges Problem?
    Dann poste clientseitigen Code.
    PHP Code interessiert in dem Kontext nicht.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Ihr meint den Quellcode des Browsers...?:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

      <html>
      <head>
      <title>Muster</title>
      <script type="text/javascript">
      function menue(chk)
               {
               var fs = document.getElementById('menue_' + chk.id);
               fs.style.display = (chk.checked) ? '' : 'none';
               }
      </script>
      </head>

      <body bgcolor="#FFFF99">
      <form action="test.php" method="POST">
      <table style="width:98%;height:95%;background:black" border="1" cellpadding=0 cellspacing=0><tr style="height:25;">
      <td style="width:10;">

      <input type="checkbox" id="a1" name="main" value="ja" onclick="menue(this);" checked=checked></td><td align="center"><font color=white>Headline</font></td></tr><tr><td valign="top" align="center"><fieldset id="menue_a1" style="border:0; "><font color=white>Menü</font><br><br><input type="submit" name="1" value="Button_1" style="width:120;"><br><br><input type="submit" name="2" value="Button_2" style="width:120;"><br><br><input type="submit" name="3" value="Button_3" style="width:120;"><br><br><input type="submit" name="4" value="Button_4" style="width:120;"><br><br><input type="submit" name="5" value="Button_5" style="width:120;"><br><br><input type="submit" name="6" value="Button_6" style="width:120;"><br><br><input type="submit" name="7" value="Button_7" style="width:120;"><br><br><input type="submit" name="8" value="Button_8" style="width:120;"><br><br><input type="submit" name="9" value="Button_9" style="width:120;"><br></fieldset></td><td style="background:#CCCCCC;" valign="top" align="center"><iframe src="inhalt.php" frameborder="0" style="width:100%;height:100%;"></iframe></td></tr></table></form>
      </body>
      </html>

      1. 'ǝɯɐu$ ıɥ

        Ihr meint den Quellcode des Browsers...?:

        WOW, ich hätte gedacht der Sourcecode DES Browsers wäre umfangreicher.

        *SCNR*

        ssnɹƃ
        ʍopɐɥs

        --
        I like children. If they're properly cooked.
        - W.C. Fields
        1. Hallo,

          Ihr meint den Quellcode des Browsers...?:
          WOW, ich hätte gedacht der Sourcecode DES Browsers wäre umfangreicher.

          ja, ausgeklügelte Kompressionsalgorithmen wirken Wunder! :-)

          Ciao,
           Martin

          --
          Lebensmotto der Egoisten:
          Was ist so schlimm daran, dass jeder nur an sich selbst denkt? Dann ist doch an alle gedacht!
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

        ...
        <td valign="top" align="center">
        <fieldset id="menue_a1" style="border:0; ">
        <font color=white>Menü</font><br><br>
        <input type="submit" name="1" value="Button_1" style="width:120;">
        ...
        </fieldset></td>

        Es wäre nett, wenn du den Code auch etwas formatierst, wenn du hilfe willst.

        Schick den Code durch den Valigator.
        http://validator.w3.org/#validate_by_input+with_options
        Abgesehen davon, dass das ein ausgegrabenes Gespenst aus dem vorletzten Jahrhundert ist, hat es da Fehler drin.

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. Schick den Code durch den Valigator.
          http://validator.w3.org/#validate_by_input+with_options
          Abgesehen davon, dass das ein ausgegrabenes Gespenst aus dem vorletzten Jahrhundert ist, hat es da Fehler drin.

          Hallo,

          Sorry, aber auch der validator hilft mir nicht wirklich weiter.
          Ich habe den code jetzt nochmal mit all den Tipps überarbeitet und es bleibt immer noch ein waren Scheunentor, was mir der IE da anzeigt:
          [...
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

          <html>
          <head>
          <title>Muster</title>
          <script type="text/javascript">
          function menue(chk)
                   {
                   var fs = document.getElementById('menue_' + chk.id);
                   fs.style.display = (chk.checked) ? '' : 'none';
                   }
          </script>
          </head>

          <body bgcolor="#FFFF99">
          <table style="width:98%;height:95%;background:black" border="1" cellpadding="0" cellspacing="0">
             <tr style="height:25px;">
                <td style="width:10px;">
                   <input type="checkbox" id="a1" name="main" value="ja" onclick="menue(this);" checked="checked">
                </td>
                <td align="center">
                   <font color="white">Headline</font>
                </td>
             </tr>
             <tr>
                <td valign="top" align="center">
                   <fieldset id="menue_a1" style="border:0"><font style="color:white;">Men&uuml;</font>
                      <br><br>
                      <input type="submit" name="1" value="Button_1" style="width:120px;">
                      <br><br>
                      <input type="submit" name="2" value="Button_2" style="width:120px;">
                      <br><br>
                      <input type="submit" name="3" value="Button_3" style="width:120px;">
                      <br><br>
                      <input type="submit" name="4" value="Button_4" style="width:120px;">
                      <br><br>
                   </fieldset>
                </td>
                <td style="background:#CCCCCC;" valign="top" align="center">INHALT</td>
             </tr>
          </table>
          </body>
          </html>
          ...]

          Die zwei Fehler die mir der validator ausgibt kann ich nicht nachvollziehen.

          Vielleicht habt ihr noch mal einen Winl mit dem Zaunpfahl für mich?

          Gruß

          Siegmund

          1. Die zwei Fehler die mir der validator ausgibt kann ich nicht nachvollziehen.

            Welche?

            Vielleicht habt ihr noch mal einen Winl mit dem Zaunpfahl für mich?

            Sind die Zaunpfähle des Validators nicht groß genug?

            1. Sind die Zaunpfähle des Validators nicht groß genug?

              NEIN - sont würde ich hier doch nicht nochmal schreiben.

              1. Fehler:
              …dset id="menue_a1" style="border:0"><font style="color:white;">Men&uuml;</font>

              dem validator gefällt das Zeichen '>' nach 'color:white;"' nicht.

              2. Fehler:
               </fieldset>

              dem validator gefällt das Zeichen '>' nicht.

              Ich bin den kompletten Code nochmal durch gegangen und konnte keinerlei Fehler feststellen - bin aber gerne eines besseren Belehrbar.

              DANKE

              Siegmund

              1. Hi,

                dem validator gefällt das Zeichen '>' nach 'color:white;"' nicht.

                Jetzt wissen wir zwar, wo das Problem auftritt. Aber da Du die Fehlermeldung verschweigst, wissen wir immer noch nicht, welches Problem.

                cu,
                Andreas

                --
                Warum nennt sich Andreas hier MudGuard?
                O o ostern ...
                Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
                1. Fehler:
                  …dset id="menue_a1" style="border:0"><font style="color:white;">Men&uuml;</font>

                dem validator gefällt das Zeichen '>' nach 'color:white;"' nicht.

                1. Fehler:
                  </fieldset>

                dem validator gefällt das Zeichen '>' nicht.

                Die Fehlermeldung ist das hier:

                Line 27, Column 77: start tag for "LEGEND" omitted, but its declaration does not permit this

                In beiden Fällen bemängelt der Validator keineswegs das genannte Zeichen - diese nich ganz klare Fehlermeldung ist schlichtweg ein Folgefehler, weil du einfach ein fieldset-Element notierst, welches "einfach so" existiert, ohne dass es dafür ein form-Element gäbe.

                1. Hi,

                  Die Fehlermeldung ist das hier:
                  Line 27, Column 77: start tag for "LEGEND" omitted, but its declaration does not permit this

                  In beiden Fällen bemängelt der Validator keineswegs das genannte Zeichen - diese nich ganz klare Fehlermeldung ist schlichtweg ein Folgefehler, weil du einfach ein fieldset-Element notierst, welches "einfach so" existiert, ohne dass es dafür ein form-Element gäbe.

                  Falsch. Diese Fehlermeldung sagt sehr genau aus, was das Problem ist - und es ist NICHT ein fehlendes form-Element um das fieldset, sondern es ist das fehlende legend-Element IM fieldset.

                  cu,
                  Andreas

                  --
                  Warum nennt sich Andreas hier MudGuard?
                  O o ostern ...
                  Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
                  1. Falsch. Diese Fehlermeldung sagt sehr genau aus, was das Problem ist - und es ist NICHT ein fehlendes form-Element um das fieldset, sondern es ist das fehlende legend-Element IM fieldset.

                    Punkt für dich.

                    1. So, Mittagspause vorbei.

                      Ich habe jetzt innerhalb des <fieldset> ein <legend> eingebaut und die Fehler vom validator sind verschwunden - wunderbar und vielen Dank für den Hinweis.

                      Ich war bisher der Meinung, dass wenn man keinen Inhalt in Legend haben möchte, man diesen konpletten TAG weg lassen kann - wieder was gelernt.

                      Dennoch hat das ganze mein Problem nicht gelöst.

                      'Gunnar Bittersmann' hat auf meien erste Zeile verwiesen und mir netterweise einen Link dazu gegeben. Aus dem ging hervor, dass man den 'Quirks Mode' verhindern sollte. Demnach ergab sich aus meiner ersten Zeile folgende:

                      voher:
                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

                      nachher:
                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">

                      Das Ergebnis ist nun so, dass meine Table nicht mehr eine Höhe von 95% hat - wie ich es eigentlich gerne hätte, sondern nur noch die Höhe des darzustellenden bereichs hat. Das ist nicht gewollt.

                      Jetzt seit Ihr wieder dran...

                      Gebt mir ein Stichwort und ich versuche das Rätsel zu lösen ;)

                      Vielen Dank

                      Siegmund

                      1. Hi,

                        Das Ergebnis ist nun so, dass meine Table nicht mehr eine Höhe von 95% hat - wie ich es eigentlich gerne hätte, sondern nur noch die Höhe des darzustellenden bereichs hat. Das ist nicht gewollt.

                        Jetzt seit Ihr wieder dran...

                        Nein, Du bist noch dran. Warum das so ist, habe ich bereits vor langer Zeit in diesem Thread geschrieben.

                        cu,
                        Andreas

                        --
                        Warum nennt sich Andreas hier MudGuard?
                        O o ostern ...
                        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
                        1. Hallo Mudguard

                          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

                          » Wieso verwendest Du HTML 4.0 statt des üblicheren 4.01?

                          Du meinst sicherlich diese Aussage.
                          Nachdem ich irgendwann später mal...
                          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                          ...draus gemacht habe wurde ich hier auch gesteinigt.

                          Und selbst wenn ich mit diesen sehr, sehr dürftigen Informationen jetzt folgende Zeile nutze:

                          <!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" xml:lang="de" lang="de">

                          Komme ich der Lösung meines Problems NULL entgegen.

                          :(

                          1. Hi,

                            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

                            » Wieso verwendest Du HTML 4.0 statt des üblicheren 4.01?

                            Du meinst sicherlich diese Aussage.

                            Nein, ich meinte die Aussage, die ich zur prozentualen Höhe gemacht habe.

                            cu,
                            Andreas

                            --
                            Warum nennt sich Andreas hier MudGuard?
                            O o ostern ...
                            Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
                            1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
                              <html>

                              <head>
                              <title>Muster</title>
                              <script type="text/javascript">
                              function menue(chk)
                                       {
                                       var fs = document.getElementById('menue_' + chk.id);
                                       fs.style.display = (chk.checked) ? '' : 'none';
                                       }
                              </script>
                              </head>

                              <body bgcolor="#FFFF99">
                              <table style="width:98%;height:95%;background:black" border="1" cellpadding="0" cellspacing="0">
                                 <tr style="height:25px;">
                                    <td style="width:10px;">
                                       <input type="checkbox" id="a1" name="main" value="ja" onclick="menue(this);" checked="checked"></input>
                                    </td>
                                    <td align="center">
                                       <font color="white">Headline</font>
                                    </td>
                                 </tr>
                                 <tr>
                                    <td valign="top" align="center">
                                       <fieldset id="menue_a1" style="border:0">
                                          <legend>Muster</legend>
                                          <font style="color:white;">Men&uuml;</font>
                                          <br></br>
                                          <input type="submit" name="1" value="Button_1" style="width:120px;"></input>
                                          <br></br>
                                          <input type="submit" name="2" value="Button_2" style="width:120px;"></input>
                                          <br></br>
                                          <input type="submit" name="3" value="Button_3" style="width:120px;"></input>
                                          <br></br>
                                          <input type="submit" name="4" value="Button_4" style="width:120px;"></input>
                                          <br></br>
                                       </fieldset>
                                    </td>
                                    <td style="background:#CCCCCC;" valign="top" align="center">INHALT</td>
                                 </tr>
                              </table>
                              </body>
                              </html>

                              1. 'ǝɯɐu$ ıɥ

                                [ Zitat # 1912 ]

                                ssnɹƃ
                                ʍopɐɥs

                                --
                                I like children. If they're properly cooked.
                                - W.C. Fields
                                1. Hi!

                                  Ja, my!

                                  [ Zitat # 1912 ]

                                  Ich habe Deins mal geklaut;-)

                                  off:PP

                                  --
                                  "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
                      2. Mahlzeit Siegmund,

                        voher:
                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

                        nachher:
                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">

                        Mensch, da bist Du Deiner Zeit aber *weeeeeiiiiiiiiiit* voraus.

                        Jetzt seit Ihr wieder dran...

                        Nein, Du bist dran. Und zwar damit: <http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Dokumenttyp-Deklaration verstehen>.

                        MfG,
                        EKKi

                        --
                        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
                        1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">
                          Mensch, da bist Du Deiner Zeit aber *weeeeeiiiiiiiiiit* voraus.

                          Der Buchstabe X hat eine schon fast unheimliche magische Wirkung auf die Menschen.
                          Egal wie viele Teufel. Hauptsache es gibt einen XTeufel.

                          mfg Beat

                          --
                          ><o(((°>           ><o(((°>
                             <°)))o><                     ><o(((°>o
                          Der Valigator leibt diese Fische
                      3. Hallo,

                        voher:
                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

                        das ist ein gültiger DOCTYPE, aber einer, der den Quirks Mode auslöst (DTD fehlt).

                        nachher:
                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">

                        Das ist ein ungültiger DOCTYPE. Es gibt kein XHTML 4.01.

                        Ciao,
                         Martin

                        --
                        "So schnell waren wir noch nie am Unfallort", sagte der Polizist zu seinem Kollegen, als er einen Laternenmast gerammt hatte.
                        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                      4. @@Siegmund:

                        nuqneH

                        voher:
                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

                        nachher:
                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">

                        Von der falschen Versionsnummer abgesehen: Die DOCTYPE-Angabe dient nicht dazu, irgendwas draufzuschreiben, was gar nicht drin ist.

                        Das heißt: Nicht XHTML draufschreiben, wo kein XHTML drin ist! Verwende einen HTML-4.01-DOCTYPE, wenn du HTML 4.01 schreibst. Oder schreib auch XTHML.

                        Der Validator sollte dich auf die Unterschiede zwischen HTML und XHTML hinweisen. http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=SELFHTML auch.

                        Qapla'

                        --
                        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                        (Mark Twain)
                        1. Das heißt: Nicht XHTML draufschreiben, wo kein XHTML drin ist! Verwende einen HTML-4.01-DOCTYPE, wenn du HTML 4.01 schreibst. Oder schreib auch XTHML.

                          Der Validator sollte dich auf die Unterschiede zwischen HTML und XHTML hinweisen. http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=SELFHTML auch.

                          Ahh... vielen Dank für diesen Link, danach wollte ich gerade fragen.

                          Ich lese mir den kurzen Text ;) mal eben durch und melde mich dann sehr wahrscheinlich bald wieder.

                          Danke aber - wirklich

                          Gruß Siegmund

              2. Ich bin den kompletten Code nochmal durch gegangen und konnte keinerlei Fehler feststellen - bin aber gerne eines besseren Belehrbar.

                Studiere die Regeln zu fieldset.

                mfg Beat

                --
                ><o(((°>           ><o(((°>
                   <°)))o><                     ><o(((°>o
                Der Valigator leibt diese Fische
          2. @@Siegmund:

            nuqneH

            Ich habe den code jetzt nochmal mit all den Tipps überarbeitet […]

            Wirklich alle?

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

            Wohl kaum.

            Wenn man IE in den Quirksmodus schickt, sollte man sich nicht über Darstellungsunterschiede gegenüber standardkonformen Browsern wundern.

            Erst IE in den standardkonformen Modus versetzen, dann weitersehen!

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
      3. Hi,

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

        Wieso verwendest Du HTML 4.0 statt des üblicheren 4.01?

        <table style="width:98%;height:95%;background:black" border="1" cellpadding=0 cellspacing=0>

        Da für das übergeordnete Element keine Höhe angegeben ist, ist height damit auf auto gesetzt.

        <tr style="height:25;">

        25 Ameisenbeindurchmesser oder 25 Elefantenrüssellängen?
        Ohne Einheit ist der Wert ungültig und muß ignoriert werden.

        Sorge also erstmal für korrekten Code, bevor Du über Darstellungsprobleme auch nur nachdenkst.

        <td style="width:10;">

        same here ...

        <input type="checkbox" id="a1" name="main" value="ja" onclick="menue(this);" checked=checked></td><td align="center"><font color=white>Headline</font></td></tr><tr><td valign="top" align="center">

        Das Gewusel guck ich nicht näher an - Du solltest bei der Ausgabe an sinnvollen Stellen Leerzeichen und Zeilenumbrüche einbauen.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
  2. @@Siegmund:

    nuqneH

    Folgend der code zum nachvollziehen:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    Aha, Quirksmodus. Vermeide diesen! [Jendryschik]

    <?PHP
    $main=$_POST["main"];

    Nein, das ist kein Code zum Nachvollziehen. Du hast ein clientseitiges Problem, dabei ist serverseitiger Cor irrelevant.

    Post den generierten HTML-Code. Noch besser: Verlinke deine Seite! [ZITAT1632]

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)