Archief - CSS: menu-DIV juist in IE6, fout in IE7 en FF

Ik ben nog steeds volop aan het bijleren over CSS, maar ben tevreden met elk ding dat ik leer. Veel opzoeken en uittesten, maar soms zie je de oplossing (of reden van de fout) niet.

Nu ben ik aan een website bezig en ik zit met een probleem omtrent de menu-DIV (#left). In IE6 krijg ik het juist zoals het zou moeten, maar in IE7 en FF staat de menu-DIV teveel naar links.

Ok, genoeg chit-chat, what's the problem?
http://users.telenet.be/XA4/website2007

Screenshot IE6: http://users.telenet.be/XA4/website2007/ie6.jpg
Screenshot IE7: http://users.telenet.be/XA4/website2007/ie7.jpg
Geen screenshot van FF, maar geeft hetzelfde resultaat als IE7.

CSS: http://users.telenet.be/XA4/website2007/mijnstijl.css

Hoe krijg ik mijn #left nu zo dat het in IE6, IE7 en FF hetzelfde (juist) resultaat geeft?

PS: Let nog niet al te veel op de layout zelf, daar ben ik ook nog volop mee bezig. Er moeten nog dingen uitgelijnd worden, logo toevoegen, tekst aanvullen, foto's, etc.

In vuurvosje is ze ook verkeerd (en ik gok in Safari en Opera ook).

Ik heb je code nog niet bekeken, maar het komt wellicht hier op neer:

1) bouw je site zodat ze er in firefox/ie7/opera/safari goed uitziet (doorgaans is dat zeer gelijklopend)

2) maak een aparte stylesheet voor IE6, die je kan inladen door conditional comments:


In die aparte stylesheet override je dan gewoon de eigenschappen van die #left die voor problemen zorgen (wellicht de margin-left of zo iets ). Dus niet je hele stylesheet kopiëren, gewoon de regel die voor problemen zorgt nog eens opnieuw, met andere waarden in de IE6.css zetten.

om maar even in te pikken bij Xavez: FF interpreteert de code juist, IE6 niet (om het cru te zeggen)

In FF toont hij de site wel deftig wnr je bij #left margin-left: 24px;
(maar dat had je wrs zelf ook al gevonden?)

Probeer vandaar te vertrekken en zo je site werkende te krijgen in IE. Het is mogelijk om dit met 1 stylesheet op te lossen, door de fouten in de IE6 boxmodel interpretatie niet te gebruiken. En anders Xavez zijn oplossing gebruiken, ofwel hacks gebruiken (maar hierdoor zal je css niet valideren).

Met die "if IE6..." werkt het inderdaad perfect.
Nu kan ik me verder aan de layout zetten.
Bedankt.

Edit: net gezien dat het in mijn IE6 standalone (laptop, surf normaal met IE7) juist wordt weergegeven, maar in mijn IE6 full (PC) niet. Hmmm...

My error: er moet een spatie tussen IE en 6 .

Nu werkt het wel overal goed.
Bedankt!