[CSS] fieldset + float + firefox = fout

[netvor]

Zie hier: http://faraon.felk.cvut.cz/~vandef1/sandbox/test.html

Ik wil een table in een fieldset zetten. Vervolgens wil ik dat die fieldset mooi strak om de table heen past. N.a.v. wat gegoogle heb ik besloten om dat te doen d.m.v. float:left op de fieldset.

Tot zover was ik aan het testen in Opera (8.54) en ging alles goed. In IE6 ook. Totdat ik de pagina in Firefox (1.5.0.1) bekeek. In Firefox worden de cellen van de tabel niet in een raster uitgelijnd, alsof het gewoon block-level elementen zijn. Voor de zekerheid heb ik nog expliciet "td{display:table-cell}" in de CSS code staan, maar dat heeft geen invloed.

Als ik de fieldset niet floatend maak, dan gaat het in FF wel goed. Ook als ik de fieldset vervang door een div gaat het goed. Mijn conclusie is dat het trio fieldset + float + firefox gewoon niet wil werken.

Inmiddels ben ik alweer een paar uur verder en nog steeds heb ik geen oplossing kunnen vinden. Iemand een idee?

[BasieP]

een (slechte) oplossing zou natuurlijk een floating divje zijn, met daarin een niet-floating fieldset..

[netvor]

BasieP schreef op vrijdag 07 april 2006 @ 21:16:
een (slechte) oplossing zou natuurlijk een floating divje zijn, met daarin een niet-floating fieldset..

http://faraon.felk.cvut.cz/~vandef1/sandbox/test2.html

OK, dat werkt inderdaad. Maar ten eerste krijg je daar wel lelijke HTML van, en ten tweede werkt het nu weer niet in IE! Ik word hier wel een beetje van intussen...

[Borizz]

Een fieldset is ook helemaal niet bedoeld om een tabel met gegevens in weer te geven. Zie onderstaande quote van http://www.w3.org/TR/REC-html40/interact/forms.html.

The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.

Dat neemt niet weg dat het wel zou moeten werken natuurlijk, maar misschien kan je ook gewoon een caption aan het table element geven en deze zo stijlen zoals je wilt?

[Verwijderd]

Je zou kunnen proberen de tabel zelf een float: none; mee te geven?

[netvor]

Borizz schreef op vrijdag 07 april 2006 @ 21:26:
Dat neemt niet weg dat het wel zou moeten werken natuurlijk, maar misschien kan je ook gewoon een caption aan het table element geven en deze zo stijlen zoals je wilt?

Het probleem daarbij is dat ik meer dingen dan alleen de tabel in de fieldset wil hebben. In de fieldset komt namelijk een tabel met gebruikers, en daaronder een select en een submit om users te verwijderen, te selecteren voor bewerking, etc. Als ik dan de <legend> van de fieldset emuleer met een <caption> op de table, dan is dat semantisch niet geheel correct.

Ik zou natuurlijk ook een <div class="legend"> kunnen maken, maar het positioneren daarvan precies op de border van de fieldset-div gaat lastig worden.

Verwijderd schreef op vrijdag 07 april 2006 @ 21:27:
Je zou kunnen proberen de tabel zelf een float: none; mee te geven?

Zonet geprobeerd. Doet niets.

[Borizz]

Een width meegeven aan je fieldset (en de float weghalen), zal je probleem waarschijnlijk oplossen, maar dit wil je waarschijnlijk niet omdat je de breedte van de tabel als uitgangspunt wilt nemen voor de breedte van je fieldset..

Wat je wel kan proberen is een display: inline; op je fieldset.

[netvor]

Borizz schreef op vrijdag 07 april 2006 @ 21:42:
Een width meegeven aan je fieldset (en de float weghalen), zal je probleem waarschijnlijk oplossen, maar dit wil je waarschijnlijk niet omdat je de breedte van de tabel als uitgangspunt wilt nemen voor de breedte van je fieldset..

Wat je wel kan proberen is een display: inline; op je fieldset.

Met display:inline op de fieldset heeft FF precies hetzelfde probleem als met float:left.

En inderdaad: een width meegeven aan de fieldset [zie hier] lost het probleem op. Maar dat heeft uiteraard een aantal nadelen.

[BasieP]

als je puur die text op dat lijntje wilt kan je natuurlijk een divje relatief positioneren, en daarin een 'titel' divje absoluut over de border van het eerste divje zetten.
dan heb je in princiepe hetzelfde effect en dit werkt onder alle browsers

[IschaGast]

Wat voor nadelen heeft het geven van een bepaalde width dan voor jou?
Het zou natuurlijk voor kunnen komen dat een bepaalde tabel kleiner is dan de width, dat kan ik mij dan voorstellen tenminste. Maar als je hem nu een width geeft van 1px dan strekt hij automatisch uit en dan heb je dat probleem in ieder geval ook niet meer.

[Borizz]

IschaGast schreef op zaterdag 08 april 2006 @ 10:26:
Wat voor nadelen heeft het geven van een bepaalde width dan voor jou?
Het zou natuurlijk voor kunnen komen dat een bepaalde tabel kleiner is dan de width, dat kan ik mij dan voorstellen tenminste. Maar als je hem nu een width geeft van 1px dan strekt hij automatisch uit en dan heb je dat probleem in ieder geval ook niet meer.

Een width van 1px werkt alleen in IE (en dit is dan eigenlijk nog een bug). Je zou min-width kunnen proberen (werkt niet in IE, wel in FF)..

[Jerry]

Borizz schreef op zaterdag 08 april 2006 @ 18:53:
[...]

Een width van 1px werkt alleen in IE (en dit is dan eigenlijk nog een bug). Je zou min-width kunnen proberen (werkt niet in IE, wel in FF)..

Je kan dan evt. dit doen (niet getest, maar werkt wel met _height):

Cascading Stylesheet:

_width: 1px;

[ Voor 14% gewijzigd door Jerry op 08-04-2006 19:28 ]

[JHS]

Borizz / Jerry: Gebruik inderdaad min-width, maar dan wel in combinatie met een via conditional comments geïnclude iefix.css bestand waarin je width: 1px; opneemt .