[HTML] Combinatie 'cite' en 'text-align: justify' in IE

[Superdeboer]

Ik ben tegen een bugje in Internet Explorer aangelopen, waarover ik noch op GoT, noch via Google een bevredigend antwoord heb kunnen vinden.

Bij het gebruik van een cite-element in een divje waarop text-align: justify; staat, wordt het divje in IE ongeveer drie pixels breder gemaakt. Haal ik die text-align weg, dan is het probleem opgelost, maar dat wil ik dus niet.

Als voorbeeld heb ik hier een eenvoudig voorbeeldje gemaakt van het probleem. Twee divjes boven elkaar, de divjes hebben dezelfde eigenschappen. Dezelfde tekst staat erin, met dit verschil dat de tekst in de onderste div in een cite-element staat.
In Firefox / Mozilla gaat dat goed en precies zoals het hoort, in Internet Explorer zie je dat die onderste div iets breder wordt.

Als ik de div voor IE drie pixels smaller maak (door /* _width: 562px; */ te uncommenten) dan ziet die onderste div er zowel in Firefox als in Internet Explorer hetzelfde uit. Dat is echter geen oplossing voor het probleem, omdat het ook voor kan komen dat er geen cite-element in die div staat, en dan moet die div in IE niet ineens *daadwerkelijk* 562px breed worden natuurlijk... dat is het probleem verplaatsen, want dan is hij te smal als er geen cite in staat.

Iemand een idee hoe ik ervoor kan zorgen dat de onderste div in IE altijd even breed is als de bovenste, dus mét of zonder gebruik van het cite-element? (En natuurlijk dat het er in Gecko-browsers ook nog goed uitziet. )

[Blaise]

Voor als het niet duidelijk was: Het komt doordat die tekst italic is. Als je <cite> door <i> vervangt houd je hetzelfde probleem.

Ik weet niet hoe gehecht je bent aan italic, maar dit zou een oplossing kunnen zijn:

code:

cite{font-style: normal}

hier en vooral hier meer informatie over die bug.

[ Voor 14% gewijzigd door Blaise op 19-11-2004 01:32 ]

[Superdeboer]

Ahhhhh geweldig! Hartstikke bedankt.

Uiteindelijk werkt dit denk ik het beste:

Cascading Stylesheet:

/* \*/
* #bottom_column {
    overflow: hidden;
    o\verflow: visible;
    width: 100%;
    w\idth: auto;
    he\ight: 1%;
}
/* */

Dat komt van deze site die je gaf. Die complete code maakt de bug onschadelijk. Door namelijk slechts het cite-element aan te passen, hield ik het probleem nog steeds wanneer er gewoon een italic font-style werd gebruikt. Nu, door deze hack, blijven die elementen ook in IE gewoon italic en bovendien is het probleem opgelost. Hartstikke bedankt dus! \o/