WN - Strul med CSS

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Strul med CSS (https://www.wn.se/forum/showthread.php?t=29038)

Jag är säkert trött och halvdålig på CSS, men problemet är att punkterna i punktlistan visas upp väldigt konstigt i IE - men helt i sin ordning i FF.

Kolla med Internet Explorer på denna undermeny

.subMenu0 funkar som det ska, men de efterföljande funkar inte.

Kod:

#sidebar .subMenu0 {

        padding-left: 14px;

}



#sidebar .subMenu1 {

        margin-left: 15px;

        padding-top: 0px;

}



#sidebar .subMenu2 {

        margin-left: 35px;

        padding-top: 0px;

}



#sidebar .subMenu3 {

        margin-left: 48px;

        padding-top: 0px;

}

Förslag på lösning?

Kod:

<ul>

<li>Meny1

<ul>

<li>Meny1 under 1</li>

<li>Meny1 under2</li>

</ul>

</li>

<li>Meny2</li>

<li>Meny3

<ul>

<li>Meny 3 under 1</li>

</ul>

Sedan kan du styla den som du vill ha det, funkar i både FF och IE.

Karl, jag tror inte din kod skulle validera.
Men den är inte helt olik min kod:

Kod:

<ul>

<li class="subMenu0"><a href="?page=19" title="Blogg">Blogg</a></li>

<li class="subMenu0"><a href="?page=3" title="Kontakt">Kontakt</a></li>

<li class="subMenu0"><a href="?page=30" title="Tidsfördriv">Tidsfördriv</a></li>

<ul>

<li class="subMenu1"><a href="?page=37" title="Youtube">Youtube</a></li>

<ul>

<li class="subMenu2"><a href="?page=60" title="Geek-varning">Geek-varning</a></li>

<li class="subMenu2"><a href="?page=50" title="Grand Theft Auto">Grand Theft Auto</a></li>

<li class="subMenu2"><a href="?page=55" title="Konstfilm">Konstfilm</a></li>

<li class="subMenu2"><a href="?page=54" title="Bus på allmän plats">Bus på allmän plats</a></li>

<li class="subMenu2"><a href="?page=52" title="Virala utvecklargrejer">Virala utvecklargrejer</a></li>

</ul>

<li class="subMenu1"><a href="?page=59" title="Om upphovsrätt">Om upphovsrätt</a></li>

<li class="subMenu1"><a href="?page=43" title="Jordens rotation mörklägger hela nordamerikanska kontinenten">Jordens rotation mörklägger hela nordamerikanska kontinenten</a></li>

<li class="subMenu1"><a href="?page=28" title="Tungvrickare">Tungvrickare</a></li>

<li class="subMenu1"><a href="?page=27" title="Uppfostran">Uppfostran</a></li>

</ul>

<li class="subMenu0"><a href="?page=47" title="Kalender">Kalender</a></li>

</ul>

Poängen är alltså att få lite mer indrag för varje ny <ul>-nivå, och punkterna ligger helt fel.
Fler idéer?

Nu har allt löst sig genom att jag inte lägger in punkterna som bakgrund utan kör med list-style-image: url(); istället. Logiskt.

Dock fungerar inte paddingen i Internet Explorer som man kanske väntat sig, det är hysteriskt mycket mer marginal i IE.

Nja, du kan inte stänga li före du lägger in en ny ul, KarlRoos kod är däremot korrekt. (fast den saknar sista /li)

Citat:

Originally posted by Osiris@May 1 2008, 22:58
Dock fungerar inte paddingen i Internet Explorer som man kanske väntat sig, det är hysteriskt mycket mer marginal i IE.

Jo, därför är det alltid bra att börja med att nollställa alla margins och paddings i din css-mall, och sedan själv ange detta för de element som behöver detta.

Citat:

Ursprungligen postat av Taras

Citat:

Ursprungligen postat av Osiris

Dock fungerar inte paddingen i Internet Explorer som man kanske väntat sig, det är hysteriskt mycket mer marginal i IE.

Jo, därför är det alltid bra att börja med att nollställa alla margins och paddings i din css-mall, och sedan själv ange detta för de element som behöver detta.

http://meyerweb.com/eric/thoughts/2007/05/...reset-reloaded/ ;)

Vilken doc type använder du? Om sidan renderas i quirks mode får du aldrig till det.