CSS - Box Model Hack

Hey allemaal,

Ik ben bezig met mijn nieuwe website (zie onderschrift…), hij is inmiddels bijna af, maar toen ik dit bericht over het testen van je website op Windows zag zag ik dat er nogal wat mankeerde aan mijn site.
Ik heb hier even in het kort wat er mis gaat, dit is het stukje CSS:

[code:1:2a54733bc2]width: 90px;
padding: 2px 5px 2px 5px;
voice-family: “”}"";
voice-family: inherit;
width: 80px;[/code:1:2a54733bc2]
De breedte voor IE4/5.5 moet 90px zijn, omdat die de padding er twee keer bij mag pakken. Dan krijgen we de bug in IE dat die de code daaronder niet leest. Dan krijgen we de eigenlijke breedte zoals die 'm in gewone browsers moet weergeven. Het probleem is dat iedere IE voor Windows 'm nu pakt, behalve, IE6…
Die weergeeft 'm als 80pixels breedte maar zonder die padding links en rechts 5 pixels…

Het gedrag in IE5.0-5.5 op Wintel is een bug die in IE6 is verdwenen. Vandaar het 'afwijkende' gedrag van IE6 op het (afwijkende) gedrag van de andere IE/Wintel-versies. IE6 zou zich met het boxmodel moeten gedragen als de andere (normale) browsers.

Ja, en dat doet het juist niet :P :wink: Iemand enig idee waar het aan kan liggen?

Bij de bedenker van de Box-model Hack staat dat IE6 de renderfout niet meer maakt, behalve als je de 'xml prolog' er in zet http://www.tantek.com/CSS/Examples/boxmodelhack.html onderin de pagina.

Dat valt in ieder geval te proberen.
Veel verder ben ik ook nog niet met het doorzien van CSS. Hierna gaat het licht uit… 8)

Ik had geloof ik wel zo'n soort ding. Die heb ik nu weggehaald. Die website die ik hier afgelopen dagen zag om je website in een pc te testen, [url]http://www.danvine.com/iecapture/[/url] doet het sinds gisteren en vandaag niet... Kan iemand met IE6 voor Windows even kijken of mijn website het nu wel doet? Graag even een PB'tje sturen zodat ik je de URL kan geven.

[color=green:26c1737cd8]Bewerkt: Ik zal even duidelijker zijn met dat ding, ik had in plaats van:
gewoon <html> dit:[/color:26c1737cd8]

[code:1:26c1737cd8]<html xmlns="http://www.w3.org/1999/xhtml">[/code:1:26c1737cd8]
[color=green:26c1737cd8]Het zal wel weer niet uitmaken en ik zal wel weer naar een andere oplossing op zoek moeten op dat !@#%#%-menu op een Win/IE6 te laten werken. Whatever.[/color:26c1737cd8]

Ik heb 'm nu getest in Windoos maar hij doet het nog steeds niet. Dat terwijl IE5.5 'm nog steeds goed laat zien. Nog even voor de duidelijkheid: Ik heb dus dit: [code:1:68e5993cb3]#menu li a, #menu li a:visited { display: block; width: 90px; padding: 2px 5px 2px 5px; background-color: #D0FFB9; color: #000; text-decoration: none; letter-spacing: 1px; voice-family: ""}""; voice-family: inherit; width: 80px; }[/code:1:68e5993cb3] Iedere browser weergeeft 'm dus als 80 pixels met links en rechts 5px padding (boven en onder ook). Nu weergeeft Internet Explorer 'm dus als 80px zonder enige padding.....

[img:68e5993cb3]http://forum.macosx.nl/album_pic.php?pic_id=1395[/img:68e5993cb3]
Afbeelding Internet Explorer 6. Het menu moet op 15 pixels na rechts even groot zijn als de donkergroene header daarboven. De lichtgroene balk die je daaronder ziet is ook iets kleiner, hier gaat het in IE6 dus ook fout.

[img:68e5993cb3]http://forum.macosx.nl/album_pic.php?pic_id=1396[/img:68e5993cb3]
IE5.5 doet het wel goed (kleine fout bij screenshot nemen, iets donkere kleur boven het menu).

Wie kan mij helpen?

Oké, ik geef nu helemaal geen breedte meer op alleen een padding links en rechts van 15 pixels, maar dat ziet er ook in verschillende browsers niet goed uit.

Bovendien blijft het onderdeel met inhoud op een windows IE6 nog steeds 740breed terwijl die 750 hoort te zijn met padding; het box model hack doet het goed voor ie5.5 en lager. Maar IE6 doet alsof die de breedte van 750pixels na voice-family etc. niet ziet. Iemand suggesties?

misschien bijdehand maar:

kun je de volgorde veranderen van je code?zodat ie eerst de afmeting leest en dan pas de voice family?

Ik heb zo'n beetje iedere combinatie al geprobeerd maar het werkt allemaal niet!