Siguiendo con mis trasteos estoy probando un código css que falla en un punto: la barra de navegación horizontal se distorsiona. El código en cuestión es éste:
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
position: relative;
}
body {
background: white;/* center navcontainer in IE5 */
margin-top: 60px;
margin-bottom: 40px;
}
#contenido {
width: 740px;
position: relative;
background: white;
margin: 0 auto;
}
h3 {
font-size: 16px;
font-weight: bold;
font-family: Arial;
color: Navy;
text-align:
justify;
text-indent: 1cm;
}
#auxiliar {
width: 900px;
background: white;
position: relative;
top: 70px;
left: 0;
text-align: center;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 45px;
margin-bottom: 30px;
}
#navcontainer {
margin: 0 auto;
padding-left: 25px;
text-align: center;
}
#navlist {
width: 100%;
padding: 1px 1px 1px;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0 auto;
border-top: 1px solid gray;
display: inline;
}
#navlist li a {
padding: 0.25em 0.5em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
width: 150px;
display: inline;
float: left;
}
#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}
#navlist li a:hover {
border-color: #FF0000;
color: #FFF;
background: #332;
}
</style>
Y la distorsión que comento se puede ver en
www.iluminigoj.idomyweb.com
¿Alguien sabe cómo corregir ese fallo en el menú?