Foros del Web » Creando para Internet » CSS »

comportamiento distinto entre IE y firefox

Estas en el tema de comportamiento distinto entre IE y firefox en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/05/2006, 04:23
Avatar de chuidiang
Colaborador
 
Fecha de Ingreso: octubre-2004
Mensajes: 3.770
Antigüedad: 13 años, 2 meses
Puntos: 453
comportamiento distinto entre IE y firefox

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.
__________________
Apuntes Java
Wiki de Programación
  #2 (permalink)  
Antiguo 13/05/2006, 09:42
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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
__________________
Al final del día hablar es gratis, codificar no lo es
  #3 (permalink)  
Antiguo 13/05/2006, 14:49
Avatar de chuidiang
Colaborador
 
Fecha de Ingreso: octubre-2004
Mensajes: 3.770
Antigüedad: 13 años, 2 meses
Puntos: 453
Hola:

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

Se bueno.
__________________
Apuntes Java
Wiki de Programación
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:46.