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

