Corregir error en ie6

[javicho73]

Estimados amigos si por favor pudiera ayudarme a corregir un error que me aparece cuando veo mi diseño en IE6 pero si se ve bien en IE8 y Mozilla, por favor espero vuestra valiosa ayuda el codigo de la hoja CSS es la siguiente:

.lavaLampNoImage {
position: relative;
height: 30px;
width: 800px;
background-color: #1f1f1f;
padding: 0 0 22px 0;
margin: 0px 0;
overflow: hidden;
border: 1px solid gray;
}
.lavaLampNoImage li {
float: left;
list-style: none;
}
.lavaLampNoImage li.back {
border: 1px solid #000;
background-color: #ff8500;
width: 9px;
height: 50px;
z-index: 8;
position: absolute;
}
.lavaLampNoImage li a {
font: bold 14px arial;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 16px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 12px;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
border: none;
}

Cuando corrijo la linea en rojo por 24 px se ve bien en IE8 y Mozilla pero se ve muy mal en IE6, estando en 12px se ve bien en IE6 y se me mueve todo en IE8 y Mozilla.

Por favor, cual seria la solución a este problemilla.

Ojala me puedan ayudar. Saludos de antemano