(CSS)Bullet/pointer li probleem in IE

[Verwijderd]

Bullet/pointer li probleem in IE

Cascading Stylesheet:

#divNavigation {
    list-style-type: none;
    margin-top: 20px;
    padding: 0px;
    margin-left: 15px;
    font-size: 10px;
    line-height: 22px;
}
#divNavigation A {
    text-decoration: none;
    color: #333333;
    margin-left: 0px;
}
#divNavigation a:hover {
    text-decoration: underline;
}
#divNavigation li {
    width: 150px;
    margin: 0px;
    padding: 0px;
    background-repeat: no-repeat;
    background-image: url(../images/stip.gif);
}

HTML:

ul id="divNavigation">
        <li>[img]"images/dh.gif"[/img]<a href="wiezijnwij/wie.htm">Wie zijn wij?</a></li>
        <li>[img]"images/dh.gif"[/img]<a href="tarieven/tarieven.htm">Tarieven</a></li>
        <li>[img]"images/dh.gif"[/img]<a href="faq/faq.htm">FAQ</a></li>
        <li>[img]"images/dh.gif"[/img]<a href="tipsentrucs/tips.htm">Tips &amp; Trucs</a> </li>
        <li>[img]"images/dh.gif"[/img]<a href="links/links.htm">Links</a></li>
        <li>[img]"images/dh.gif"[/img]<a href="contact/contact.htm">Contact</a></li>
        <li>[img]"images/spacer.gif"[/img]</li>

In Firefox en Opera wordt het menu en de bullets/pointers goed weergegeven. Internet explorer doet echter moeilijk, en neemt als lijnhoogte de hoogte van de bullet/pointer aan.

Een background image gebruiken als bullet kan echter niet, omdat ik de stippellijn tussen de list items al hiervoor heb gebruikt. Ik heb tot op heden geen oplossing kunnen vinden met got en google.

Hoe kan ik dit oplossen zodat IE niet meer de lijnhoogte verandert ? Alvast bedankt !

[JayVee]

line-height aanpassen (had ik ook vandaag!)

[SuperRembo]

Kan je niet beter list-style-image gebruiken, of werkt dat niet in IE?

code:

ul { 
    list-style-image: url("images/dh.gif");
}

Anders zou je de bullet op de background van de link kunnen zetten.

[ Voor 24% gewijzigd door SuperRembo op 24-09-2005 18:08 ]

[Stubby]

Even een snelle google levert mij dit op:
http://www.brunildo.org/test/IElineheight.html

Misschien heb je er wat aan...

[Fuzzillogic]

IE en bullets zijn een PITA. Hell IE is sowieso een PITA.

De oplossing die ik gebruik is vaak om geen list-style-image te gebruiken maar een background image voor de LI's.

En margins en paddings voor zowel UL als LI allebei keihard opgeven, dan gedragen de browsers zich nog een beetje eensgezind...

[Verwijderd]

Bedankt voor de reacties, maar er zit helaas nog geen oplossing tussen.
Ik kan het het wel oplossen door een tabel te gebruiken, maar dat heeft niet mijn voorkeur omdat ik de site dynamisch wil houden.

Ik heb de line-height veranderd in ems ipv pixels,maar haalt niets uit.

Ik kan hem wel als list-style-image zetten, maar dan krijg ik hem verticaal niet goed gecentreerd en op de juiste plek. En door de spacer li item (voor de extra stippelijn onderaan) krijg ik 7 bullets ipv
6.

Openers gebruiken helpt in zekere mate. Alleen wordt de lijnhoogte nooit hetzelfde (kleiner) dan
in firefox en opera, en de inhoud wordt niet verticaal gecentreerd.

Een background image gebruiken voor de LI items kan niet, omdat ik deze optie al verbruikt heb
voor de stippellijnen.

[SuperRembo]

Verwijderd schreef op zaterdag 24 september 2005 @ 20:04:
Een background image gebruiken voor de LI items kan niet, omdat ik deze optie al verbruikt heb
voor de stippellijnen.

Je kan een background op de <li> zetten, en een andere op de <a>.

[JayVee]

Geef nou niet op, met een beetje systematisch werk krijg je het echt voor elkaar.
Lees even dit artikel goed door: http://www.alistapart.com/articles/taminglists/
En lees dan nog eens de tips in dit topic. Het is echt niet zo moeilijk om deze lists zoals het hoort helemaal met CSS te stylen!

Don't give up now!

Ik zat vandaag toevallig ook weer te prutsen met lists. Twee punten vielen mij op:
De lijsten zijn pas hetzelfde in IE en FF als je

code:

ul {
  list-style-position: outside;
  /* en */
  line-height: 1x0%;
}

gebruikt.

Uiteraard mag je zelf je line-height aangeven, als je hem maar expliciet aangeeft (IE en FF hebben verschillende standaard waarden).

En kan je die gestippelde lijn niet met een border: 1px dashed; doen?

[ Voor 7% gewijzigd door JayVee op 25-09-2005 00:15 ]

[Verwijderd]

Bedankt iedereen voor de hulp! Ik heb het inmiddels opgelost, mede dankzij de tip van Stubby.

De oplossing: de height (niet te verwarren met de line height) van de box ( LI ) was niet opgegeven.
Hierdoor was het probleem van de lijnhoogte opgelost, maar kwamen de bullets en links aan de bovenkant te staan.
Door 2 openers te gebruiken (en te spelen met de height van deze openers) is de inhoud nu ook verticaal gecentreerd.

Cascading Stylesheet:

#divNavigation li {
    height: 22px;
}

HTML:

<li>[img]"images/opener.gif"[/img][img]"images/dh.gif"[/img][img]"images/opener.gif"[/img]<a href="wiezijnwij/wie.htm">Wie zijn wij?</a></li>

[ Voor 13% gewijzigd door Verwijderd op 25-09-2005 12:55 ]

[Fuzzillogic]

Realiseer je wel dat je nu met jouw oplossing met structuurelementen (images in dit geval) de opmaak aan het 'repareren' bent. Dat was een paar jaar geleden nog prima, maar tegenwoordig is het gewoon bad practice.

[JayVee]

Zoals Nexxennium aangeeft heb je het probleem dus niet opgelost maar door een of twee vieze hacks het gewenste resultaat bereikt. Dat is inderdaad bad practice. Had je net zo goed een table kunnen gebruiken!

Hoe ver ben je gekomen met een CSS only oplossing? Misschien kunnen we je nog wat verder helpen. Lees iig het artikel "taming lists" op alistapart en probeer het nog een keertje!

Zoals ik eerder zei: geef niet op!

[Sappie]

forceer eens hasLayout op de links in de li's. Zo bijvoorbeeld:

code:

#divNavigation a {
  display: inline-block;
}

Check hier voor meer info over hasLayout: http://www.satzansatz.de/cssd/onhavinglayout.html

[SuperRembo]

http://superrembo.com/css/NavList/

Misschies is deze ook niet helemaal ideaal (een extra div om de ul heen), maar het lijkt me een stuk beter dan 3 (!) images per listitem.

[Verwijderd]

SuperRembo schreef op zondag 25 september 2005 @ 20:45:
http://superrembo.com/css/NavList/

Misschies is deze ook niet helemaal ideaal (een extra div om de ul heen), maar het lijkt me een stuk beter dan 3 (!) images per listitem.

Dit is idd de oplossing. Bedankt SuperRembo voor de moeite die je er hebt ingestoken !
Ik was er zelf niet opgekomen.

Het kan behoorlijk frustrerend zijn als je er niet uitkomt.
Iedereen bedankt voor de support en hulp!