[css] margin? & (buggy?) a:hover

[r0bert]

Ik heb op dit moment ongeveer hetzelfde als het volgende voorbeeld:

HTML:

<div id="elNav" style="background-color: #EAEAEA; height: 22px;">
    <div style="left: 50px;">
        <a href="./iets.php">
            Iets
        </a>
    </div>
    <div style="left: 150px;">
        <a href="./weinig.php">
            Weinig
        </a>
    </div>
    <div style="left: 250px;">
        <a href="./niets.php">
            Niets
        </a>
    </div>
</div>

met onderstaande CSS:

code:

div#elNav div
{
    position: absolute;
}

div#elNav div a
{
    position: relative;

    font-weight:        bold;
    margin-left:        100px;
}

div#elNav div a:hover
{
    position: relative;

    letter-spacing:     5px;
}

Nu lijkt het net of de a:hover blijft staan op een vorige positie (stuk naar links).. Ik snap wel dat het zo is, en een gevolg is van mijn CSS, maar snap niet precies hoe het kan

edit: voorbeeld online @
http://www.robertdewilde.nl/temp/a-hover.html

[ Voor 17% gewijzigd door r0bert op 30-01-2004 20:01 . Reden: Voorbeeldje toegevoegd ]

[Not Pingu]

als ik jou was zou ik de links gewoon een float:left meegeven ipv. ze relatief te positioneren. de links (en dus de 'hitboxes') overlappen elkaar een beetje heel erg en daardoor krijg je dat de 2e link hovert terwijl je de 1e link aanwijst.

[X-Lars]

als antwoord op je vraag: het komt door je

code:

margin-left: 100px;

voor details