[css] Bullets voor list-items verdwijnen in IE - Softwareontwikkeling

dinsdag 23 mei 2006 14:12

Acties:

Verwijderd

Topicstarter

Ik wil voor een menu gebruiken maken van de standaard list-style-types en niet van afbeeldingen in de achtegrond. (De discussie waarom, wil ik niet aangaan

).

De hoofdmenu-items moeten achter elkaar komen te staan.
Dit doe ik met float:left en het zou ook kunnen met display:inline (op de LI).

In Firefox blijven de 'bullets' gewoon zichtbaar, zoals ik het graag wil.
In Internet Explor 6.0 verdwijnen de 'bullets'.

Nu weet ik dat IE list-items anders rendert dan FF.
En dmv het spelen met marges krijg ik het in mijn oorspronkelijke document voor elkaar om zowel in FF als IE de weergave exact hetzelfde te krijgen (NB: de list-items staan dan onder elkaar).

Is er echter een manier/bug fix voor IE om toch de 'bullets' te behouden EN de list-items achter elkaar weer te geven?

Ik heb op Google gezocht, maar kan geen bruikbare info vinden. Wellicht gebruik ik verkeerde zoektermen. Ik kwam wel tot de disappearing background bug op www.positioniseverything.com, maar die fixes hielpen niet en ik denk dan ook dat dit niet mijn probleem is.

Dit is de code die ik gebruik om te testen:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="all">
ul{
    background-color: blue;
    overflow: auto;
    height: 1%;
    padding: 10px;
    margin: 10px;
}
li{
    float: left;
    margin: 10px;
    padding: 10px;
    background-color: orange;
}
</style>
</head>

<body>
<ul>
 <li>optie 1</li>
 <li>optie 2</li>
 <li>optie 3</li>
 <li>optie 4</li>
</ul>
</body>
</html>

dinsdag 23 mei 2006 14:33

Acties:

Rekcor

Misschien heb je hier iets aan:
http://www.htmlforums.com/archive/index.php/t-66427.html

dinsdag 23 mei 2006 14:41

Acties:

Verwijderd

Topicstarter

Mja, interessant, maar ook hier gebruiken ze afbeeldingen of een teken. Ik wil gewoon de bullet terug

dinsdag 23 mei 2006 15:02

Acties:

Sappie

De Parasitaire Capaciteit!

Probeer voor Internet Explorer eens "display: inline-block" in plaats van "float: left" op te geven voor je list items. Ik heb hier geen IE bij de hand helaas, maar verwacht dat dat je probleem wel eens op zou kunnen lossen.

[ Voor 11% gewijzigd door Sappie op 23-05-2006 15:03 ]

Specs | Audioscrobbler

dinsdag 23 mei 2006 15:05

Acties:

Verwijderd

Topicstarter

Helaas, dan komen ze niet achter elkaar te staan

dinsdag 23 mei 2006 15:08

Acties:

Sappie

De Parasitaire Capaciteit!

hmmz.. vaag, ze zouden toch echt achter elkaar moeten komen staan. Heb helaas geen IE hier, zoals ik al zei, dus kan ook niet ff testen.

Firefox kent vooralsnog geen inline-block volgens mij, dus ik weet niet of je het toevallig slechts in firefox testte? Wat in firefox dacht ik wel werkt is "-moz-inline-block", maar dat durf ik zo 123 niet te zeggen.

edit:

Ik zie net dat een juiste werking van "display: inline-block;" in IE slechts van toepassing is op elementen die van nature inline-elementen zijn (a, span, etc). Houdt dus wel op wat dat betreft helaas. Zie ook: http://www.quirksmode.org/css/display.html

[ Voor 46% gewijzigd door Sappie op 23-05-2006 15:20 ]

Specs | Audioscrobbler

dinsdag 23 mei 2006 15:13

Acties:

Verwijderd

Topicstarter

In firefox liet ie zo ie zo ook de bullets zien , in IE dus niet.
FF snapt idd inline-block niet, in IE worden dan wel de bullets getoond maar worden de li's gewoon onder elkaar gezet.

dinsdag 23 mei 2006 15:32

Acties:

Tacow

zoals onderin op de pagina die Rekcor gaf staat, kun je niet d.m.v. & bull; de bullets terugzetten?

dinsdag 23 mei 2006 15:38

Acties:

Verwijderd

Topicstarter

ja dat weet ik ... maar dat wil ik niet. je zet ze namelijk niet terug, maar plaatst gewoon een gelijk karakter in de li en dat wil ik dus niet

dinsdag 23 mei 2006 15:47

Acties:

CH4OS

It's a kind of magic

Verwijderd schreef op dinsdag 23 mei 2006 @ 15:05:
Helaas, dan komen ze niet achter elkaar te staan

Nee dat is logisch, je blockt het display'en (display: inline-block;...

Dus geeft ie het niet weer lijkt me...

Ik zie nu net een posting, dat IE er moeite mee heeft...

Probeer eens een display: inline; op de li dan...

[ Voor 30% gewijzigd door CH4OS op 23-05-2006 15:50 ]

dinsdag 23 mei 2006 15:57

Acties:

Rekcor

Het zou ook kunnen dat wat jij wilt gewoon niet kan in IE

dinsdag 23 mei 2006 19:23

Acties:

Verwijderd

Ik weet dat het vies is maar 't werkt wel:

HTML:

<ul>
    <li><ul><li>Foo</li></ul></li>
    <li><ul><li>Bar</li></ul></li>
    <li><ul><li>Lorem</li></ul></li>
    <li><ul><li>Ipsum</li></ul></li>
</ul>

Cascading Stylesheet:

ul {
    list-style-type: none; 
}
li {
    float: left;
}
li ul { 
    list-style-type: circle; 
}
li ul li {
    float: none;
}

[ Voor 104% gewijzigd door Verwijderd op 07-06-2006 11:46 ]

maandag 21 augustus 2006 04:39

Acties:

Verwijderd

Ik ken het probleem. Wat precies de oorzaak is weet ik ook niet, maar ik constateerde dat de bullets verdwenen zodra je voor het ul element dimensie opgaf (hetgeen in IE betekent dat je het element een 'layout' geeft). Oftewel als je geen dimensies specificeert voor het ul element (in plaats daarvan kan je het containing element of de li elementen dimensies geven) zouden de bullets getoond moeten worden.

maandag 21 augustus 2006 10:08

Acties:

Rowanov

Kop eens wat anders...

Zou het niet kunnen dat de bullets op de een of andere manier in de verdrukking komen en je de list-style-position hetzelfde moet maken? (inside of outside) Vziw. verschilt het standaardgedrag daarvan in IE ten opzichte van FF. Zowieso is het probleem van de TS, al dan niet oud

, ook op te lossen met list-style-image als hij geen achtergrond wil gebruiken.