[CSS] UL menu i.c.m list style image diverse problemen - Softwareontwikkeling

zaterdag 25 juni 2005 17:44

Acties:

Moderator Wonen & Mobiliteit / General Chat

Topicstarter

Weet niet meer waar ik het probleem precies moet zoeken, dus bij deze zou ik graag een duwtje in de juiste richting willen aanvragen

Ik probeer een vrij simpel menu op te zetten. De volgende HTML en CSS heb ik tot nu toe (gestript):

Cascading Stylesheet:

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 1em;
}

#topmenu {
    list-style-image: url(http://www.planet.nl/~terps407/got/img/listbut.gif);
    margin-left: 22px;
}

#topmenu li {
    background-image: url(http://www.planet.nl/~terps407/got/img/menubgr.gif);
    background-repeat: repeat-x;
    width: 215px;
    border: 1px solid red;
    height: 23px;
}

#topmenu li a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    width: 150px;
    height: 10px;
    font-size: 10px;
    border: 1px solid red;
    padding: 2px;
    margin-left: 30px;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>GOT</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
        <base href="http://www.planet.nl/~terps407/got/">
        <link rel="stylesheet" type="text/css" href="css/default.css" media="screen" >
    </head>
    <body>
        <ul id="topmenu">
            <li><a href="woei">Pagina 1</a></li>
            <li><a href="woei">Nog eentje</a></li>
            <li><a href="woei">Nummertje 2</a></li>
        </ul>
    </body>
</html>

Niks bijzonders dus

. Ik heb alleen wat problemen met de list style image

Het resultaat in IE:

Afbeeldingslocatie: http://www.planet.nl/~terps407/ie.JPG

Het komt zo nog vrij dicht in de buurt bij het uiteindelijke resultaat (maar dat zegt vaak niks van de 'correctheid' m.b.t. de code). Tussen de list buttons zit een kleine wit ruimte die ik helaas niet weg krijg. Maar goed, dat is een later probleem.

Afbeeldingslocatie: http://www.planet.nl/~terps407/ff.JPG

Afbeeldingslocatie: http://www.planet.nl/~terps407/ff.JPG

Lijkt me vrij duidelijk. De blokjes komen te hoog te staan, wit ruimte tussen de blokjes en een grote wit ruimte tussen de blokjes onderling en het rechterstuk.

Met google kwam ik op deze site en heb ik met list-style-position: inside wel de ruimte tussen de blokjes kunnen verwijderen, maar dit is geen oplossing aangezien de text dan op de volgende regel komt te staan. I quote "The bullet and the second line of text are flush left.". Logisch dus, en niet wat ik bedoel.

Via de borders ben ik gaan kijken naar eventuele margin, padding of afmeting problemen, maar zoals je ziet zit het daar volgens mij niet in

.

Via de GoT search kwam ik veel reacties tegen dat algemene browserondersteuning voor list style image slecht is, maar ik geloof niet zo snel dat het aan de browser ligt

. Ik denk meer de code, maar ik weet niet meer in welke kant ik moet zoeken.

Het online resultaat: http://www.planet.nl/~terps407/got/index.html
CSS: http://www.planet.nl/~terps407/got/css/default.css

Nogmaals, wie kan mij een duw in de juiste richting geven

?

let niet op de brakke gif'jes, dat verandert uiteraard nog

zaterdag 25 juni 2005 18:46

Acties:

crisp

Devver

Pixelated

Zeker in Gecko is dat gewoon niet goed te doen met list-style-image. Waarom die anchors naar onder worden gedrukt als je list-style-position: inside gebruikt is mij een raadsel (ws een bug). Als je vervolgens de li een display: block geeft gaat het wel goed, maar is de image weer niet zichtbaar... patstelling dus.

Waarom gebruik je niet gewoon list-style: none en zet je die 'bullet' niet in je achtergrondplaatje?

[ Voor 3% gewijzigd door crisp op 25-06-2005 18:47 ]

Intentionally left blank

zaterdag 25 juni 2005 19:17

Acties:

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

Topicstarter

crisp schreef op zaterdag 25 juni 2005 @ 18:46:
Waarom gebruik je niet gewoon list-style: none en zet je die 'bullet' niet in je achtergrondplaatje?

Was al bang dat je dat ging zeggen

Het zou denk ik 'netter' zijn om de list style image te gebruiken, aangezien het ook een list style img is, maar goed, als het niet gaat werken dan maar wat minder net

Ik gooi de button wel in de li background en de li a background wordt dan het blauwe balkje

.

[ Voor 4% gewijzigd door We Are Borg op 25-06-2005 19:18 ]

zaterdag 25 juni 2005 19:23

Acties:

JayVee

shibby++!

Ik ben exact dit probleem ook ooit tegen gekomen en heb het op dezelfde manier opgelost! 8 )

ASCII stupid question, get a stupid ANSI!

zaterdag 25 juni 2005 19:57

Acties:

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

Topicstarter

Ok, heb het dus nu ook gedaan. Is dan vrij snel gedaan. Had niet verwacht dat de gecko engine zo zou 'achter lopen' bij de implimentatie van list-style-image

zaterdag 25 juni 2005 21:39

Acties:

tafkaw

list-style-image is gewoon buggy in een hoop browsers, net als veel CSS-code (lees: de ondersteuning van CSS door de browsers wordt niet altijd even netjes gedaan...)