para ello, la estructura que tengo es esta en el documento html:
Código:
Uso un condicional para explorer que meto en el head:<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>
Código:
bien. la hoja de estilos tiene estos parámetros:<!--[if IE]> <STYLE type=text/css>#barra{ DISPLAY: inline-block } #barra{ DISPLAY: inline } #barraLI { FLOAT: left } #enlaces{ TEXT-ALIGN: center } </STYLE> <![endif]-->
Código:
Cuál es el problema? pues varios: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; }
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