comportamiento distinto entre IE y firefox

chuidiang · #1 (**permalink**) 13/05/2006, 03:23

Hola:

Estoy empezando con css. Pretendo hacer una simple linea de texto con tres palabras, una a la izquierda, otra en el centro y otra a la derecha. He hecho este fichero css

#cabecera1 {
text-align: left;
border-style: solid;
width: 33%;
display: inline;
}
#cabecera2 {
width: 33%;
text-align: center;
border-style: solid;
display: inline;
}
#cabecera3 {
width: 33%;
border-style: solid;
text-align: right;
display: inline;
}

y esta página html

<html>
<head>
<title>prueba</title>
<link rel="stylesheet" href="../../estilo.css">
</head>
<body>
<div id="cabecera1">izquierda</div>
<div id="cabecera2">centro</div>
<div id="cabecera3">derecha</div>
</body>
</html>

En internet explorer se ve lo que quiero, en firefox aparentemente no coge los "width". Si quito el display inline, entonces si coge los width, pero sale cada palabra en una linea distinta.

Sé que puedo conseguir lo que quiero con posicionamientos absolutos y demás, pero me gustaría saber por qué esto no funciona en firefox.

Gracias y sed buenos.

baccxus · #2 (**permalink**) 13/05/2006, 08:42

Primero que todo, lo que ves en firefox es el comportamiento CORRECTO de display:inline, por otro lado colocas border-style:solid, pero no aplicas el tamaño del borde ni el color (border-width, border-color:), y para hacer un posicionamiento de CAPAS en la forma que quieres se usa float, además estás repitiendo el mismo código para las 3 divisiones, así que resumí el códgo de la siguiente forma:

Código:

#cabecera1, #cabecera2, #cabecera3 {
border: 1px solid black;
width: 33%;
float:left;
}
#cabecera1 {text-align: left;}
#cabecera2 {text-align: center;}
#cabecera3 {text-align: right;}

Saludos

chuidiang · #3 (**permalink**) 13/05/2006, 13:49

Hola:

Gracias, funciona perfectamente. No estoy muy seguro de entender lo que has hecho, pero haré mis pruebas.

Se bueno.