login  Naam:   Wachtwoord: 
Registreer je!
 Forum

CSS margin probleem in IE

Offline Caspah - 25/07/2006 00:14
Avatar van CaspahNieuw lid Al meer dan 2 langzame uren probeer ik dit probleem op te lossen, vele websites en forums geraadpleegd, maar een oplossing lijk ik maar niet te vinden.

Ik probeer een CSS design te maken met een header, 2 kolommen, gevolgd door een footer. In FF krijg ik wat ik wil, maar in IE komt de content onder het linkermenu, al staat het horizontaal wel correct.

Voorbeeld van het probleem: http://www.sper.be/csstest/index.htm
De CSS: http://www.sper.be/csstest/test.css

Ik heb al gemerkt dat als ik width van #content 3 pixels kleiner maar, de content naast het menu komt in IE, maar dat geeft niet het gewenste resultaat.

Een kleine tip zou al zeer welkom zijn, ik heb al verschillende aanpassingen geprobeerd, waaronder IE hacks, maar nooit geeft het het resultaat waarop ik zit te wachten (de huidige weergave in FF zou ik ook in IE willen)

2 antwoorden

Gesponsorde links
Offline xSc - 25/07/2006 10:13
Avatar van xSc Onbekend IE hacks:

* html #content
{

}

FF hacks:

html>body #content
{

}
Offline Thomas - 25/07/2006 10:54 (laatste wijziging 25/07/2006 10:56)
Avatar van Thomas Moderator Dit heeft te maken met de implementatie van het "box-model" in IE en otherbrowsers™.

IE:
- trekt de border af van de breedte en hoogte van de tabel (fout)
- telt de margin op bij de breedte van de tabel (goed)
- trekt de padding af van de breedte en hoogte van de inhoud van de tabel (goed)

otherbrowsers™:
- telt de border op bij de breedte en hoogte van de tabel (goed)
- telt de margin op bij de breedte van de tabel (goed)
- trekt de padding af van de breedte en hoogte van de inhoud van de tabel (goed)

Wat je dus het beste kunt doen is het gebruik van borders vermijden, en er op te letten dat de margin (lucht aan de buitenkant van een box) altijd wordt opgeteld bij de tabelbreedte.

Voorbeeld:
width: 100px
height: 50px
margin: 4px
padding: 8px
border: 2px

IE:
totale breedte box: 100 + 2x4 = 108px
totale hoogte box: 50 + 2x4 = 58px
totale werkruimte in box (breedte): 100 - 2x2 - 2x8 = 80px
totale werkruimte in box (hoogte): 50 - 2x2 - 2x8 = 30px

otherbrowsers™:
totale breedte box: 100 + 2x4 + 2x2 = 112px
totale hoogte box: 50 + 2x4 + 2x2 = 62px
totale werkruimte in box (breedte): 100 - 2x8 = 84px
totale werkruimte in box (hoogte): 50 - 2x8 = 34px

Tenzij ik iets verkeerd heb berekend.

Zorg ook dat je als je borders en margins gebruikt je in omringende boxes genoeg ruimte reserveert.

Google anders eens op "IE box model problem"
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.173s