[css] ongewenste rand bij hover

[NomoDigger]

ik heb de volgende code voor knoppen voor de top-navigatie op een site:

code:

#navigation span {
        margin: 3px;   /* afstand tussen knoppen     */
        padding: 5px;  /* afstand knoprand-knoptekst */
}
#navigation span :hover {
        margin: 3px;   /* afstand tussen knoppen     */
        padding: 5px;  /* afstand knoprand-knoptekst */
}

nu is mijn probleem het volgende:
Als ik boven een knop hover, dan wordt de knop niet alleen lichter, maar ook breder. Hij krijgt er nml aan linker en rechterkant 5 pixels donkere achtergrondkleur bij. Ik wil dat de knop alleen van kleur verandert. Hoe los ik dit op?

(met css dus, waarschijnlijk kan het ook met JavaScript, maar ik wil site eignelijk javascript-vrij houden)

[disjfa]

Welke stijlen spelen nog meer in op dat moment. En zet die daar dan goed.

En als je het nog niet volgt, post dan wat meer code hier zodat we weten waar je probleem nou eigenlijk foutgaat

[Verwijderd]

#navigation span :hover betekent een element (waarboven de muis zich bevindt) binnen een span binnen een element met id="navigation". De margin en de padding worden dus toegevoegd aan het element binnen die span en niet op de span zelf, zoals de eerste rule aangeeft. Vandaar 2 keer padding en 2 keer margin.

[NomoDigger]

hij lijkt de margin niet dubbel te pakken

heb nu eigenlijk even geen tijd, maar volledige code staat hier.

[disjfa]

en de html hier: http://usac.climbing.nl/css/

_{ik kijk nog ff}

De <a> die in de span staat heeft normaal geen padding/margin.... en door de hover wel. Dus hij doet gewoon wat je in je css zegt....... Dus je zou die <a>`s die margin en padding zonder hover erbij kunnen zetten zodat de verbreding niet gebeurt.....

[ Voor 99% gewijzigd door disjfa op 11-06-2004 21:02 ]

[NomoDigger]

is het niet zo dat de span van kleur verandert door de :hover en er niets gebeurt met de a in de span? als ik de margin en padding bij de span:hover weghaal, dan verandert alleen de a van backgroundcolor, en niet de hele knop.

--edit

ben eruit (voor de mensen die hier in de toekomst ook mee te maken krijgen):

ik heb:

code:

#navigation span :hover {
        background-color: #999999;
        margin: 3px;   /* afstand tussen knoppen     */
        padding: 5px;  /* afstand knoprand-knoptekst */
}

vervangen door:

code:

#navigation span:hover {
        background-color: #BBBBBB;
        padding: 5px;  /* afstand knoprand-knoptekst */
}

de margin wordt toch ge-inherit, dus die blijft het doen, om te zorgen dat de hele knop van achtergrondkleur verandert moet de padding blijven staan. Merk op dat de spatie tussen "span" en ":hover" is weggehaald, dit zocht ik dus.

[ Voor 63% gewijzigd door NomoDigger op 12-06-2004 00:24 . Reden: oplossing gevonden ]