Ik heb een menuutje met een list en CSS gedaan, zie http://www.rszdesign.com/test/inline_list.html .
Wat belangrijk is is dat de links (<a>) padding hebben zodat ze wat groter worden, en dat dat hele gedeelte klikbaar is.
Omdat <a> een inline element is pakken de browsers de padding-top en padding-bottom niet, dus heb ik de elementen de volgende code gegeven:
Ik wil dat de grootte van het font instelbaar is, en omdat de container div een vaste breedte heeft is het dus mogelijk dat wanneer de font-grootte hoog is sommige list-items op de volgende regel komen.
Browsers pakken die <a> padding dus niet, waardoor de list-items elkaar gaan overlappen als ze op de volgende regel komen. (zie voorbeeld bovenaan)
Door de display: inline-block; geeft het in IE 6 het gewenste resultaat, maar werkt dit in Mozilla niet...
Weet iemand misschien een cross-browser-compatible oplossing voor me?
Alvast bedankt!
Wat belangrijk is is dat de links (<a>) padding hebben zodat ze wat groter worden, en dat dat hele gedeelte klikbaar is.
Omdat <a> een inline element is pakken de browsers de padding-top en padding-bottom niet, dus heb ik de elementen de volgende code gegeven:
Cascading Stylesheet:
1
2
3
4
| #menu ul li a { display: inline-block; margin-bottom: 2px; } |
Ik wil dat de grootte van het font instelbaar is, en omdat de container div een vaste breedte heeft is het dus mogelijk dat wanneer de font-grootte hoog is sommige list-items op de volgende regel komen.
Browsers pakken die <a> padding dus niet, waardoor de list-items elkaar gaan overlappen als ze op de volgende regel komen. (zie voorbeeld bovenaan)
Door de display: inline-block; geeft het in IE 6 het gewenste resultaat, maar werkt dit in Mozilla niet...
Weet iemand misschien een cross-browser-compatible oplossing voor me?
Alvast bedankt!