[HTML] fieldset probleem

[Meijuh]

Hoi,

Ik heb een probleem met fieldsets dat zich alleen voordoet bij internet explorer 8.

code:

<fieldset><legend>Uitleg </legend>Geen uitleg beschikbaar.</fieldset>

In firefox heeft de legend een bepaalde afstand (10px ongeveer) tot de linkse border van de fieldset.
In internet explorer 8 is deze afstand 0.

Iemand hier ervaringen mee? Hoe kan ik deze afstand gelijk krijgen in FF en IE 8?

[RedHat]

http://eisabainyo.net/web...et-and-legend-bug-in-ie8/

Probleem + oplossing.

Problem solved in 0,5 sec @ google.nl

Overigens zoeken op fieldset bug ie8 geeft meer hits en oplossingen.

[ Voor 37% gewijzigd door RedHat op 17-08-2009 15:14 ]

[Meijuh]

Dat is niet helemaal wat ik bedoel. Ik geef je even twee afbeeldingen.

In firefox ziet mijn fieldset er zo uit:



In IE 8:



Iemand hier een oplossing voor?

[RobIII]

Zet een left-margin op de legend

Cascading Stylesheet:

legend { margin-left:10px; }

[ Voor 40% gewijzigd door RobIII op 17-08-2009 15:59 ]

[Meijuh]

Dat werkt ook niet. Dan telt firefox dat beetje wat ie al heeft + 10px er bij op.
Dus blijft het verschil in internet explorer en firefox dus even groot.

[H004]

Conditional comment gebruiken?

[_Thanatos_]

Gewoon geen legend gebruiken of slikken dat het op verschillende browsers er verschillend uitziet. Ik vind het ondingen (die legends) en om deze reden gebruik ik ze dan ook nooit. Ze zijn gewoon niet op een normale manier te positioneren, niet horizontaal en ook niet verticaal.

Gewoon een <h2> (of welk level relevant is) gebruiken en je bent van het hele gezever af.

[Meijuh]

H004 schreef op maandag 17 augustus 2009 @ 16:43:
Conditional comment gebruiken?

Hoe kan ik dan voor ie 8 en ff zo'n conditional statement opzetten? En kan dit in CSS?

Dus hoe pas ik:

code:

legend {
if(ieversion == 8) {
margin-left: 10px;
}
}

aan?

[PeterSelie]

Nee, binnen CSS zelf is dat niet aan te raden. Gooi een conditional statement binnen je HTML document welke ie8.css inlaadt.

Edit - Gooi dus volgende in je header (onder huidige CSS link) met in de CSS file dus de goede styling voor IE8.

code:

<!--[if IE 8]>
  <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

[ Voor 52% gewijzigd door PeterSelie op 18-08-2009 09:45 ]

[wackmaniac]

_Thanatos_ schreef op dinsdag 18 augustus 2009 @ 02:47:
Gewoon geen legend gebruiken of slikken dat het op verschillende browsers er verschillend uitziet. Ik vind het ondingen (die legends) en om deze reden gebruik ik ze dan ook nooit. Ze zijn gewoon niet op een normale manier te positioneren, niet horizontaal en ook niet verticaal.

Gewoon een <h2> (of welk level relevant is) gebruiken en je bent van het hele gezever af.

Het zijn idd ondingen, maar als je een fieldset gebruikt voor je velden (wel zo semantisch), dan is een legend verplicht in de XHTML 1.1 standaard meen ik.

[Castor385]

Aan te raden is doen wat Thanatos aangeeft: Slikken dat het er anders uit ziet. Er is toch geen gebruiker die Fx en IE naast elkaar gaat leggen, om te controleren dat het er op de pixel nauwkeurig precies hetzelfde uitziet.

Je kunt altijd nog proberen om de reset.css te gebruiken van Yahoo: http://developer.yahoo.com/yui/reset/

En dan pas je css gaan opmaken. Dan ben je iig van de css defaults van de browsers verlost.

[Castor385]

wackmaniac schreef op dinsdag 18 augustus 2009 @ 09:54:
[...]


Het zijn idd ondingen, maar als je een fieldset gebruikt voor je velden (wel zo semantisch), dan is een legend verplicht in de XHTML 1.1 standaard meen ik.

Ik dacht juist van niet. Maar als je er een gebruikt, dan moet het t eerste element zijn van de fieldset.

[Xalephsis]

Niet helemaal waar. de normale xhtml 1.1 DTD ( transitional ) verplicht je niet een fieldset te gebruiken. Mocht je wel 1 gaan gebruiken hoef je niet een legend te gebruiken.

In de xhtml1.1 strict is het echter verplicht. Dit geeft een error als er geen fieldset is.

Waar je naar moet kijken is het feit dat het een inline element is. Je moet een reset stylesheet gebruiken en alle margins en paddings resetten. En in IE8 is inderdaad een padding/margin bug op inline elementen.

Dus je moet de elementen in je form resetten tot 0 padding en 0 margin. En inderdaad voor IE8 een stylesheet inladen.

Kleine voetnoot: fieldset en legend werken niet goed in iE6 dus in IE6 wil je ze helemaal niet terug zien in de bron. Want anders wordt je form niet weergegeven zoals je wil.

[Boelie-Boelie]

Xalephsis schreef op dinsdag 18 augustus 2009 @ 17:04:
Niet helemaal waar. de normale xhtml 1.1 DTD ( transitional ) verplicht je niet een fieldset te gebruiken. Mocht je wel 1 gaan gebruiken hoef je niet een legend te gebruiken.

In de xhtml1.1 strict is het echter verplicht. Dit geeft een error als er geen fieldset is. [..] Je moet een reset stylesheet gebruiken en alle margins en paddings resetten. En in IE8 is inderdaad een padding/margin bug op inline elementen.
[..]
Kleine voetnoot: fieldset en legend werken niet goed in iE6 dus in IE6 wil je ze helemaal niet terug zien in de bron. Want anders wordt je form niet weergegeven zoals je wil.

- Er bestaat geen XHTML 1.1 Transitional of Strict. Er is alleen maar XHTML 1.1. Wel bestaat er XHTML 1.0 Strict en Transitional.
- Legend weglaten in Strict geeft geen error, het valideert alleen niet.
- Waarom alle margins en paddings resetten als je alleen een probleem met fieldset/legend hebt?
- Heb je een linkje van die IE8-bug?
- Hoezo werken fieldset/legend niet goed in IE6? Ik heb het nooit problemen mee?