<li> geen juiste border (horizontale lijst)

[b19a]

De hele nacht probeer ik al een horizontale lijst netjes op het scherm te krijgen, maar het wil me maar niet lukken. Ik heb de volgende code:

HTML:

    <ul id="list1">
        <li>[img]"images/format_smiley.gif"[/img]</li>
        <li>[img]"images/format_font.gif"[/img]</li>
        <li>[img]"images/format_bold.gif"[/img]</li>
        <li>[img]"images/format_under.gif"[/img]</li>
        <li>[img]"images/format_italic.gif"[/img]</li>
    </ul>

Voor de juiste weergave heb ik de volgende css:

Cascading Stylesheet:

        ul {
            background-color:#f5f5f5;
            padding: 0px;
            margin: 20px 0px;
            list-style: none;
        }
        ul li {
            margin:0;
            /*float:left;*/
            display:inline;
            padding:1px 1px;
        }

        ul li img {
            padding:0;
            margin:0;
            border:0;
            height:22px;
            width:22px;
        }
        
        ul li:hover, ul li.over {
            border: 1px solid #aaa;
            padding:0;
        }

(zo moet het goed zijn toch?)

Als ik dan mijn code laat tonen in firefox dan gaan er 2 dingen fout: de <ul> wordt aan de onderkant te veel uitgerekt, en de border van een <li> loopt dwars door de content (img) heen!


Ik heb al geprobeerd display te veranderen in een float, maar dan valt de achtergrond van de <ul> weg (position:absolute idee), dus dat is ook geen optie.

Vertical-align:bottom op de images gaf een vrij goed resultaat, maar nu zie je (goed kijken!) een randje nog boven de border van de image (wat niet de bedoeling is):

Hoe zou ik dit probleem kunnen verhelpen? Ik zoek "de" oplossing voor het probleem, liefst zonder lelijke hacks.

Online testcase
Download testcase

[ Voor 10% gewijzigd door b19a op 03-12-2004 11:43 . Reden: dubbele css verwijderd ]

[Woudloper]

Jouw probleem is op te lossen door een hoogte mee te geven aan je UL LI aangezien de hoogte hiervan nu kleiner is dan de hoogte van de img welke binnen de LI valt.

Dit is o.a. te forceren door gewoon een font-size mee te geven aan je UL LI, dus:

Cascading Stylesheet:

        ul li {
            margin:0;
            font-size:20px;
            display:inline;
        } 

[MarkvE]

Woudloper schreef op vrijdag 03 december 2004 @ 08:37:
Jouw probleem is op te lossen door een hoogte mee te geven aan je UL LI aangezien de hoogte hiervan nu kleiner is dan de hoogte van de img welke binnen de LI valt.

Dit is o.a. te forceren door gewoon een font-size mee te geven aan je UL LI, dus:

Cascading Stylesheet:

        ul li {
            margin:0;
            font-size:20px;
            display:inline;
        } 

Is line-height geen mooiere oplossing?

[b19a]

Ik heb het hele probleem omzijlt door de ul een passende hoogte te geven (height:24px) en vervolgens geen border om de li te geven, maar om de image. Het lijkt goed te werken.