[CSS] alternatief voor line-height tag

[Verwijderd]

Ik ben bezig met een menu, volledig via css opgebouwd, waar een rollover is ingewerkt. Omdat het een vrij hoge rollover graphic betreft (29px) ; heb ik dit als volgt opgevangen in de code:

Cascading Stylesheet:

.menu1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 10px;
    font-weight: bold;
    width: 145px;
                line-height: 29px; // vrij hoge line-height dus!
                display: block;
    text-indent: 12px;
    cursor: hand;  
  
}

.menu1:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 10px;
    font-weight: bold;
    width: 145px;
                line-height: 29px;
                display: block;
    background-image: url("../images/submenu_small.gif");
}

.menu1Selected {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 10px;
    font-weight: bold;
    width: 145px;
                line-height: 29px;
                display: block;
                text-align:center;
    background-image: url("../images/submenu_small.gif");
}

Dit werkt allemaal mooi maar tussen de menuonderdelen is er erg veel space! Dit komt door de line-height tag veronderstel ik, maar deze is toch nodig om de rollovers juist te krijgen. Met de gewone height tag heb ik ook al zitten stoeien, maar daar was een ander probleem mee en de space tussen de menuonderdelen blijft. Wat doe ik verkeerd of kent iemand een alternatieve oplossing?

[getfirefoxnow]

Padding en margin altijd op 0px zetten, in ieder geval doen.
Heb je een url naar de site?

[Rowanov]

Je menu is neem ik aan een lijst? Dan gebruik je geen line-height zolang het niet om tekst gaat, maar je gebruikt height om de hoogte van je element in te stellen. Van de lijst kan je margin en padding zo uitzetten:

Cascading Stylesheet:

ul, li {
  margin: 0;
  padding: 0;
}

Zoiets zou toch geen problemen moeten geven

[ Voor 11% gewijzigd door Rowanov op 19-08-2006 23:30 ]

[Verwijderd]

Dit probleem is intussen opgelost. Had te maken met enkele verdwaalde <BR> tags in het CMS-systeem (werkt niet met lijsten overigens, systeem dat gebruikt moet worden is al iets ouder). Ik heb een ander vraagje echter.

Zoals je ziet maak ik in het menu gebruik van een rollover die 29 pixels hoog is. Het CMS genereert onderstaande code (hier kan ik relatief weinig aan wijzigen):

<img class="pijl" src='images/pijl_klein_onder.gif' width='7' height='4'><a class= 'menu1' href='/jsp/index.jsp?tmplt_folderid=20&language=Nl'>Test</a>

Het resultaat is een pijl die een stuk boven de tekst uitzweeft (komt omdat de hoogte van menu1 vastgelegd is op 29px veronderstel ik. Nu is mijn vraag, via welke work-a-round kan ik die pijl toch voor de tekst positioneren. Ik denk niet dat z-index mij hier kan helpen?

[Verwijderd]

Met vertical-align op die img moet je het wel voor elkaar kunnen krijgen.

[Verwijderd]

Nee werkt ook niet. Het pijltje kan blijkbaar de plaats waar de rollover-image zal komen niet overlappen, en duwt deze dan gewoon verder naar beneden. Andere suggesties?