Renderraadsel no-brake-space en <input> element

[Amplify]

Hier zie je de twee zelfde stukjes website:

Firefox, zoals ik het graag wil:


Internet Explorer. zoals ik het niet wil in rood omcirkelt:



Hier het kleine stukje code die hierop slaat:
Note: nbsp-entitie word vertaald naar spatie in dit bericht vandaar deze benaming.

<span id="SPAN-blok2">nbsp-entitie<input class="MultipleUsageClass_01" type="text" name="naam" value="<?echo $webinfo[0];?>" maxlength="15" /></span>

Hier de CSS makeup:

#SPAN-blok2 {
padding:2px;
border-style:none;
font-size:11px;
font-family:verdana;
background-color:#E8F0FF;
width:125px;

}
#SPAN-blok2 input {
color:#66AA66;
padding:1px;
border-style:none;
font-size:11px;
font-family:verdana;
background-color: #C8FBE5;
width:125px;

}

Ik heb zelf het één en ander geprobeert. Ik snap niet waarom de nbsp-entitie toch de regel lijkt te breken in IE6. Weet iemand misschien hoe het komt en hoe het is op te lossen ? Alvast bedankt.

Je kunt zien dat in IE6 de input onder de nbsp-entitie komt te staan en dat wil ik er graag naast hebben, zodat het er precies komt uit te zien zoals in FF.

[ Voor 17% gewijzigd door Amplify op 27-04-2005 22:05 ]

[Verwijderd]

woei, of ik ben kleurenblind of je hebt echt een bijzonder onduidelijk ontwerp, ik kan iig niet goed zien wat je probleem nu is, ik zie in IE iig wel rare friemels, maar is dat nu render muk of een extra input die verkeerd staat of wat?

Misschien kan je het ff toelichten nog?

[Dirtbiter]

Je gooit 2 span elementen met een exacte grootte in elkaar (dus precies over elkaar heen) maar nog wel met een spatie ertussen. Dat lijkt me zowieso een van de dingen die niet kloppen...

Denk dattie daarom breekt en er 2 regels van maakt. Probeer die spatie eens weg te halen of je span-block-2 iets groter te maken

[wicher|IA]

Het is toch 100% logisch waarom de regel wordt opgeknipt?
Je hebt een span van 125px, en daarin een input van ook 125px plus een spatie. Dat is dus altijd breder dan 125px, dan moet-ie wel gaan breken of zo.

[ Voor 5% gewijzigd door wicher|IA op 28-04-2005 12:34 ]

[Amplify]

Ja, dat is super logisch idd. Ik heb er zolang naar lopen staren dat ik eigenlijk dat over het hoofd heb gezien. Wel blijf ik het raar vinden dat Firefox daar geen last van heeft en dat die dan blijkbaar mijn span automatisch verlengt ondanks de width-specificatie.

Bedankt !

[wicher|IA]

Tja, de vaste breedte en het feit dat de nbsp non-breaking is zitten elkaar natuurlijk in de weg. Dan moet de browser een keuze maken, en FF en IE maken dus niet dezelfde keuze. Wat de 'juiste' keuze is (volgens het W3C) weet ik niet.

[crisp]

Het is heel simpel: een span-element is een inline element en kent dus geen breedte.
IE doet het fout door wel de breedte toe te kennen.

[ Voor 28% gewijzigd door crisp op 29-04-2005 17:14 ]