[IE7] Probleem met lists

[Verwijderd]

Ik moet een website aanpassen die goed werkt in IE6 en FF, maar niet in IE7.
Het gaat om een menu, die enkele menu-items boven elkaar moet laten zien. Nu is het zo dat in IE7 'Submenu 2' en 'Over ons' door elkaar heen lopen. Enig idee hoe dit is op te lossen in de CSS?
Ik kan wel een rule schrijven die zorgt dat een bepaalde code alleen in IE7 werkt, maar ik weet niet waarom beide teksten door elkaar heen lopen.

Wat ik zelf heb gedaan is me dood zitten te staren op waarom het niet werkt in IE7. Ik heb al wel diverse fora bekeken om te kijken of iemand hetzelfde probleem had, maar dat had niet direct betrekking op mijn probleem.

html:

code:

<ul>
    <li class="active first"><a href="home" title="Home">Home</a>
<ul>
    <li class="first last"><a href="home/sub" title="sub">sub</a>
<ul>
    <li class="first last"><a href="home/sub/submenu2" title="Submenu 2">Submenu 2</a></li>
</ul></li>
</ul></li>
    <li><a href="overons" title="Over Us">Over ons</a></li>

    <li class="last"><a href="opleidingen" title="Opleidingen">Opleidingen</a></li>
</ul>

css:

code:

#left ul {
    margin: 15px 4px 15px 4px;  
}

#left ul li ul {
    margin: 0;
}

#left ul li {
    background: transparent url("../../images/nav_item_back.gif") no-repeat left 23px;
    float: left;    
    width: 145px;
}

#left ul li a {
    background: transparent url("../../images/nav_item_bullet.gif") no-repeat right center;
    display: block;
    height: 20px;
    outline: none;
    padding: 2px 0px 2px 0px;
    text-decoration: none;
}

#left ul li a:hover, #left ul li.active a {

}

#left ul li.active > a {
    color: #ff9c00;
    font-weight: bold;
}

#left li ul li {
    width: 129px;
}

#left li ul li a {
    background: none;
    padding-left: 16px;
}

#left li ul li.active a {
    background: transparent url("../../images/nav_item_bullet_orange.gif") no-repeat left center;   
}

[ Voor 10% gewijzigd door Verwijderd op 27-12-2007 15:41 ]

[RobIII]

Kan iemand even...?
Wat heb je zelf al geprobeerd? Zoals ik je topic nu lees post je alleen het probleem en ik mis dus nogal wat eigen inzet. Verder mis ik een degelijke topictitel.

Graag zou ik je topicstart aangevuld zien met je eigen probeersels en graag via een TR () een voorstel voor een topictitel die de lading dekt

Overigens klopt er geen drol van je nesting van ul's en li's of ik mis een stuk code Probeer je code goed in te springen; ik moest 6 keer kijken voor ik door had wat er gaande is De code en CSS die je nu post is overigens te 'incompleet' om je probleem te illustreren.

[ Voor 28% gewijzigd door RobIII op 27-12-2007 15:30 ]

[Verwijderd]

Als het gaat om browser inconsistencies dan gebruik ik wel eens een javascriptje dat autamtisch alle elementen een class geeft a.d.h.v. de browser die de pagina laadt.

zie: http://rafael.adm.br/css_browser_selector/

Zo kun je css styles uit delen per browser, het werkt wel leuk.

Conditional comments werken natuurlijk ook.

[Verwijderd]

aan elk element een extra class? wat een onzin zeg, gewoon aan body zou al voldoende zijn. En dan nog. Conditional comments is netter imho