[IE] floated label wordt dubbel weergegeven*

[Verwijderd]

Beste tweakers,

In IE6 en IE7 heb ik een vreemde bug welke ik wel vaker heb. Een voorbeeldje staat op:

http://rudolfbos.nl/projecten/verpanding/

In de linkerkolom onder het kopje 'contactformulier' wordt de label 'opmerking' dubbel weergegeven door IE. Je ziet dat onder het woord 'opmerking' ook nog een keer 'merking' staat.

Een stukje code:

HTML:

<form action="" method="get">
<label>Naam:</label>
<label>Bedrijfsnaam</label>
<input name="" type="text" class="smallinput" />
<input name="" type="text" class="smallinput" />
<label class="mt10">Telefoon:</label>
<label class="mt10">E-mail adres:</label>
<input name="" type="text" class="smallinput" />
<input name="" type="text" class="smallinput" />
<label class="mt10">Opmerking</label>
<textarea name="" cols="" rows=""></textarea>
<input name="" type="button" value="Verstuur" />
</form>

Cascading Stylesheet:

#left form { overflow: hidden; }
#left label { width: 141px; margin: 0 0 5px; float: left; }
#left input { padding: 3px; margin: 0 0 10px; float: left; }
#left textarea { width: 250px; height: 100px; padding: 3px; margin: 0 0 10px; }
#left .smallinput { width: 111px; margin: 0 20px 0 0; }
#left .wideinput { width: 180px; }
#left .phone { background: url(../img/bg/phone.gif) no-repeat 220px 30px; }

Iemand enig idee hoe ik ervoor kan zorgen dat deze dubbele weergave verdwijnt in IE? Ik heb het ook vaak als ik label en span tags naast elkaar float.

Alvast bedankt!

[BtM909]

Zonder verder te kijken, weet je zeker dat het niks te maken heeft met http://positioniseverything.net/explorer/dup-characters.html?

[Verwijderd]

BtM909 schreef op donderdag 05 februari 2009 @ 10:24:
Zonder verder te kijken, weet je zeker dat het niks te maken heeft met http://positioniseverything.net/explorer/dup-characters.html?

De "Duplicate Character Bug" wordt getriggerd door <!-- comments -->. Zijn lay-out heeft geen comments, dus betreft dit een ander probleem.

Stomtoevallig loop ik nu tegen exact hetzelfde probleem aan. Allerlei fixes die worden voorgesteld t.a.v. de Duplicate Character Bug, maar ook de Keekaboo bug, verhelpen het probleem niet!

Iets dat wel helpt is compleet lege ongestylde <div></div> om het <label> heen te plaatsen. Wellicht dat in jouw geval ook de textarea in het lege div'je meegenomen moet worden, maar dat is een kwestie van even uitproberen.

Ik vind een leeg divje geen mooie oplossing. Wellicht dat iemand een CSS-based fix heeft hiervoor?

[Alfredo]

HTML:

<label class="mt10">Opmerking</label> <br />

Even een linebreak na je label plaatsen werkt.

[ Voor 33% gewijzigd door Alfredo op 05-02-2009 22:21 ]

[Verwijderd]

Beide oplossing werken. Zowel een lege div om de textarea gooien als een <br /> na de label verhelpt het probleem. Toch vind ik het vreemd. Ik vermoed dat er ook wel een CSS oplossing is. Totdat die gevonden is zal ik het br'etje er maar in gooien.

Hartstikke bedankt!

[Verwijderd]

Als oplossing hiervoor kende ik <br /> nog niet. Is toch ietsje netter eigenlijk. Heb gelijk het divje vervangen, bedankt!

offtopic:
Ik vond dat gezeik op IE altijd maar onzin; HTML gaat immers prima. Maar sinds ik XHTML hanteer realiseer ik me eigenlijk pas wat een flutbrowser 't is.

[ Voor 28% gewijzigd door Verwijderd op 06-02-2009 12:52 ]

[BtM909]

Verwijderd schreef op donderdag 05 februari 2009 @ 14:08:
[...]

De "Duplicate Character Bug" wordt getriggerd door <!-- comments -->. Zijn lay-out heeft geen comments, dus betreft dit een ander probleem.

Mmmm, ik heb die comments er waarschijnlijk zelf uit gefilterd Als ik tegen dit soort dingen aanliep is een hasLayout fixje altijd de oplossing (die overigens verder staat gemeld).

[Verwijderd]

BtM909 schreef op vrijdag 06 februari 2009 @ 13:43:
[...]

Mmmm, ik heb die comments er waarschijnlijk zelf uit gefilterd Als ik tegen dit soort dingen aanliep is een hasLayout fixje altijd de oplossing (die overigens verder staat gemeld).

HasLayout valt te implementeren door op het laatste floatende element zoom:1 toe te voegen, toch? Ik heb het uiteindelijk op werkelijk alle elementen tezamen en ook afzonderlijk geprobeerd, maar dit bleek ook geen oplossing.

Die pagina over HasLayout was niet bepaald duidelijk, vandaar.