Ik heb een probleem met mijn menu in IE6.

In internet explorer 7 en in FF gaat het prima.

Zie bijlages.
je ziet op de goede dat er keurig allemaal menuitems staan aan de linkerkant.
Maar in IE6 laat ie alle menuitems niet zien, zijn alle knoppen wit en is de tekst wit (staat er wel, als ik het selecteer zie je het) en zijn de menuitems veel te hoog.

CSS:

Code:

#leftmenu {
width: 15%;
height: 372px;
position: relative;
float: left;
background-color: #FFFFFF;
}

#leftmenu ul {
margin: 0px 0px 0px 0px;
padding: 0px;
list-style-type: none;
}

#leftmenu a {
font-family: Calibri;
font-size: 14px;
color: #ffffff;
text-decoration: none;
background-color: #0f0453;
display: block;
padding: 1px 6px 1px 10px;
border-top: 1px solid #FFFFFF;
margin: 0px;
}

#leftmenu a:link {
color: #ffffff;
text-decoration: none;
}

#leftmenu a:visited {
color: #ffffff;
text-decoration: none;
}

#leftmenu a:hover {
background-color: #545454;
color: #ffffff;
text-decoration: none;
}

.current {
padding-top: 10px;
}

HTML:

Code:

<div id="leftmenu">
<ul>
<li><a href="#">Tekst</a></li>
<li><a href="#">Tekst</a></li>
<li><a href="#">Tekst</a></li>
<li><a href="#">Tekst</a></li>
<li><a href="#">Tekst</a>
<li><a href="#">Tekst</a></li>
<li><a href="#">Tekst</a></li>
<li><a href="#">Tekst</a></li>
<li><a href="#">Tekst</a></li>
<li><a href="#">Tekst</a></li>
<br />
<li><a href="#">Tekst</a></li>
<br />
<li><a href="#">Tekst</a></li>
<li><a href="#">Tekst</a></li>
<li><a href="#">Tekst</a></li>
<li><a href="#">Tekst</a></li>
<br />
<li><a href="#">Tekst</a></li>
</ul>
</div>

IE6 heeft voor de LI enige opmaak nodig

plaats in de stylesheet:

#leftmenu li { width: 100%; }

Bedankt voor de hulp!

Nadat ik nog wat margins en paddings had aangepast werkte het!

*opgelost *

Mooi. ;)

IE6 is echt een draak van een browser, maar hij biedt wel wat extra, namelijk dat je leert om bepaalde zaken ook echt op te geven. FF is zeer vergevingsgezind.

Het probleem dat je had, was geen layout voor de LI. Hierdoor trigger je een aantal bugs in IE6. Zoals bijvoorbeeld de white space bug. Deze veroorzaakt een grotere ruimte tussen de elementen dan gewenst. Een oplossing is bijvoorbeeld alle elementen achterelkaar te plaatsen zonder regelomhaal. Dus bijv.:

Code:

<ul><li></li><li></li></ul>

Beter is het natuurlijk layout toe te voegen.

Daarnaast bevat je lijst een <br /> die gebruik je eigenlijk niet in een lijst, beter is de LI die meer ruimte nodig heeft van een apparte class te voorzien of zelfs in een eigen lijst te plaatsen. Bovendien alleen een br met slash gebruiken in een xhtml document ;)

IE is en blijft een uitdaging ...

Maar 'layout' toevoegen wat bedoel je daar precies mee? Nadat ik de Li die width 100% had meegegeven toonde hij de knopjes.

Maar toen moest ik nog met margin en padding aan de slag om de witruimte weg te werken.

Zo:
#leftmenu li {
width: 100%;
padding: 0px 0px 0px 0px;
margin: 1px 0px -4px 0px;
}

#leftmenu a {
padding: 0px 6px 0px 10px;
}

Staat het redelijk. Nog niet zoals het hoort, maar ach het is mijn eigen website, en ik wil niet teveel rekening meer houden met de oude browsers.
Het werkt, ze kunnen door het menu navigeren en dat is het belangrijkste.