CSS: display:block <-> IE

[ChroMe]

HTML

code:

<ul class="navlist">
      <li><a href="index.htm">Home</a></li>
      <li><a href="onderdelen.htm">Onderdelen</a></li>
      <li><a href="systemen.htm">Systemen</a></li>
      <li><a href="software.htm">Software</a></li>
      <li><a href="randapparaten.htm">Randapparaten</a></li>
      <li><a href="contact.htm">Contact</a></li>
</ul>

CSS

code:

.navlist
{
  padding: 1px 1px;                 /* Dikte van de rand rond de links */
  margin-left: 0;                       /* Tekst plakt tegen de linkerkant */
  font: bold 12px Arial, sans-serif;        /* Lettertype en grootte van de tekst in de menu */
  background: #000000;                  /* Kleur van de kader rond het geheel */
  width: 120px;                     /* Breedte van de menu */
}

.navlist li
{
  list-style: none;                 /* Geen bolletjes voor de lijstitems etc */
  border-top: 1px solid #000000;            /* Kleur van de lijn bovenaan de cel */             
  text-align: left;                 /* Tekst wordt links uitgelijnd */
}

.navlist li a
{
  display: block;                       /* Wordt als blok weergegeven, met een linebreak voor en na het element */                  
  padding: 3px 3px 3px 5px;             /* Ruimte rond de tekst */
  border-left: 7px solid #FFFFFF;           /* Breedte van het streepje voor de link */
  background: #0057A1;                  /* Achtergrond van de links */
  text-decoration: none;                /* Niet onderlijnen */
}

.navlist li a:link { 
  color: #FFFFFF; 
}

.navlist li a:visited { 
  color: #FFFFFF; 
}

.navlist li a:hover {
  border-color: #FF9C00;
  color: #FF9C00;
}

hij geeft het juist weer in firefox, maar in internet explorer werkt het niet, als ik die display block wegneem dan krijg ik in beide browsers hetzelfde resultaat (maar niet mooi natuurlijk)

iemand een idee?

Grtz

[Sappie]

probeer eens "display: inline-block;" toe te passen ipv "display: block" voor IE.

[ Voor 21% gewijzigd door Sappie op 12-01-2006 13:24 ]

[ChroMe]

Neen werkt ook niet... nog steeds een raar resultaat (ook in FF trouwens met inline-block)

Toch bedankt voor de snelle reactie

[crisp]

Geef je anchor eens een height om layout te forceren

[ChroMe]

Firefox


Internet Explorer

[ Voor 5% gewijzigd door ChroMe op 12-01-2006 13:38 ]

[ChroMe]

crisp schreef op donderdag 12 januari 2006 @ 13:36:
Geef je anchor eens een height om layout te forceren

Dat werkt, maar dit is niet echt een propere manier om het op te lossen denk ik hé, al kan het soms met die domme IE niet anders denk ik...

Maar nu begrijp ik nog steeds het probleem niet juist, is het omdat een <li> al automatisch een newline toevoegt en die display:block: ook nog eens?? en dat daar IE de mist in gaat ofzo

Als iemand nog een propere oplossing heeft, plz tell me

Grtz

[Sappie]

display:inline-block wordt nog niet ondersteund door Firefox en zou je dus alleen aan Internet Explorer moeten serveren. Ook forceert het toepassen van display: inline-block net zoals het toepassen van een height hasLayout.

Pas display: inline-block; eens toe op je li's ipv je a's. Ik ken dit probleem zeker, maar heb nu even geen tijd om er verder naar te kijken.

[crisp]

ChroMe schreef op donderdag 12 januari 2006 @ 13:40:
[...]
Dat werkt, maar dit is niet echt een propere manier om het op te lossen denk ik hé, al kan het soms met die domme IE niet anders denk ik...

Dat laatste

[David]

Wat ik altijd doe bij dit probleem:

code:

<ul class="navlist"
      ><li><a href="index.htm">Home</a></li
      ><li><a href="onderdelen.htm">Onderdelen</a></li
      ><li><a href="systemen.htm">Systemen</a></li
      ><li><a href="software.htm">Software</a></li
      ><li><a href="randapparaten.htm">Randapparaten</a></li
      ><li><a href="contact.htm">Contact</a></li
></ul>

En het valideert ook nog

[crisp]

Ik doe de list-items nog wel eens floaten voor IE...