[CSS] Boxmodel en textuitlijning

[4of9]

Hallo,

Ik heb weer een klein probleempje waarmee jullie me mischien verder kunnen helpen.

Ik ben nu met een site bezig waarin ik een menu heb staan met achtergrond plaatjes.
Nu krijg ik de text niet verticaal uitgelijnd zonder dat de padding bij ieder list item word opgeteld en dus mijn uitlijning van het menu niet meer uitkomt.

html

code:

<!-- begin menu -->
<div id="menucontainer">
    <ul>
        <li><a href="">link 1</a></li>
        <li><a href="">link 1</a></li>
        <li><a href="">link 1</a></li>
        <li><a href="">link 1</a></li>
        <li><a href="">link 1</a></li>
    </ul>
</div>
<!-- end menu -->

CSS

code:

        #menucontainer {
        background-color: #FB9E14;
        position: absolute;
        width: 152px;
        height: 146px;
        top: 0px;
        left: 0px;
        padding: 0;
        margin:0;
    }
    
    #menucontainer ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
    }
    
    #menucontainer a {
        background-image: url(image/menubackground.gif);
        background-repeat: no-repeat;
        text-decoration: none;
        color: #fff;
        width:146px;
        height: 23px;
        display: block;
        padding-top: 4px;
        padding-left: 5px;
        margin-top: 2px;
        margin-left: 3px; 
    } 
    
    #menucontainer a:hover {
        background-image: url(image/menubackgroundhover.gif);
        background-repeat: no-repeat;
        text-decoration: none;
        color: #fff;
        width:146px;
        height: 23px;
        display: block;
        padding-top: 4px;
        padding-left: 5px;
        margin-top: 2px;
        margin-left: 3px; 
    }

op http://www.opinieland.nl/mockup/index.html staat het voorbeeld.

Links boven in staat het menu. Zo moet het ook uitgelijnd zijn.
Alleen de text in de menu balkjes staat 1 a 2 pixels te ver naar boven.
Als ik dit nu oplos door mijn padding top te veranderen dan word dat bij die image boxjes opgeteld en lijnen ze niet meer uit.

Is hier een oplossing voor?

alvast bedankt!

[Verwijderd]

Stel de line-height gelijk aan de hoogte van de button.

[BtM909]

Is het niet handiger om de line-height van je teksten te vergroten naar de totale heigth (dan wordt je tekst automagisch vertical aligned).

edit:
Eerst snel reageren voordat Andre dat altijd doet, is Cheatah weer voor

[ Voor 28% gewijzigd door BtM909 op 28-10-2004 12:13 ]

[Verwijderd]

de height van die a kleiner maken?

[4of9]

Ah line-height!

thx! daar had ik nog niet aangedacht!