Novi: Table in fieldset in Verbindung mit float

Hallo,

ich habe ein CSS-Problem in meiner Website, dass ich mal auf folgendes Code-Beispiel vereinfacht habe:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
</head>  
<body>  
<div style='border: 1px solid lime; float: right; width: 80%;'>  
Test  
</div>  
<fieldset>  
<table>  
<tr><td>LongLongLong  
</table>  
</fieldset>  
  
<br style='clear: both;'>  
  
<div style='border: 1px solid lime; float: right; width: 80%;'>  
Test  
</div>  
<fieldset>  
<table>  
<tr><td>LongLongLong  
</table>  
</fieldset>  
  
  
<br style='clear: both;'>  
  
<div style='border: 1px solid lime; float: right; width: 80%;'>  
Test  
</div>  
<fieldset>  
<table>  
<tr><td>Short  
</table>  
</fieldset>  
  
</body>  
</html>

In Chrome und Safari erhalte ich den gewünschten Effekt:
richtig

Firefox "scheitert" am ersten Beispiel:
fast richtig

Sowohl Opera als auch IE vergrößern das fieldset nicht:
geht nicht

Ich kann mir das Verhalten von Opera nicht erklären.

Viele Grüße Novi

--
"(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)
  1. Hi!

    Warum die Tabelle? Label-, input- und textarea-Elemente mit entsprechendem CSS reichen doch aus.

    off:PP

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

      die Tabelle wir da von TinyMCE eingefügt.

      Viele Grüße Novi

      --
      "(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)
      1. Hi!

        die Tabelle wir da von TinyMCE eingefügt.

        Mhm erinnert mich an Zitat 1210

        off:PP

        --
        "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
        1. Hi!

          Als Nachtrag: WYSIWYG-Editoren können durchaus hifreich sein, aber man muß sich ihnen nicht unterwerfen - Formulare kann man durchaus auch anders gestalten.

          off:PP

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

            Als Nachtrag: WYSIWYG-Editoren können durchaus hifreich sein, aber man muß sich ihnen nicht unterwerfen - Formulare kann man durchaus auch anders gestalten.

            Gut Herr Schlaumeier, wie würden sie es denn machen? Rätst du mir jetzt TinyMCE umzuschreiben, damit sodass es für die Toolbar keine Tabellen mehr verwendet oder wie?

            Viele Grüße Novi

            --
            "(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)
            1. Hi!

              Als Nachtrag: WYSIWYG-Editoren können durchaus hifreich sein, aber man muß sich ihnen nicht unterwerfen - Formulare kann man durchaus auch anders gestalten.

              Gut Herr Schlaumeier,

              Ich überlese das mal.

              wie würden sie es denn machen? Rätst du mir jetzt TinyMCE umzuschreiben, damit sodass es für die Toolbar keine Tabellen mehr verwendet oder wie?

              Wenn Du Zeit und Lust hast, halte ich Dich nicht davon ab.

              Erstelle das Formular doch einfach - mit Hilfsmitteln (Scripte/$whatever) oder manuell - als HTML. AFAIK hat TinyMCE eine Quellcode-Ansicht, oder?

              off:PP

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

                Ich überlese das mal.

                Gut

                Erstelle das Formular doch einfach - mit Hilfsmitteln (Scripte/$whatever) oder manuell - als HTML.

                Ich verstehe nicht wo drauf du hinaus willst.

                AFAIK hat TinyMCE eine Quellcode-Ansicht, oder?

                TinyMCE hat eine Quellcode-Ansicht. Aber wie soll mir das bei meinem Problem helfen, dass der Editor selbst aus Tabellen aufgebaut ist?

                Viele Grüße Novi
                --
                "(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)

                Viele Grüße Novi

                --
                "(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)
                1. Hi!

                  TinyMCE hat eine Quellcode-Ansicht. Aber wie soll mir das bei meinem Problem helfen, dass der Editor selbst aus Tabellen aufgebaut ist?

                  Nun habe ich es auch kapiert - es geht hier um den Editor selbst.
                  Sorry: ich sollte wirklich aufmerksamer lesen!

                  off:PP

                  --
                  "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
  2. Grüße dich, Peter Pan

    ich habe ein CSS-Problem in meiner Website, dass ich mal auf folgendes Code-Beispiel vereinfacht habe:

    Lobenswert.

    Ich kann mir das Verhalten von Opera nicht erklären.

    Ich schon. Es wird dich nicht freuen, aber alle Varianten (außer dem einen Fehler vom Firefox) sind korrekt.

    Du hast hier ein floatendes Element gefolgt von einem Block Formatting Context erzeugendem Element (fieldset). Die beiden dürfen sich nicht überlappen, denn dann cleart das BFC-Element automatisch.

    CSS definiert jedoch nicht, wann genau ein Umbruch erfolgen muss.
    Firefox und Chrome brechen um, wenn overflow entstehen würde, IE und Opera, wenn die Box nicht mehr kleiner gemacht werden kann. Beides ist richtig.

    Gruß, Daniel

    1. Grüße dich, Peter Pan

      Verzeihung, ich meinte Novi :)

    2. Hallo,

      Du hast hier ein floatendes Element gefolgt von einem Block Formatting Context erzeugendem Element (fieldset). Die beiden dürfen sich nicht überlappen, denn dann cleart das BFC-Element automatisch.

      CSS definiert jedoch nicht, wann genau ein Umbruch erfolgen muss.
      Firefox und Chrome brechen um, wenn overflow entstehen würde, IE und Opera, wenn die Box nicht mehr kleiner gemacht werden kann. Beides ist richtig.

      Soweit so gut, hast du auch eine Idee, wie ich das gewünschte verhalten in den anderen Browsern erreichen kann?

      Viele Grüße Novi

      --
      "(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)
      1. Soweit so gut, hast du auch eine Idee, wie ich das gewünschte verhalten in den anderen Browsern erreichen kann?

        Ich glaube gar nicht. Entweder du hast z.B. ein inline-block fieldset, dann verhält sich der Umbruch, wie du willst, jedoch nicht die Verbreiterung; oder du hast ein Block-Element mit clear, dann hast du jedoch automatisch einen Umbruch.

        1. Hallo,

          Ich glaube gar nicht. Entweder du hast z.B. ein inline-block fieldset, dann verhält sich der Umbruch, wie du willst, jedoch nicht die Verbreiterung; oder du hast ein Block-Element mit clear, dann hast du jedoch automatisch einen Umbruch.

          Der Umbruch würde auch schon reichen. Die Verbreiterung spielt keine Rolle da es primär nur darum geht, dass die Inhalte gut erreichbar bleiben.

          display: inline-block funktioniert in meinem Beispiel. Ich muss jetzt nur mal testen, ob mir das keine Komplikationen für meine Seite mit sich bringt. display:table hatte ich auch schon ausprobiert, was allerdings die Position der Legend verändert.

          Viele Grüße Novi

          --
          "(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)
          1. Hallo,

            wenn ich das fieldset zusätzlich wieder in ein div packe erhalte ich fast den gewünschten Effekt. Nur wenn im fieldset viel Text steht bricht es auch um, was nicht erwünscht ist, da der Text ja selbst einfach umbrechen könnte.

            Wahrscheinlich werde ich mit der Darstellung in Opera einfach leben müssen.

            Ich hab das Problem ein bisschen entschärfen können, da sich durch das Entfernen unnötiger Buttons in der Toolbar der Editor verkleinert hat.

            Viele Grüße Novi

            --
            "(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)