Konrad L. M. Rudolph: Weder MSIE noch Opera kommen mit float klar?

Hallo Forum,

ich habe folgenden Code, der im Mozilla (in etwa) so aussieht, wie ich mir das vorstelle.
Im MSIE/Opera hingegend sind die Renderergebnisse vollkommen anders, in beiden Fällen aber katastrophal.
Mein Fehler oder Bugs? -- Wie läßt sich das (ohne Tabellen) umschiffen?

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

<html>
    <head>
        <title>--Catalyst--</title>
        <style type="text/css">
            dl {
                margin: 0 0 0.5em 1em;
            }
            /**{ border: 1px solid; }/**/
            dt {
                clear: left;
                float: left;
                margin: 0;
                text-transform: uppercase;
            }

dd {
                float: left;
                margin: 0 0 0.5em 0.5em;
                padding: 0;
            }

#picture { float: left; }
            #content { float: left; }
            .clearer { clear: both; }
        </style>
    </head>

<body>
        <div id="picture">
            <img src="img/pic_eddy.jpg" width="200" height="250" />
        </div>
        <div id="content">
            <dl>
                <dt>Full Name:</dt>
                <dd>Eduardo Pagnozzi de Siqueira</dd>

<dt>Nick:</dt>
                <dd>Eddie</dd>

<dt>Birthplace:</dt>
                <dd>Curitiba, Brazil</dd>

<dt>Equipment:</dt>
                <dd>
                    <dl>
                        <dt>Bass:</dt>
                        <dd>Aria Pro II STB Series</dd>

<dt>Amp:</dt>
                        <dd>60 Watt Hartke B600</dd>

<dt>Pedal:</dt>
                        <dd>BOSS MT-2 Metal Distorsion</dd>
                    </dl>
                </dd>
            </dl>
        </div>
        <div id="clearer"></div>
    </body>
</html>
///

Ich hatte mal ein ähnliches Problem und habe es dann irgendwann entnervt und zugunsten einer Tabelle aufgegeben, aber eigentlich muß es doch auch ohne gehen ...

(PS: ich weiß, eine Tabelle wäre hier von der Logik garnicht mal falsch, trotzdem ...)

Gruß,
KonRad -

--
"Was Gott zusammengeführt hat ..." :: polithink.org -
the politicultural e-zine :: http://www.polithink.org
  1. Hallo,

    Ich kann mir ungefaehr vorstellen, was Du erreichen willst,
    aber eine Online-Seite waere trotzdem sehr hilfreich,
    auch um die Bugs nachzuvollziehen.

    Mein Fehler oder Bugs? -- Wie läßt sich das (ohne Tabellen) umschiffen?

    float und margin sind heikel, egal, was die Leute behaupten...

    Und das nette Beispiel zur DL-Formatierung aus der CSS-Spec.
    http://www.w3.org/TR/REC-CSS2/visuren.html#compact
    funktioniert ja - wenn ueberhaupt - erst in wenigen Browsern.

    Ich erinnere mich vage an eine Diskussion hier im Forum,
    wo wir versuchten, etwas aehnliches in verschiedenen
    Browsern zum Funktionieren zu bringen. Erfolglos.

    Den Thread habe ich gefunden: </archiv/2003/11/64718/>

    Eventuell koennte man mit verschiedenen
    display-Eigenschaften rumspielen, z.B.
    display:block; display:inline-block; u.s.w.,
    aber eben, wahrscheinlich bringt das mit
    den aktuellen Browsern nicht viel...

    Ich hatte mal ein ähnliches Problem und habe es dann irgendwann entnervt und zugunsten einer Tabelle aufgegeben, aber eigentlich muß es doch auch ohne gehen ...

    Na dann, viel Spass - aber entnerve Dich nicht schon wieder.
    Es bringt nichts. ;-)

    (PS: ich weiß, eine Tabelle wäre hier von der Logik garnicht mal falsch, trotzdem ...)

    Ja, man koennte es geradesogut mit einer Tabelle machen,
    auch logisch/semantisch.
    <th> statt <dt>
    <td> statt <dd>

    Gruesse,

    Thomas

    --
    Dank /my/ automatisch ausgeblendet: JavaScript, ASP.
    Manuell "ausgeblendet": Threads mit Frames, Iframes und Scrollbalken im Subject...
    Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
    1. Ich kann mir ungefaehr vorstellen, was Du erreichen willst,
      aber eine Online-Seite waere trotzdem sehr hilfreich,

      ups, sorry, ich dachte es würde reichen das hier zu posten -- hatte noch nichts hochgeladen.

      Und das nette Beispiel zur DL-Formatierung aus der CSS-Spec.
      http://www.w3.org/TR/REC-CSS2/visuren.html#compact
      funktioniert ja - wenn ueberhaupt - erst in wenigen Browsern.

      Ah, nett, das. Aber die Site soll MSIE-kompatibel sein ;-)

      Ja, man koennte es geradesogut mit einer Tabelle machen,
      auch logisch/semantisch.
      <th> statt <dt>
      <td> statt <dd>

      ... und genau das mache ich jetzt einfach.
      Danke trotzdem.

      Gruß,
      KonRad -

      --
      "Was Gott zusammengeführt hat ..." :: polithink.org -
      the politicultural e-zine :: http://www.polithink.org
    2. Hallo.

      (PS: ich weiß, eine Tabelle wäre hier von der Logik garnicht mal falsch, trotzdem ...)

      Ja, man koennte es geradesogut mit einer Tabelle machen,
      auch logisch/semantisch.
      <th> statt <dt>
      <td> statt <dd>

      Das sehe ich anders, aber vielleicht hattest du die entsprechenden Diskussionen ja verfolgt.
      MfG, at

  2. Hi,

    da sind einige Fehler drin:

    1. margin: 0px 0px 0.5em 1em statt margin: 0 0 0.5em 1em;
    Nach jedem Wert muß eine Einheit angegeben werden

    2. /* und */ statt /** **/
    Keine Ahnung, ob das problematisch ist

    3. float
    ist nicht valide ohne Breitenangabe!

    1. Hallo,

      1. margin: 0px 0px 0.5em 1em statt margin: 0 0 0.5em 1em;
        Nach jedem Wert muß eine Einheit angegeben werden

      Quatsch. Bei Null nicht.
      http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
        "After the '0' length, the unit identifier is optional."

      Gruesse,

      Thomas

      --
      Dank /my/ automatisch ausgeblendet: JavaScript, ASP.
      Manuell "ausgeblendet": Threads mit Frames, Iframes und Scrollbalken im Subject...
      Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
      1. Sorry, werde ich mir merken.

        Aber das ist dann für mich trotzdem eine potentielle Fehlerquelle, wenn man 0 da stehen hat und später z.B. auf 1 ändert und dabei das Setzen der Einheit vergisst... Also dann lieber gleich alle Werte mit Einheit.

        1. Hi,

          Aber das ist dann für mich trotzdem eine potentielle Fehlerquelle, wenn man 0 da stehen hat und später z.B. auf 1 ändert und dabei das Setzen der Einheit vergisst...

          für mich (und jeden, für den Einheiten hier selbstverständlich sind) nicht. Ich finde '0' ist nicht nur kürzer, sondern auch prägnanter und wenn ich irgendwo den Wert 0 eintrage, weiß ich ja noch nicht unbedingt, welche Einheit ich vielleicht bei einer späteren Änderung verwenden werde...

          freundliche Grüße
          Ingo

          1. Hallo Ingo,

            Mhmmm...

            ...ich gebe meistens z.B. 0px 0px 10px 10px an und finde das, für mich persönlich, sinnvoll. Gerade während der Layout-Phase ändere ich die Werte mehrfach und bin, wenn es wirklich durchgehend eine Einheit ist, damit etwas schneller beim tippen ;)

            Freundlichen Gruß aus Kassel
            Danny

      1. float
        ist nicht valide ohne Breitenangabe!

      Im Ernst? Wieso das denn? Ich will ja eben gerade eine dynamisch Breite, also eine, die sich dem Content anpaßt.

      Gruß,
      KonRad -

      --
      "Was Gott zusammengeführt hat ..." :: polithink.org -
      the politicultural e-zine :: http://www.polithink.org
        1. float
          ist nicht valide ohne Breitenangabe!

        Im Ernst? Wieso das denn? Ich will ja eben gerade eine dynamisch Breite, also eine, die sich dem Content anpaßt.

        Finde ich übrigens auch nicht in den Specs und die Beispiele des W3C sind auch ohne Breitenangabe bei float: http://www.w3.org/TR/REC-CSS2/visuren.html#floats

        Gruß,
        KonRad -

        --
        "Was Gott zusammengeführt hat ..." :: polithink.org -
        the politicultural e-zine :: http://www.polithink.org
      1. Hallo,

        1. float
          ist nicht valide ohne Breitenangabe!
          Im Ernst?

        Ja, leider.
        http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float
          "Wenn Sie für ein Element eine Angabe zu float notieren,
          müssen Sie auch eine Angabe zu  width definieren."

        Glaubst Du nicht? OK, hier die Spec.:
        http://www.w3.org/TR/REC-CSS2/visuren.html#floats
          "A floated box must have an explicit width
          (assigned via the 'width' property, or its
          intrinsic width in the case of replaced elements)."

        Gruesse,

        Thomas

        --
        Dank /my/ automatisch ausgeblendet: JavaScript, ASP.
        Manuell "ausgeblendet": Threads mit Frames, Iframes und Scrollbalken im Subject...
        Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
        1. Glaubst Du nicht? OK, hier die Spec.:
          http://www.w3.org/TR/REC-CSS2/visuren.html#floats

          Hehe, bin ich blind, den gleichen Link habe ich ja weiter unten als Gegenbeweis gepostet. Hmm. Ist aber irritierend, daß deren eigene Beispiele nicht konform sind ...

          Gruß,
          KonRad -

          --
          "Was Gott zusammengeführt hat ..." :: polithink.org -
          the politicultural e-zine :: http://www.polithink.org
          1. Hi,

            Ist aber irritierend, daß deren eigene Beispiele nicht konform sind ...

            Vielleicht liegt's daran, dass dort Bilder gefloatet werden und bei denen ist die Breite ja quasi im Bild selbst deiniert, auch wenn man sie im HTML angeben kann (soll?). Trotzdem schreiben die ja, dass die Breite gefloateter Elemente immer imm CSS angegeben werden muss, wirklich komisch :D...

            MfG,
            Max.

          2. Hi,

            http://www.w3.org/TR/REC-CSS2/visuren.html#floats
            Hehe, bin ich blind, den gleichen Link habe ich ja weiter unten als Gegenbeweis gepostet. Hmm. Ist aber irritierend, daß deren eigene Beispiele nicht konform sind ...

            Wieso nicht konform? Ein Bild ist ein replaced Element und hat eine "intrinsic width".

            cu,
            Andreas

            --
            MudGuard? Siehe http://www.mud-guard.de/
      2. hi,

        Im Ernst? Wieso das denn? Ich will ja eben gerade eine dynamisch Breite, also eine, die sich dem Content anpaßt.

        dazu habe ich vor nicht allzu langer zeit hier auch mal einen thread gehabt, http://forum.de.selfhtml.org/archiv/2003/11/64871/#m369390.

        bei mir hat es in allen aktuellen browsern, in denen ich getestet habe, auch ohne angabe zur breite so "funktioniert", wie es gedacht war (lediglich opera 6 zeigte ein leicht abweichendes verhalten).

        gruss,
        wahsaga