¿Por qué el señor Firefox me tira una columna al margen derecho?

JBRS · #1 (**permalink**) 14/03/2007, 05:18

Hola,

Tengo una capa tal que así:

#espaciomargenderecho{
text-align:left;
width: 180 px;
float: right;
}

Que inexplicablemente firefox (no safari, no explorer) me pone al límite derecho de la pantalla a pesar de que el máximo lo tengo fijado en 774 px... (creando un gran espacio en blanco con la zona en que debía estar) ¿qué puede ser? ¿hay forma de decirle que se ponga a la izquierda como dios manda?

Mikmoro · #2 (**permalink**) 14/03/2007, 06:04

Hola, JBRS.

¿Estás seguro/a de que el div <div id="espaciomargenderecho"> (o como lo tengas) está dentro del que tiene un ancho de 774px?.

Mikel.

JBRS · #3 (**permalink**) 14/03/2007, 11:03

Zi...

La prueba es que Explorer y Safari lo entienden, pero llega el otro... y p'allá que me lo pone. ¿Hay forma de forzarlo, alguna instrucción para que se ponga a la izquierda? Estoy por ponerlo de forma absoluta, pero no me emociona la idea...

Mikmoro · #4 (**permalink**) 14/03/2007, 11:31

Como de costumbre, como soy un poco parco, no lo entiendo.
¿Podrías poner el código completo, o el fragmento que sea? (html+css)

Mikel.

JBRS · #5 (**permalink**) 15/03/2007, 03:20

El tema es complejo, porque son capas anidadas (me he metido en un follón gordo, tiene sentido pero es difícil explicarlo). Intento copiarte el html de salida de los DIV, pero no es fácil.

Digamos que en el diseño original (con el que me ayudaste el otro día) tenía 3 columnas

1 2 3

Y ahora por determinados motivos quiero que haya (1 2 3) + (1B)

Lo meto todo en anchototal, espaciomargenderecho es la que falla. Bloquecontenido1 es lo que tenía antes (1 2 3)

<div id="anchototal">

<div id="espaciomargenderecho">
AQUI FALLA EN FIREFOX, LO PONE A LA DERECHA
</div>

<div id="bloquecontenido1">
<div id="contenidoderecha1">
Columna 3
</div>
<div align=left id="menuizquierda1">
Columna 1
</div>

<div id="contenidoprincipal1">
Central
</div>

</div>

</div>

Mikmoro · #6 (**permalink**) 15/03/2007, 04:09

Claro, según veo, y si efectivamente a partir de "Bloquecontenido1" todo es exactamente como estaba el otro día, es natural que esa nueva capa no vaya a su sitio. ten en cuenta que tal y como estaba el diseño, ya había una capa flotada a la derecha con un tamaño, otra a la izquierda también con tamaño y luego otra sin tamaño para que sea fluida.

Ahora estás metiendo en el mismo ancho otra capa fuera de ese conjunto, por lo que es natural que no encaje.

Pon el css con las características del envoltorio principal (anchototal) y las de esa nueva capa y miro a ver cómo debería ser para que fuera bien firefox, a ver si lo desciframos.

Si además pusieras una captura de cómo debería quedar mucho mejor.

Mikel.

JBRS · #7 (**permalink**) 15/03/2007, 04:58

A ver, creo que estas son todas ahora mismo, pero estoy haciendo taaaantos cambios... Como lo tengo ahora "funciona", pero poniéndole un position:absolute a espaciomargenderecho, algo que no sé hasta qué punto es aconsejable o me dará problemas en otras cosas...

Gracias anticipadas

#anchototal{
text-align:left;
left:0;
width: 774 px;
}

#menuizquierda1{
width: 95px;
background-color: #efefef;
float:left;
}

#bloquecontenido1{
text-align: left;
width: 620px;
left:0px;
}

#contenidoderecha1{
text-align:left;
width: 130px;
float: right;
}

#contenidoprincipal1{
margin-left: 95px;
background-color: #ffffff;
padding: 4 8 4 4px;
width: 365px;
text-align:left;
border-right: 1px solid #c0c0c0;

}

#espaciomargenderecho{
position:absolute;
text-align:left;
width: 130 px;
float: right;
left:640;
margin-left: 0px;
}

Mikmoro · #8 (**permalink**) 15/03/2007, 06:13

Prueba con este código a ver:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>JBRS</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
#anchototal { text-align: left;
left: 0pt;
width: 774px;
}
#menuizquierda1 { width: 95px;
background-color: #efefef; 
float: left;
}
#bloquecontenido1 {
text-align: left;
width: 620px;
left: 0px;
}
#contenidoderecha1 { text-align: left;
width: 130px;
float: right;
}
#contenidoprincipal1 { 
margin-left: 95px;
background-color: #ffffff;
padding: 4px 8px 4px 4px;
width: 381px;
text-align: left;
border-right: 1px solid #c0c0c0;
}
#espaciomargenderecho { text-align: left;
float: right;
margin-left: 0px;
width: 154px;
}
  </style>
</head>
<body>
<div id="anchototal">
<div id="espaciomargenderecho">YA NO FALLA?</div>
<div id="bloquecontenido1">
<div id="contenidoderecha1">Columna 3
</div>
<div id="menuizquierda1" align="left">
Columna 1
</div>
<div id="contenidoprincipal1">
Central
</div>
</div>
</div>
</body>
</html>

Mikel.

JBRS · #9 (**permalink**) 15/03/2007, 06:41

Jarl. Ahora SÍ va... y eso que he cambiado algunos por separado y no iba... (como espaciomargenderecho, que yo creía era el culpable...).

¿Puedes decirme cuál ha sido la clave para poder dormir, po favó? :)

Mikmoro · #10 (**permalink**) 15/03/2007, 11:32

Pues básicamente un par de cosillas:

en primer lugar tenías un pequeño error en este selector:

#anchototal{
text-align:left;
left:0;
width: 774 px;
}

el espacio que hay entre 774 y px hacía que no lo interpretara bien.

Luego, que la nueva capa "espaciomargenderecho" no tenía un ancho definido, y eso hacía que su contenido (el texto) la hiciera crecer, pero ella a su vez no hacía crecer a su contenedora ("anchototal"). También la posición absoluta y el float right son incompatibles.

De todos modos, en tu anterior consulta querías que la columna central de los contenidos ("contenidoprincipal1") fuera fluída, es decir, que se adaptara al espacio disponible en cualqueir resolución, sin embargo, ahora le has asignado un acho fijo. Por si quieres que vuelva a ser fluída, tal y como esetá, simplemente elimínale el width y se adaptará a todo el espacio disponible.

Espero que esta explicación te sirva.

Mikel.

JBRS · #11 (**permalink**) 15/03/2007, 13:15

Sí, me ha quedado claro, muchas gracias. Mejor entenderlo que no sólo solucionarlo.
Además, por otro motivo le he pasado un "test" de css y también me decía que en otras definiciones está el mismo error de poner px con un espacio delante.

Lo de la columna fluida, no, yo la quería así, era otro "forero" el que la quería fluida.

Por cierto, he puesto otro post con un tema de quitar espacios (al poner imagenes y líneas de separación me deja márgenes en explorer que quiero quitar) posiblemente tú sepas algo al respecto...

http://www.forosdelweb.com/f53/espacios-que-no-quiero-imagenes-lineas-473181/