Table in fieldset in Verbindung mit float
Novi
- css
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:
Firefox "scheitert" am ersten Beispiel:
Sowohl Opera als auch IE vergrößern das fieldset nicht:
Ich kann mir das Verhalten von Opera nicht erklären.
Viele Grüße Novi
Hi!
Warum die Tabelle? Label-, input- und textarea-Elemente mit entsprechendem CSS reichen doch aus.
off:PP
Hallo,
die Tabelle wir da von TinyMCE eingefügt.
Viele Grüße Novi
Hi!
die Tabelle wir da von TinyMCE eingefügt.
Mhm erinnert mich an Zitat 1210
off:PP
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
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
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
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
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
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
Grüße dich, Peter Pan
Verzeihung, ich meinte Novi :)
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
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.
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
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