Het is weer eens zover mij "favorieten" browser werkt me weer is tegen, dit maal met mijn navigatie
Ik kan het niet vinden...

HTML

Code:

  <ul id="navigatie"> 
    <li><a href="/home">Home</a></li> 
    <li><a href="/inloggen">Inloggen</a></li> 
    <li><a href="/registreren">Registreren</a></li> 
    <li><a href="/contact">Contact</a></li> 
  </ul>

CSS

Code:

#navigatie { font-family: "Cabin", sans-serif; text-shadow: 0 1px 1px #393939; float: right; height: 50px; margin: 60px 120px 0 0; text-transform: uppercase; }
#navigatie li { float: left;}
#navigatie li a { background-position: 100% -260px; color: #fff; display: block;font-size: 15px; height: 50px; letter-spacing: .04em; line-height: 50px; padding: 0 14px 0 12px; }
#navigatie li.current a { color: #393939; text-shadow: 0 1px 1px #f0f0f0;}
#navigatie li.last a { background: none; }
#navigatie li a:hover { color: #393939; text-shadow: 0 1px 1px #f0f0f0;}

Ik hoop dat jullie mij kunnen helpen met dit euvel.

MVG,
gast14653

Bij "#navigatie li a" moet je "display: block;" verwijderen, dan zal je lijst er normaal gezien uitzien zoals in de andere browsers.

Als je een display van block hebt wil dit zeggen dat een element 100% van de breedte wil innemen, waardoor alles dus zijn eigen lijn krijgt. Het werkt wel in Firefox (of een andere browser) wel doordat float de waarde left heeft bij het parent element, maar daar houdt IE6 geen rekening mee.

In het geval dat je de eigenschappen van een block-level element wel nodig hebt (voor bijvoorbeeld een grootte te geven) kan je de display property de waarde "inline-block" geven. Dit werkt niet op IE6 en daar zal gewoon niets gebeuren (het element blijft gewoon inline).

Je bent een held, het werkt nu.