[CSS] UL LI custom list image positionering

[BikkelZ]

Ik heb een UL LI menu met custom images, de plus en min uit Windows explorer. Zo kan ik met wat redelijk simpele CSS hacks en JavaScript een mappen boomstructuur simuleren in een webpagina. Werkt onder FireFox etc., onder Internet Explorer 7 (forget about 6) heb ik nog wat bugs, waaronder deze:

Alle plussen en minnen staan verticaal in het midden van de LI waar deze bij hoort, terwijl een list item normaal bovenaan staat. Ook als ik deze code zo los bekijk zie ik de list item bovenaan staan in IE7. Bekijk ik hem met CSS, en verander ik in die IE developer toolbar de image in none en de style in disc, dan staat de disc ONDERAAN de LI, om het feest compleet te maken

De background-truc werkt natuurlijk niet omdat het echt een (werkende) knop is.

HTML:

<ul id="projects">
    <li style="" class="parent">
    <span style=
    "border: thin outset rgb(187, 238, 51); background-color: rgb(187, 238, 51);">
    Jansen B.V.</span>
    <ul>
        <li style="" class="parent">
        <span style=
        "border: thin outset rgb(187, 238, 51); background-color: rgb(187, 238, 51);">
        Nieuwe website</span>
        <ul>
            <li style="">
            <span style=
            "border: thin outset rgb(187, 238, 51); background-color: rgb(187, 238, 51);">
            Support strippenkaart</span>
            </li>
            <li style="">
            <span style=
            "border: thin outset rgb(187, 238, 51); background-color: rgb(187, 238, 51);">
            Sales</span>
            </li>
            <li style="" class="parent">
            <span style=
            "border: thin outset rgb(187, 238, 51); background-color: rgb(187, 238, 51);">
            SEO update</span>
            <ul>
                <li style="">
                <span style=
                "border: thin outset rgb(187, 238, 51); background-color: rgb(187, 238, 51);">
                Test JS</span>
                </li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
    </li>
    <li style="" class="parent">
    <span style=
    "border: thin outset rgb(85, 68, 238); background-color: rgb(85, 68, 238);">
    Gropide</span>
    <ul>
        <li style="" class="parent">
        <span style=
        "border: thin outset rgb(85, 68, 238); background-color: rgb(85, 68, 238);">
        Intranet</span>
        <ul>
            <li style="">
            <span style=
            "border: thin outset rgb(85, 68, 238); background-color: rgb(85, 68, 238);">
            Presales traject</span>
            </li>
            <li style="">
            <span style=
            "border: thin outset rgb(85, 68, 238); background-color: rgb(85, 68, 238);">
            Ontwikkeling</span>
            </li>
        </ul>
        </li>
    </ul>
    </li>
    <li style="" class="parent">
    <span style=
    "border: thin outset rgb(34, 238, 68); background-color: rgb(34, 238, 68);">
    Berendsen Mapnavigatiesystemen B.V.</span>
    <ul>
        <li style="">
        <span style=
        "border: thin outset rgb(34, 238, 68); background-color: rgb(34, 238, 68);">
        Groente en fruit</span>
        </li>
    </ul>
    </li>
</ul>

En de relevante CSS:

Cascading Stylesheet:

#projects {
    margin: 0px;
    padding-left:20px;
    width: 220px;
    float: left;
}

#projects ul {
    margin: 0px;
    padding-left:20px;
}

#projects li {
    margin-left: 0px;
    list-style: none;
    list-style-image: none;
    list-style-type: none;
    cursor: crosshair;
    width: 140px;
    /*font-size: 12px;*/
}

#projects li.parent {
    cursor: pointer;
    list-style-image: url('../images/close.png');
}

#projects li span {
    cursor: move;
    /*background-color:#99AADD;*/
    width: 140px;
    display: block;
    /*border: thin outset #99AADD;*/
    text-align: left;
    padding: 3px;
}

#projects li ul {
    cursor: auto;
}

#projects li.parent > span {
    /*background-color:#99AACC;
    border: thin outset #99AACC;*/
    cursor: default;
}

#projects li.closed {
    list-style-image: url('../images/open.png');
}

#projects li.closed ul {
    display: none;
}

[ Voor 1% gewijzigd door BikkelZ op 06-10-2008 11:25 . Reden: background truc ]

[Bosmonster]

1. alternatieve IE stylesheet?
2. waarom al die lelijke inline style
3. waarom spans gebruiken als je ze toch op display: block zet?
4. mijn ervaring met list-style images is dat het handiger is het element gewoon een achtergrond te geven, in dit geval je span. Zo kun je bullets xbrowser op de pixel nauwkeurig positioneren.
5. mag ik je er bovendien op wijzen dat IE6 nog door gemiddeld 20-50% van de bezoekers gebruikt wordt?
6. hacks zijn vies, gebruik conditional statements

[ Voor 18% gewijzigd door Bosmonster op 06-10-2008 11:31 ]

[BikkelZ]

Bosmonster schreef op maandag 06 oktober 2008 @ 11:28:
1. alternatieve IE stylesheet?
2. waarom al die lelijke inline style
3. waarom spans gebruiken als je ze toch op display: block zet?
4. mijn ervaring met list-style images is dat het handiger is het element gewoon een achtergrond te geven, in dit geval je span. Zo kun je bullets xbrowser op de pixel nauwkeurig positioneren.
5. mag ik je er bovendien op wijzen dat IE6 nog door gemiddeld 20-50% van de bezoekers gebruikt wordt?
6. hacks zijn vies, gebruik conditional statements

1. Zo lang ik weet wat ik daar in moet zetten, vind ik het prima. Dit is gewoon een keiharde IE-bug IMHO.
2. Dynamisch gegenereerde code, ik weet niet alles van te voren zodat ik het netjes bijvoorbeeld in een classkan zetten.
3. Omdat ze over de LI heen moeten vallen, de LI triggert de klik op de list item en dat wil ik niet
4. Maar dan is de bullit niet meer klikbaar, nu wel, zelfs onder IE
5. Dit is geen website maar een urenregistratiesysteem, ik weet wat onze consultants gebruiken dan wel zouden moeten gebruiken.

[Tsunami]

BikkelZ schreef op maandag 06 oktober 2008 @ 11:50:
2. Dynamisch gegenereerde code, ik weet niet alles van te voren zodat ik het netjes bijvoorbeeld in een classkan zetten.
3. Omdat ze over de LI heen moeten vallen, de LI triggert de klik op de list item en dat wil ik niet

2. Het lijkt er toch echt op dat ze allemaal dezelfde style hebben, als er één is die een andere style kan hebben kan je daar toch een tweede class aan hangen?
3. Dat is geen antwoord op zijn vraag? span is voor display: inline, div voor display: block. Dus gebruik div, dan hoef je ze ook niet op display: block te zetten.

[BikkelZ]

Tsunami schreef op maandag 06 oktober 2008 @ 12:01:
[...]

2. Het lijkt er toch echt op dat ze allemaal dezelfde style hebben, als er één is die een andere style kan hebben kan je daar toch een tweede class aan hangen?

Alle geneste items hebben nu nog de zelfde kleur en border, ik wilde daar in de toekomst nog wat meer mee doen qua helderheid zodat je nog wat beter het verschil ziet tussen de verschillende lagen. Een klant / project heeft een bepaalde kleur die ik uit de database haal.

Als je kijkt zie je ook dat de onderste en de bovenste wel degelijk andere kleuren hebben. Maar zou het ook iets te maken kunnen hebben met het probleem wat ik schets denk je?

Tsunami schreef op maandag 06 oktober 2008 @ 12:01:
[...]
3. Dat is geen antwoord op zijn vraag? span is voor display: inline, div voor display: block. Dus gebruik div, dan hoef je ze ook niet op display: block te zetten.

OK, ik ga het even proberen.

----------------

Nee dat had dus geen effect.

(ik denk dat ik het eerder er in heb gezet als span maar dat ik later toch block functionaliteit wilde)

[ Voor 7% gewijzigd door BikkelZ op 06-10-2008 13:22 ]

[BikkelZ]

Heeft niemand een idee wat het verticaal uitlijnen van een list bullit point triggert in IE?

[Bosmonster]

Ja, niks.

Je kunt twee dingen doen:

1. alternatieve stylesheet met andere image (met wat meer ruimte aan de bovenkant)
2. geen list-style-image gebruiken, maar background-image. Die kun je wel op de pixel positioneren en werken ook precies hetzelfde xbrowser.

Magoed, deze oplossingen had ik eerder ook al gegeven..