muy buenas a todos/as. os cuento. Estoy programando un sistema horizontal de enlaces en css. de tal modo que lo que quiero es que aparezca centrado. bien.
para ello, la estructura que tengo es esta en el documento html:
Código:
<div id="contenedor">
<div id="enlaces">
<UL id="barra">
<LI class=izquierda><A
href="#">INICIO</A>
</LI>
<LI><A
href="#">SECCION 1</A>
</LI>
<LI>><A
href="#">SECCION 2</A>
</LI>
<LI>><A
href="#">SECCION 3</A>
</LI>
<LI>><A
href="#">SECCION 4</A>
</LI>
</UL>
</DIV></DIV>
Uso un condicional para explorer que meto en el head:
Código:
<!--[if IE]>
<STYLE type=text/css>#barra{
DISPLAY: inline-block
}
#barra{
DISPLAY: inline
}
#barraLI {
FLOAT: left
}
#enlaces{
TEXT-ALIGN: center
}
</STYLE>
<![endif]-->
bien. la hoja de estilos tiene estos parámetros:
Código:
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 30 0 10 0px;
text-align: center;
background-color: #ffffff;
}
#contenedor{
text-align: left;
width: 770px;
margin: auto;
}
#enlaces {
BORDER-TOP: #006633 6px solid; MARGIN-BOTTOM: 50px; PADDING-TOP: 1px;
}
#barra {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(derecha.gif) #006633 no-repeat right bottom; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0px; WHITE-SPACE: nowrap; LIST-STYLE-TYPE: none
}
#barra LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#barra LI.izquierda{
BACKGROUND: url(izquierda.gif) no-repeat left bottom
}
#barra LI A {
PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-WEIGHT: bold; FONT-SIZE: 11px; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #fff; PADDING-TOP: 5px; FONT-FAMILY: arial; LETTER-SPACING: 1px; TEXT-DECORATION: none
}
#barra LI A:hover {
COLOR: #FFFF00;
}
Cuál es el problema? pues varios:
en primer lugar, en IExplorer lo interpreta todo perfectamente: centrado y con las dos esquinas, izquierda y derecha, redondeadas, con fondo todo verde oscuro.
pero en Opera, Firefox y Safari empiezan los problemas:
En primer lugar no aparece centrado, sino a la izquierda.
En segundo lugar, no coge el fondo verde sino blanco, porque (creo que es por eso) en el #barra LI A y en el #barra LI A:hover no coge el color del fondo del #barra y lo queda en blanco.
En tercer y último lugar, si le pongo en esos #barra LI A y #barra LI A:hover el color del fondo, no me coge entonces ni la esquina izquierda redondeada ni la derecha (izquierda.gif y derecha.gif)
A ver si me podéis echar un cable.
gracias