[CSS / IE7] Geneste ul

[SandaX]

Ik ben bezig een stroomschema, gebaseerd op een organogram, te maken, door gebruik te maken van geneste ul's. Nu snappen Firefox, Safari, Opera en IE8 exact wat de bedoeling is. IE7 zit me echter weer eens dwars.

Een deel van de bovenliggende ul's (de parents dus) lijken in deze browser een extra margin aan de linkerkant te krijgen, en welke margin ik ook verwijder, ik heb geen idee waar deze vandaan komt.

De, naar mijn idee, relevante snippets:

Cascading Stylesheet:

ul { list-style:none; margin:0; padding:0;}

#organogram { width:570px; background-image:url('images/organogram_back.png'); background-repeat:no-repeat;}
#organogram a{ display:block; width:120px; padding:3px; background-color:#9C3; color:#FFF;}
#organogram ul {float:left;}
#organogram ul li { text-align:center; margin:20px 5px 20px 0px;}
#organogram .right{ margin:-50px 0 0 140px;}
#organogram .right li, #organogram .left li{ border:1px solid #9c3; background-color:#FFF; font-size:0.8em; width:100px; margin:5px 0 5px 0; padding:2px; color:#666}
#organogram .left{ margin:-30px  0 0 -115px; }
.inline { display:inline; float:left;}

HTML:

    <div id="organogram">
        <ul style="margin-left:90px;">
            <li><a>Slachoffer benaderen</a>
                <ul class="right">
                    <li>Rautek</li>
                    <li>Aanspreken, schudden</li>
                </ul>
            </li>
            <li class="inline"><a>G&eacute;&eacute;n reactie</a>
                <ul>
                    <li><a>Roep om hulp</a></li>
                    <li><a>Luchtweg openen</a>
                        <ul class="left" style="margin-top:-50px;">
                            <li>Hoofd kantelen, kinlift</li>
                            <li>Draaien buik naar rug</li>
                        </ul>
                    </li>
                    <li><a>Ademhaling controleren</a>
                        <ul class="right" style="margin-top:-46px;">
                            <li>Max. 10 sec. kijken, luisteren en voelen</li> 
                        </ul>
                    </li>
                    <li class="inline" style="width:130px;"><a>G&eacute;&eacute;n normale ademhaling</a></span>
                        <ul>
                            <li><a>Alarmeren</a></li>
                            <li><a>Reanimeren</a>
                                <ul class="left" style="margin-top:-70px;">
                                    <li>30x borstcompressies</li>
                                    <li>2x beademen</li>
                                    <li>Mondinspectie</li>
                                    <li>Snelle kantelmethode</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="inline" style="width:130px;"><a>Wel normale ademhaling</a>
                        <ul>
                            <li><a>Alarmeren</a></li>
                            <li><a>Stabiele zijligging</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="inline"><a>Wel reactie</a>
                <ul>
                    <li><a>Slachtoffer beoordelen</a></li>
                    <li><a>Zonodig roep om hulp of alarmeren</a></li>
                    <li><a>Overig letsel</a></li>
               </ul>
            </li>
        </ul>
        <br class="clear" />
    </div>

Een live voorbeeld is hier te vinden.

Iemand een idee hoe dit schema in IE7 ook correct weergegeven wordt?

[Flowmo]

dit is de boosdoener:

#organogram ul li { text-align:center; margin:20px 5px 20px 0px;}

Haal je text-align:center eens weg op die regel, en zet die op de ul li a. Dan moet het doen wat het moet doen geloof ik.

[SandaX]

Je bent een held! Ik heb er een hele tijd op lopen staren en kon het echt niet vinden. Bedankt voor de hulp.

[moozzuzz]

In IE6 werken de accolades nog even niet zo goed :^)