[CSS/JS]div verspringt onmouseover

[Dr_Frickin_Evil]

Ik heb een site gemaakt, met een menuutje waarbij een paar divjes naast elkaar staan. Dit heb ik gedaan door de divjes de css-attribute "display:inline" mee te geven. Dit werkt goed. Bij een onmouseover-event wil ik de divjes laten verkleuren. Dit doe ik met javascript:

code:

function MakeBlue(temp) {
    temp.style.background="#0060A9";
    }
function MakeWhite(temp) {
    temp.style.background="#FFFFFF";
    }

Deze functie roep ik als volgt aan:

code:

<div onmouseover="MakeBlue(this);" onMouseOut="MakeWhite(this)">

Dit werkt opzich prima, maar er is 1 probleem. Als ik met de muis over de divjes ga, dan verschuift het hele menubalkje (wat in 1 'grote' div staat) een pixel of 2-3 naar links . De pagina is hier te bekijken: http://131.155.240.208/lighttown/light.php?url=nieuws.php . Het gaat hier over de witte knoppen bovenin. Het menuutje is als volgt gemaakt:

code:

  <<div id="menu" class="menus">
    <div onmouseover="MakeBlue(this);" onMouseOut="MakeWhite(this)">Home</div>
    <div onmouseover="MakeBlue(this);" onMouseOut="MakeWhite(this)">Foto's</div>
    <div onmouseover="MakeBlue(this);" onMouseOut="MakeWhite(this)">Gastenboek</div>
    <div onmouseover="MakeBlue(this);" onMouseOut="MakeWhite(this)">Email</div>
    <div onmouseover="MakeBlue(this);" onMouseOut="MakeWhite(this)">Links</div>
    <div onmouseover="MakeBlue(this);" onMouseOut="MakeWhite(this)">Inloggen</div>
  </div>

Voor het id "menu" is de volgende css code gedefinieerd:

code:

#menu {
    position: relative;
    top: 95px;
    left: 160px;
}
#menu div {
    display: inline;
}

Voor de class "menus":

code:

div.menus {
    position: relative;
    z-index: 10;
}
div.menus div {
    margin: 3px;
    width: 65px;
}

Ik heb gemerkt dat het probleem zich niet voordoet als ik de marge in div.menus div verander in margin: 0px; , of als ik de positionering in div.menus verander in position: absolute; . Iemand enig idee wat het probleem precies is??

[crisp]

Het verspringen heb ik hier (IE6) geen last van; wel wil ik graag opmerken dat een inline element in feite geen width kent (ja, net zo breed als de content). Test het bijvoorbeeld maar eens in Mozilla.
float: left zou een beter alternatief zijn.

[Verwijderd]

Wat dacht je van gewoon a:hover? Daar kun je exact hetzelfde effect mee bereiken:

Cascading Stylesheet:

a:link {
    display:block;
    float:left;
    margin:3px;
    border:1px solid #000;
    color:#000;
}
a:link {
    background:#FFF;
}
a:hover {
    background:#0060A9;
}