[IE]padding-bug als gevolg van height

[Dr_Frickin_Evil]

Ik heb op mn site 2x hetzelfde probleem. Dat is het volgende.

Als ik (child-)elementen een vaste hoogte geef, dan komt het vaak voor dat er in IE nog een extra marge van een pixel of 2-3 onder zit. Bijzonder vervelend probleem. Ik heb ff een voorbeeldje gemaakt in welke gevallen ik dit tegenkom, dat kun je hier bekijken: http://131.155.241.57/test/test2.html
Als je de pagina in Mozilla en IE bekijkt zie je de verschillen. Weet iemand hoe dit komt? Ik ben dit al vaker tegengekomen, en het is toch erg irritant. Als ik geen vaste hoogte opgeef, dan heb ik dit probleem niet, maar dat is af en toe gewoon noodzakelijk natuurlijk.

[Bosmonster]

Komt door de verschillen in het box-model. Oplossing is geen padding te gebruiken in elementen met een vaste breedte/hoogte (verticale padding met hoogte, horizontale padding met breedte dan).

Je kunt eenvoudig een extra div plaatsen met de padding/margin om toch de ruimtes te creeren.

[ Voor 21% gewijzigd door Bosmonster op 26-05-2004 15:12 ]

[Dr_Frickin_Evil]

Dat is volgens mij een ander probleem hoor. Dit lijkt mij eerder een bug in IE. De padding staat namelijk in beide gevallen op 0.

[Bosmonster]

Die onderste (dat blauwe) lost zich op door overflow:hidden toe te voegen.

Die bovenste komt al een heel eind door die loze a-tags deruit te flikkeren en die gekke font: 13px/13px notatie weg te halen.

En als ik daar in 5 minuten debuggen achter kan komen moet jou dat toch ook wel lukken

[ Voor 19% gewijzigd door Bosmonster op 26-05-2004 17:31 ]

[Dr_Frickin_Evil]

Die onderste heb ik al opgelost, wel op een wat andere manier als wat je voorstelde, dat overflow:hidden was het niet alleen.

Dat andere geval, das toch een wat langer verhaal. Die font: 13px/13px Arial is trouwens helemaal niet raar, die geeft font-size, line-height en font-family aan, en dat heeft hier niks mee te maken. Als ik de height: 13px in zn geheel weghaal, dan klopt dat menuutje wel, maar dan heb ik weer het probleem dat het submenuutje dan totaal niet goed meer gepositioneerd is. Btw, die loze a-tags, die staan daar omdat in mn eigen site dat wel gewoon linkjes zijn.

Dat probleem daar zit ik dus nog mee. Ik heb ff een nieuw voorbeeld gemaakt, dat is hier te zien: http://131.155.241.57/test/test2.html . Als je in IE kijkt, zie je dat het bovenste menuutje wel klopt qua marges, maar dat het submenu te ver naar rechts staat. De positionering klopt totaal niet meer, aangezien het 2e submenu nog verder naar rechts staat als het 1e submenu...
Bij het 2e menu kloppen de submenu's, maar kloppen de marges weer niet. Het enige verschil hier is dat ik de height: 13px heb weggehaald.

Waar ligt dit nu aan? Of heeft iemand een trucje om het te omzeilen?

[Dr_Frickin_Evil]

Niemand een idee? Ik ben dr nog niet achter

[crisp]

Geen verklaring, maar wel een vergelijkbare opzet die ik ooit heb gemaakt: http://allcrispy.com/exp/menu.html
misschien kan je daar nog wat uithalen (heeft ook wat bugs in IE mbt de overlap en borders die op de voorgrond blijven)

[Dr_Frickin_Evil]

Hehe ik heb em ooit ook van jou gekopieerd. Ik zal ff kijken of ik hier wat mee kan, anders laat ik het maar zo. Het is voor mijn ontwerp niet superbelangrijk, ik vind het gewoon vooral erg vreemd.