Problema footer con width 100%

[drako89]

Sto facendo una barra footer a fondo pagina (che corrisponde a un menu di navigazione).
Ho settato la barra con position:fixed; bottom: 0; left: 0.
Va tutto bene, la questione è che ho il menu sotto forma di[*] da 19% ognuno e 24% il[*] centrale (totale 100%).
Dovrebbe andare tutto bene e, in effetti, su FireFox è così!!! Si vede la barra a tutta larghezza e l'effetto mi piace un sacco.
Su Chrome, invece, rimangono 3-4 pixel sul lato destro che sono di colore bianco (quindi è come se avanzasse un pochino di spazio dai[*] )

Grazie,
Luca

[Mich_]

Probabilmente sono problemi di arrotondamento: dato che non conosci a priori la larghezza della finestra, non puoi fare un conto che sistemi anche quello.

la soluzione piu` semplice e` dare uno sfondo che nasconda l'effetto che vedi.

Tieni presente che tu lavori in %, ma il brwoser converte il valore in pixel (e` l'unica cosa che si puo` visualizzare sul monitor)
Tanto per fare un esempio: se il 100% sono 602px, il 19% sono 114px (si perde il resto di 0,38) e il 24% e` 144 (si perde 0,48). la somma di tutti i resti ti da` quell'effetto.

Ma se fai il conto con 604 px, il 19% sono 115px e il 24% sono 145, e la somma totale e` maggiore di 100% (con effetti di mandare a capo qualche oggetto).
Pertanto la somma delle percentuali deve SEMPRE essere un po' meno di 100.

[drako89]

fare uno sfondo che nasconde quei pixel purtroppo nn mi è possibile per altri motivi grafici!!
prima di fare il menu con le[*] l'avevo fatto con i <div> e prendeva il 100% (anche una versione precedente con le[*] prendeva il 100%, questa invece non capisco perchè nn lo fa).
il "bug" credo che sia nella lista. nn ho idea di come posso risolvere o.O

footer nav#menuBar{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
    clear: both;
    height: 50px;
    text-align: center;
    background-color: darkblue;
    /* Bordo Sfumato */
    -webkit-box-shadow: 0px -2px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px -2px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         0px -2px 2px rgba(50, 50, 50, 0.75);
}

footer nav#menuBar ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
footer nav#menuBar li{
    float: left;
    padding-top: 3px;
    display: block;
    width: 19%;
    height: 50px;
    /* Sfumatura */
    background: rgb(30,87,153); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(30,87,153) 0%, rgb(41,137,216) 59%, rgb(30,87,153) 60%, rgb(30,87,153) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(30,87,153)), color-stop(59%,rgb(41,137,216)), color-stop(60%,rgb(30,87,153)), color-stop(100%,rgb(30,87,153))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgb(30,87,153) 0%,rgb(41,137,216) 59%,rgb(30,87,153) 60%,rgb(30,87,153) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgb(30,87,153) 0%,rgb(41,137,216) 59%,rgb(30,87,153) 60%,rgb(30,87,153) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgb(30,87,153) 0%,rgb(41,137,216) 59%,rgb(30,87,153) 60%,rgb(30,87,153) 100%); /* IE10+ */
    background: linear-gradient(top,  rgb(30,87,153) 0%,rgb(41,137,216) 59%,rgb(30,87,153) 60%,rgb(30,87,153) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}

footer nav .menuLeft{
    -moz-border-radius-bottomright: 15px;
    -webkit-border-bottom-right-radius: 15px;
    border-bottom-right-radius: 15px
}

footer nav .menuRight{
    -moz-border-radius-bottomleft: 15px;
    -webkit-border-bottom-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

footer nav#menuBar #menuLogoButton{
    width: 24%;
    position: relative;
    top: -15px;
    height: 65px;
    background-color: darkblue;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
}

questo è il css del tutto! come puoi vedere nn mi è possibile cambiare lo sfondo di default perchè con .menuLeft e .menuRight faccio un giochino per far avere al tasto centrale i bordi arrotondati al contrario (cosa impossibile altrimenti), quindi la barra di sfondo deve avere lo stesso sfondo (del tasto #menuLogoButton)

Grazie,
Luca