barra di navigazione con div, problemi compatibilità

[belize]

Ho creato un menu di navigazione affiancando tre div (vd. foto nav_ok.gif).
I div contengono un testo e un'immagine di sfondo.

Sapete dirmi perchè con IE7 e FF funziona (menu 1 nella foto) e invece con IE6 e IE 5.5 mi sballa tutto (menu 2)?
Che soluzione mi suggerite?

Vi allego foto e codice.

Premetto che ho attribuito un padding ad ogni div per spostare il testo. Per questo motivo ho dovuto ridurre il width e height di ogni div di tanti px quanto era il loro padding, perchè altrimenti mi creava un margin attorno al div stesso.



.botFascia2 {
float: left;
height: 24px;
padding-left: 29px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
margin: 0px;
background-repeat: no-repeat;
background-position: left top;
text-align: left;
font-weight: normal;
letter-spacing: 0px;
color: #FFFFFF;
}


<div class="botFascia2" style="background-image:url(images/bott_top_2_off.gif); width:114px; height:17px ">Chi siamo, attivit&agrave; </div>
<div class="botFascia2" style="background-image:url(images/bott_top_2_off.gif); width:114px; height:17px ">La nostra filosofia </div>
<div class="botFascia2" style="background-image:url(images/bott_top_1_off.gif); width:136px; height:17px ">Principali aree di intervento </div>

[fcaldera]

sospetto che tu non stia usando un doctype oppure che il doctype non sia xhtml strict 1.0

se ho indovinato allora il problema dipende dall'errata interpretazione del box model (stai lavorando in quirk mode) per cui IE6 considera il padding già compreso nel width (IE 5.5. lo farebbe comunque anche con doctype rigido)

dal momento che hai

padding-left 29px
e padding-top 5px

il primo div dovrebbe avere width 114+29 = 143px e height 17+5 = 22px;
quindi o scrivi un css commento condizionale (soluzione preferibile) oppure usi lo star hack (aumentando il disordine) in questo modo

<div class="botFascia2" style="background-image:url(images/bott_top_2_off.gif); 
width:114px; height:17px;*width: 143px; *height:22px;">Chi siamo, attività </div>

ciò va fatto anche per gli altri div