[CSS] Inline <li> renderen met een rare onderkant in firefox - Softwareontwikkeling

vrijdag 13 oktober 2006 11:22

Acties:

Verwijderd

Topicstarter

Om maar met de code in huis te vallen:

HTML:

<html>
  <head>
    <style type="text/css">
    ul { list-style: none; padding: 0; margin: 0; text-align: center; border: 1px solid black }
    li { display: inline; border-bottom: 1px solid red; }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul>
  </body>
</html>

En hier is het verschil in Firefox (boven) en IE 6 (onder).
[img][/img]
Die border hoort volgens mij wel onder de <li> maar nog binnen de <ul> te komen. Dus daar doet IE iets niet goed toch? Maar Firefox reserveert die ruimte voor een border ook als er geen border is! Dta betekent dat je een element onder <ul> niet direct tegen de onderkant van de <li> kan laten vallen, er zit altijd 1px ruimte tussen.

Is dit een bug, en zo ja, voor welke browser moet ik een fix uitvoeren?

Edit:
Plaatjes offline

[ Voor 3% gewijzigd door Verwijderd op 03-12-2006 21:02 ]

vrijdag 13 oktober 2006 12:39

Acties:

crisp

Devver

Pixelated

Maar Firefox reserveert die ruimte voor een border ook als er geen border is!

Nee, dat is niet waar, die 'ruimte' komt door de line-height

Intentionally left blank

vrijdag 13 oktober 2006 12:41

Acties:

Geert.H

Als je in IE de padding op 1px; zet dan heb je hetzelfde effect als in firefox. Verder reserveert firefox (bij mijn weten) die ruimte niet als je geen border declareert. Hoe kom je daar bij? Wellicht moet je border-width op 0px zetten.

vrijdag 13 oktober 2006 13:04

Acties:

Verwijderd

Topicstarter

Ghoekzema schreef op vrijdag 13 oktober 2006 @ 12:41:
Als je in IE de padding op 1px; zet dan heb je hetzelfde effect als in firefox. Verder reserveert firefox (bij mijn weten) die ruimte niet als je geen border declareert. Hoe kom je daar bij? Wellicht moet je border-width op 0px zetten.

Het is misschien niet zo dat Firefox de ruimte reserveert, maar het lijkt wel zo. Ik kom daarbij omdat ik het zie wanneer ik de <li> een achtergrondkleur geeft en de border declaratie weghaal.Dan blijft de ruimte wit waar voorheen de border zat.

Als het inderdaad line-height is, hoe verwijder ik het dan? Want ik kan niet zeggen dat de line-height 1 px minder moet zijn toch?

vrijdag 13 oktober 2006 14:50

Acties:

Geert.H

Jawel dat kan je wel

Cascading Stylesheet:

1	line-height: 15px;

En dat de ruimte wit blijft waar eerst de border zat is omdat firefox de border om het element heen plaatst (itt IE die de border in het element plaatst zoals je zelf ook al zag). Dus dat hoort niet meer bij het element, en zal dus ook niet mee worden ingelkleurd als je een background-color gebruikt.