Ben weer verder gegaan met het slicen van mijn ontwerp. Eerste keer dat ik hier echt serieus aan begin maar ben eigenlijk meteen al tegen een probleem aangelopen;
De tekst van het menu en de mouseover ervan zijn niet goed gecentreerd, de mouseovers verschijnen schuin van de vakjes in het menu waar ze horen. Ze zitten dus niet precies in het ,,vakje'' van de achtergrond (Bijlage als voorbeeld)
Hier de CSS:

Code:

@charset "utf-8";
/* CSS Document */

body 
{
    font: 12px Arial;
    color:#666;
    background:url('images/Bgstrip.png') repeat-x;
}

.menu-wrapper
{
    font-family:Arial;
    width:564px;
    height:42px;
    margin-left:auto;
    margin-right:auto;
    font-size:14px;
    background:url('images/mid.png'); background-repeat:repeat-x*4;
}
.menu-wrapper ul
{
    list-style:none;
    height:42px;
}
.menu-wrapper ul li a.mid
{
      display: block;
    padding: 11px 0 0 4px;
    width:100px;
    height:31px;
    text-align:center;
    color: #fff;
    float:left;
    margin-left:auto;
    margin-right:auto;
    text-decoration:none;
    background: url('../images/mid.png');
    background-repeat:repeat-x;
}
    .menu-wrapper ul li a.mid:hover
    {
        background:url('images/mouseover.png');
        color:#000;
    }

Iemand een idee waar mijn fout zit? Alvast bedankt!

Marvin.

Je moet niet de designer mode van dreamweaver gebruiken. Dat is altijd verkeerd, probeer hem is in safari of chrome??

Nee, dat weet ik. Alleen even gedaan om te laten zien hoe het geplaatst is en wat er dus fout zit, het is namelijk hetzelfde in Firefox en chrome ;)

Waarom zet je de padding op 4px als je al text align: center gebruikt?

Code:

.menu-wrapper ul li a.mid
{
      display: block;
    padding: 11px 0 0 4px;

Met die 4px zet je de text 4 px meer naar rechts, zet die gewoon op 0 :)