[CSS] Margin van <ul> gaat niet goed in IE *

[Zoefff]

Ik wil graag naast iedere <li> een plaatje zetten als background.

Dit doe ik met

background-image:url('plaatje.gif')

Vervolgens geef ik die <li>

padding-left:40px;

mee, zodat de tekst naast het plaatje staat, en niet er op. So far so good.

De <ul> begint echter standaard een stuk ingesprongen naar rechts, dus geef ik <ul>

margin-left:-40

mee, om hem zo weer op 0 te zetten zegmaar. En daar begint de ellende.

In FF gaat het namelijk goed, de <ul> begint gewoon op 0. Maar IE moet weer raar doen, en zet hem ineens een stuk naar links, ipv op 0. Hoe los ik dit op?

De relevante HTML:

HTML:

<ul>
    <li>Blaat</li>
    <li>Blaat2</li>
</ul>

Relevante CSS:

Cascading Stylesheet:

ul {
    list-style:none;
    margin-left:-40px;
}
li {
    background-image:url('alert.gif');
    background-repeat:no-repeat;
    padding-left:40px;
}

Een voorbeeld van wat ik bedoel kan je hier vinden (onderaan de pagina).

[ Voor 7% gewijzigd door Zoefff op 19-10-2004 14:28 ]

[We Are Borg]

Waarom doe je niet dit:

Cascading Stylesheet:

list-style-image: url(http://zoefff.gotdns.com/emulefaq/alert.gif);

?

edit:
IRC telt niet

[ Voor 11% gewijzigd door We Are Borg op 19-10-2004 14:35 ]

[Erkens]

kan je niet proberen met list-style-image ?


/spuit 11, hoewel ik @ irc eerder was

[ Voor 19% gewijzigd door Erkens op 19-10-2004 14:35 ]

[Rickets]

Erkens schreef op 19 oktober 2004 @ 14:34:
kan je niet proberen met list-style-image ?


/spuit 11, hoewel ik @ irc eerder was

list-style-image heeft een gebrekkigere ondersteuning, een background-image vind ik geen slechte oplossing.

Het komt door die rare negatieve margin
Probeer het eens zo Dat ziet er lokaal bij mij wel goed uit in ieder geval.

Cascading Stylesheet:

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

[ Voor 6% gewijzigd door Rickets op 19-10-2004 14:45 ]

[Erkens]

Rickets schreef op 19 oktober 2004 @ 14:44:
list-style-image heeft een gebrekkigere ondersteuning, een background-image vind ik geen slechte oplossing.

klopt, dat was mijn idee

Cascading Stylesheet:

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

moet je dan die list-style ook niet aangeven bij de li-elementen?

[We Are Borg]

Rickets schreef op 19 oktober 2004 @ 14:44:
[...]

list-style-image heeft een gebrekkigere ondersteuning, een background-image vind ik geen slechte oplossing.

Hoezo dat ? Aangezien het hier echt gaat om een list style image en niet een background, zou de eerste oplossing de voorkeur moeten krijgen. De afstand vergroten tussen deze image en de tekst is goed te doen, evenals de margin goed te krijgen. Kortom, zie het probleem niet

[Erkens]

We Are Borg schreef op 19 oktober 2004 @ 14:47:
[...]
Hoezo dat ? Aangezien het hier echt gaat om een list style image en niet een background, zou de eerste oplossing de voorkeur moeten krijgen. De afstand vergroten tussen deze image en de tekst is goed te doen, evenals de margin goed te krijgen. Kortom, zie het probleem niet

browser ondersteuning

[Rickets]

Erkens schreef op 19 oktober 2004 @ 14:47:
moet je dan die list-style ook niet aangeven bij de li-elementen?

Nee, door inheritance wordt het automatisch toegepast op de li-elementen in het lijstje.

We Are Borg schreef op 19 oktober 2004 @ 14:47:
[...]
Hoezo dat ? Aangezien het hier echt gaat om een list style image en niet een background, zou de eerste oplossing de voorkeur moeten krijgen. De afstand vergroten tussen deze image en de tekst is goed te doen, evenals de margin goed te krijgen. Kortom, zie het probleem niet

IE 'schijnt' nog moeite te hebben met het renderen van list-style-images in bepaalde situaties. Ben het zelf nog niet tegengekomen, maar als je het kan voorkomen met een background, waarom niet? Maar het staat je vrij om list-style-image te gebruiken hoor als het voor jou probleemloos werkt

[ Voor 7% gewijzigd door Rickets op 19-10-2004 14:53 ]

[We Are Borg]

Erkens schreef op 19 oktober 2004 @ 14:48:
[...]

browser ondersteuning

Is IE, Opera, Netscape/Mozilla laatste versie's niet genoeg . Geen idee hoe het met oudere versie's zit, want daarin heb ik niet getest

Rickets schreef op 19 oktober 2004 @ 14:52:
IE 'schijnt' nog moeite te hebben met het renderen van list-style-images in bepaalde situaties. Ben het zelf nog niet tegengekomen, maar als je het kan voorkomen met een background, waarom niet?

Sorry, ben even eigenwijs , maar waarom voorkomen als er geen probleem is. Gewoon testen en kijken wat er gebeurd op de, naar mijn mening beste, eerste manier.

[ Voor 47% gewijzigd door We Are Borg op 19-10-2004 14:54 ]

[Zoefff]

Rickets schreef op 19 oktober 2004 @ 14:44:
[...]

list-style-image heeft een gebrekkigere ondersteuning, een background-image vind ik geen slechte oplossing.

Het komt door die rare negatieve margin
Probeer het eens zo Dat ziet er lokaal bij mij wel goed uit in ieder geval.

Cascading Stylesheet:

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

Hm, dat werkt inderdaad!

Thnx