[CSS] table in float cleart foutief in IE

[MrJay]

Ik zit met het volgende design:

Een main-div met een header, twee links-uitlijnende floats: het menu en de contents, en een footer die de floats cleart. De contents-float wordt met een min-height groter gehouden dan de menu-float.

Het probleem doet zich voor als ik in de contents-float een table plaats. In IE wordt deze dan onder de menu-float links geplaatst, terwijl in andere browsers dit niet gebeurt. Andere elementen worden niet zo geplaatst.



Ik heb al geprobeerd een "clear: none" toe te voegen aan de table, maar dit heeft niet geholpen.

[ Voor 3% gewijzigd door MrJay op 05-06-2006 21:34 ]

[Rowanov]

Als je nu eens een testcase laat zien? Het is leuk dat je een plaatje neerzet, maar ik vind je beschrijving vrij cryptisch. Daarnaast kan het probleem in veel verschillende zaken zitten.

[Palomar]

ws. is de div waar die tabel in komt te breed. Speel eens met de margins van je content en menu-div.

[ Voor 12% gewijzigd door Palomar op 05-06-2006 22:21 ]

[Tsjilp]

je weet dat IE geen min-height ondersteund???

[MrJay]

Ik was net bezig met een voorbeeld up te loaden ( stom om dat te vergeten ) toen ik het idee van Palomar even probeerde, en het werktte! Ik heb gewoon de width op 99% gezet en het was gefixt.

Weer zo'n geweldig onlogisch cross-browser verschil waar ik de volgende keer rekening mee moet houden

[Palomar]

Tsjilp schreef op dinsdag 06 juni 2006 @ 14:17:
je weet dat IE geen min-height ondersteund???

ik gebruik dit altijd:

Cascading Stylesheet:

_height: 410px; /* Internet Explorer */
min-height: 410px; /* Firefox */

Voor zover ik weet werkt het dan wel in IE.

[Rowanov]

Palomar schreef op dinsdag 06 juni 2006 @ 17:29:
ik gebruik dit altijd:

Cascading Stylesheet:

_height: 410px; /* Internet Explorer */
min-height: 410px; /* Firefox */

Voor zover ik weet werkt het dan wel in IE.

Dat is bij deze afgekeurd en ik zal uitleggen waarom. Dit is een hack die er in IE7 uit gaat, met als gevolg dat je pagina dan weer niet werkt. Als je zulk soort specifieke dingen wilt neerzetten kan je dat doen in een conditional comment zodat de code alleen in IE werkt. Voorbeeldje:

Cascading Stylesheet:

<!--[if IE]>
<style type="text/css>
selector {
    height: 410px;
}
</style>
<![endif]-->

Het probleem van de TS ligt waarschijnlijk aan een verschil in box-model interpretatie tussen IE en alle andere browsers. Zulk soort verschillen kan je iig terugdringen door een volledig doctype te gebruiken en de browser in strict-mode te duwen. Ik gok dat de TS een element met width voorzien heeft van een margin, padding of border

[XWB]

Curing Float Drops and Wraps