Problema con etiquetas de ancla en firefox

[baravaro]

Vale. Paso el código.

Código HTML:

<div id="pie">
        <a id="grafico"></a>  
             <span class="servicios">
             Servicios <img src="Imagenes/Logos/linea-vertical.jpg" />
             </span>
             
             <span class="seccion">
                Dise&ntilde;o gr&aacute;fico y editorial
             </span>
             <span class="home">
                <a href="index.php#servicios">
                    Inicio
                </a></span>
       </div>
 

Y qui el css de todos los elementos:

Código CSS:

#pie{
    width:auto;
    height:80px;
    background-color:#000;
    color:#FFF;
    font-size:10px;
    margin:auto;
    clear:both
}
 
 
 
#pie img{
    width:3px;
    height:50px;
    margin-bottom:-17px;
    padding-left:10px;
}
.servicios{
    text-align:center;color:#FFF;
    font-size:30px;
    line-height:80px;
    text-align:left;
    padding-left:220px;
}
 
.seccion{
    color:#FFF;
    font-size:18px; 
    line-height:80px; 
    padding-left:15px;
}
 

EL id pie sería toda la barra vertical negra. He conseguido "solucionarlo" más o menos colocando el <a id="web"></a> dentreo de la capa pie, pero chrome se come un pelín de pie. Si ese ancla web lo ponco justo encima de la capa pie en chrome se ve perfecto pero en firefox se va al garete, el ancla me deja el pie muy muy abajo.

Acabo de probar en IE y es aún peor el funcionamiento de las anclas...