[CSS] probleem met breedte van rollover buttons

[theflush2]

Ik heb een probleem met de weergave van rollover buttons die gemaakt zijn met CSS.
Zie het plaatje onderaan de pagina!!!

Ik heb een menubalk gemaakt (navBar), die is 740 pixels breed.
De CSS code is:
.navBar {
display: block;
float: left;
height: 26px;
width: 740px;
clear: right;
background-image: url(img/navButton_d.gif);
background-repeat: repeat-x;
text-align: center;
}

Ik heb in mijn html een div gemaakt met navBar als class en navButton als ID.
Deze html:
<div class="navBar" id="navButton">
<a href="index.html">HOME</a>
<a href="about.html">ABOUT</a>
<a href="products.html">PRODUCTS</a>
<a href="service.html">SERVICE</a>
<a href="contact.html">CONTACT</a>
</div>

Deze navButton heeft een breedte van 20%, dus deze 5 buttons zouden samen 100% moeten maken. Maar er gebeurt iets heel raars, de buttons zijn naast elkaar wel 100%, alleen worden de laatste letters van CONTACT; namelijk: "ACT" nog een keer herhaald en half onder de navigatiebalk gestopt in internet explorer. In FireFox werkt alles wel prima.
Ik heb ook al geprobeerd om navButton 148 pixels breed te maken i.p.v. 20%, immers 148x5 is 740 (de breedte van navBar). Maar ook dan werkt het niet.

De CSS code van navButton is:

#navButton a:link {
color: #000000;
text-decoration: none;
background-image: url(img/navButton_d.gif);
background-repeat: repeat-x;
display: block;
float: left;
height: 25px;
width: 20%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-align: center;
padding-top: 5px;
margin-bottom: -5px;
}
#navButton a:visited {
color: #000000;
text-decoration: none;
background-image: url(img/navButton_d.gif);
background-repeat: repeat-x;
display: block;
float: left;
height: 25px;
width: 20%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-align: center;
padding-top: 5px;
margin-bottom: -5px;
}
#navButton a:hover {
color: #000000;
text-decoration: none;
background-image: url(img/navButton_l.gif);
display: block;
float: left;
height: 25px;
width: 20%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-align: center;
padding-top: 5px;
margin-bottom: -5px;
}


Op deze foto zie je wat het probleem is in internet explorer, de laatste letters van contact worden herhaald en half onder de navBar weggestopt. Wie heeft er een oplossing??

[theFlashWizard]

ik weet eerlijk gezegt niet zo snel waar het aan legt maar we hebbe [ html ] tags hier op et forom he.. ;)

wat ik ook niet snap is waarom je bij elke status (hover/link enz) alles opnieuw beschrijft..
als je nou is ff het standaart lettertype in de body zet, wat dan speciaal anders is bij links beschrijf je in een a {} en alleen hetgeen wat dan overblijft moet je in die verschillende statusen zetten..
dit zorgt bijv voor kortere laadtijden en n overzichtelijker script.

[mknol]

geef elke button eens een vaste waarde van 147px en kijk of dit hetzelfde opleverd. Waarom zou je dit uberhaubt in procenten doen?
Gebruik ook eens ipv jouw hele code (zie theFlashWizard):

#navButton a {
color: #000000;
text-decoration: none;
background: url(img/navButton_d.gif) repeat-x;
display: block;
float: left;
height: 25px;
width: 147px;
font: 14px Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding: 5px 0px 0px 0px;
margin: 0px 0px -5px 0px;
}
#navButton a:visited {
color: #000000;
text-decoration: none;
background-image: url(img/navButton_d.gif);
}
#navButton a:hover {
color: #000000;
text-decoration: none;
background-image: url(img/navButton_l.gif);
}

merk op: padding en margin zijn totaal aangegeven. Misschien maakt dit verschil.

[theflush2]

hoe werkt dat dan?! wanneer ik hetgeen hetzelfde is bij visited/hover eruithaal, dan klopt er niets meer van m'n buttons.

als ik het volgende van visited en hover afhaal dan klopt het niet meer:

background-repeat: repeat-x;
display: block;
float: left;
height: 25px;
width: 20%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-align: center;
padding-top: 5px;
margin-bottom: -5px;

[theflush2]

geef elke button eens een vaste waarde van 147px en kijk of dit hetzelfde opleverd. Waarom zou je dit uberhaubt in procenten doen?
Gebruik ook eens ipv jouw hele code (zie theFlashWizard):

#navButton a {
color: #000000;
text-decoration: none;
background: url(img/navButton_d.gif) repeat-x;
display: block;
float: left;
height: 25px;
width: 147px;
font: 14px Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding: 5px 0px 0px 0px;
margin: 0px 0px -5px 0px;
}
#navButton a:visited {
color: #000000;
text-decoration: none;
background-image: url(img/navButton_d.gif);
}
#navButton a:hover {
color: #000000;
text-decoration: none;
background-image: url(img/navButton_l.gif);
}

merk op: padding en margin zijn totaal aangegeven. Misschien maakt dit verschil.

Thanx, die verkorte code is inderdaad beter.

Ik heb de breedte van de button 148 gemaakt, nu vullen ze precies de hele regel.
Wanneer die bottom margin op -5 staat ziet het er correct uit in FireFox, maar in internet explorer staat de foto met de wolken dan 5 pixels te hoog (over de buttons heen).

Wanneer ik die bottom magin op 0 zet dan is het correct in Internet Explorer maar dan staat de foto weer 5 pixels te laag in FireFox.

Die top padding van 5 zorgt ervoor dat in FireFox aan de onderkant van de button 5 pixels wit bijgeteld worden, waardoor die wolkenfoto te laag staat.

Hoe kan ik dit oplossen zodat hij in internet explorer EN FireFox werkt??

[theflush2]

Laat maar, het is al gefixed :-)

[theFlashWizard]

en nou ben ik, en toekomstige lezers nog benieuwd naar de oplossing.. (A)

[theflush2]

Ik heb .navBar een vaste hoogte gegeven
en daarin zitten de #navButton ID's, deze hebben aan de bovenkant een padding van 5 en voor alle andere paddings heb ik 0 gebruikt.
Normaal gesproken zou dat in firefox een probleem opleveren, maar waarschijnlijk omdat die ID's zich binnen .navBar bevinden interpreteert FireFox het wel correct. Ik ga hier nog even mee klooien om het precies vast te kunnen stellen.