[IE/CSS] Duo-kolom-design heeft insprong bij hoofdkolom

[Verwijderd]

Eerst even wat info:
De pagina> <<verwijderd>>
Het Stylesheet> <<verwijderd>>
De fout in IE> <<verwijderd>>

Wat je voor je ziet als je de pagina opent is geheel XHTML correct, ook de CSS klopt (of de semantiek klopt, dat laat ik in het midden). De pagina ziet er 'perfect' (Zoals bedoeld dus) uit in Opera en in Firefox, maar in Internet Explorer is er een gigantische bug. De gigantische bug is zo'n 4px breed en ik heb ze weg kunnen krijgen, maar niet op een nette manier, misschien dat een iemand hier ideeën heeft?

Het probleem verder beschreven (IE):
Links: Een 160 px kolom met enkele regels content, float:left.
Rechts: Een kolom, margin: 200px; met een border-left. Deze kolom ziet er perfect uit, positionering en dergelijke klopt. Maar de inhoud van de kolom (Het eerste h2 en de eerste regels van het p-element) is niet correct weergegeven. Als er in de linker kolom tekst staat dan is in de rechterkolom de tekst namelijk enkele px ingesprongen (Zie de afbeelding voor verduidelijking, de rode lijnen geven het probleem weer).

Oplossingen in IE:
Geef het #content block in de stylesheet een van de volgende elementen mee:

Cascading Stylesheet:

#content{
  display: inline-block;
}

of

Cascading Stylesheet:

#content{
  width: 100%;
}

Inline-block verziekt het resultaat in Opera. Een 100% width verziekt het resultaat in FF en in Opera.

De hack:
Ik kan zeggen:

Cascading Stylesheet:

#content{
  _display: inline-block;
}

of

Cascading Stylesheet:

#content{
  _width: 100%;
}

Dan werkt hij in alle drie de browsers goed, maar ik heb niet zoveel zin om mijn CSS/XHTML-document te doorspoelen met Hacks. Is er dus een andere oplossing.


Noot:
Verder geen commentaar op de lay-out, iedereen die hem heeft gezien vind het spuuglelijk, maar ik vind hem persoonlijk best wel mooi .

[ Voor 10% gewijzigd door Verwijderd op 27-07-2005 23:34 ]

[crisp]

Daar is 'ie weer, de 3 pixel text-jog

om bepaalde styles enkel op IE te targetten kan je ze in een aparte stylesheet zetten, en die mbv conditional comments inladen; zo blijft je echte stylesheet verschoont van vieze hacks en krijg je geen problemen met andere browsers

Met een beetje geluk hebben ze in IE7 deze bug ook gefixed.

De oplossingen die je geeft komen overigens neer op het triggeren van hasLayout in Trident.

Ik gebruik vaak ook dit soort constructies om toch syntactisch correct te blijven:

Cascading Stylesheet:

#content {
    width: 100%; /* voor IE */
}
body>#content { /* voor echte browsers */
    width: auto;
}

[ Voor 32% gewijzigd door crisp op 27-07-2005 20:59 ]

[Verwijderd]

Bedankt voor de hulp, en voor het leesvoer.

div>#content will do the thrick, en nu ziet hij er in alle Windows-browsers (en Lynx) goed uit.

Nogmaals Dank