Foros del Web » Creando para Internet » CSS »

margin-top en bug-Fox (FF)

Estas en el tema de margin-top en bug-Fox (FF) en el foro de CSS en Foros del Web. Amigos: no se que hacer........ necesito acomodar un footer y no quiero recurrir a groserias como position absolute. FireFox me ignora el margin-top... le ponga ...
  #1 (permalink)  
Antiguo 31/01/2009, 08:02
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Exclamación margin-top en bug-Fox (FF)

Amigos: no se que hacer........ necesito acomodar un footer y no quiero recurrir a groserias como position absolute.

FireFox me ignora el margin-top... le ponga el valor que ponga.....da igual.... pero IE6, IE7 me lo taman bien.

Cita:
#footer {
clear: both;
width:<?= $width ?>;
text-align:center;
margin-left:auto;
margin-right:auto;
margin:0 auto;
margin-top:-300px; #margin-top:-100px; _margin-top:-100px; */
height: 65px;
background-color: #ffffff;
}
Lo que lo resuleve pero no me gusta nada es hacer asi:

Cita:
#footer {
clear: both;
width:<?= $width ?>;
text-align:center;
position:absolute; top:610px; margin-left:256px;
height: 65px;
background-color: #ffffff;
}
Alguien me ayuda a hacerlo SIN position absolute ? gracias!!!
__________________
Salu2!
  #2 (permalink)  
Antiguo 31/01/2009, 08:14
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: margin-top en bug-Fox (FF)

al menos yo, necesito ver el código completo y si tuvieras una url sería aún más fácil...
Normalmente para acomodar el footer se hace sólo según el flujo del documento...
Si lo pintaras, también sería más fácil...

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #3 (permalink)  
Antiguo 31/01/2009, 09:21
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Respuesta: margin-top en bug-Fox (FF)

Aresillo: amigo,.... el sitio esta formado por varios CSS en archivos independientes y algunos css son generados dinamicamente pero te paso el principal a ver si me podes ayudar

En parte, lo que me genera problemas es que lo que se muestra en el 'cuerpo' es un texto generado con JavaScript y de longitud variable.......

Sobre el tema del footer...... de como acomodarlo.....para mi es muyy confuso... porque no se como hacer para que salga a una "altura" razonablemente buena visualmente en todas las resoluciones de monitor....... // a ver si podes ayudarme!!!

Cita:
<? // 800x600
header("Content-type: text/css");
$q = $_GET['q'];

$width ='750px'; // 750px
?>

body {
text-align : center;
background-color: #ffffff; /* amarillo de fondo */
margin-top: 0px;
}

#macro-contenedor{
width:auto;
text-align:left;
margin-left:auto;
margin-right:auto;
margin:0 auto;
}

#contenedor{
width:<?= $width ?>;
margin-left:auto;
margin-right:auto;
margin:0 auto;

}

#header {
width:<?= $width ?>;
color:white;
margin-left:5px;
text-align: center;
}

#header h1 {
font-size:41px;color : red;
text-transform: uppercase;
text-decoration:none;
}

#header h1 a:visited {color:red;}
#header h1 a:hover {color:red;}

#left {
border : 0px dashed #000000;
width : 160px; /* 160 */
float : left;
margin-top:52px;
/ margin-top:48px;
padding-right:10px;
}

#cuerpo {
width: 575px; /* 785 */
float : left; /* si no esta el float left, en FF la caja se cae */
margin-top: 0px;
margin-left:5px;
text-align:left;
min-height:550px;
/ height:550px;
/* border: 0.05em black dashed; */
}

#tituloBlog{
margin-top:10px;
float : left;
width : 160px;
margin-bottom:-8px;
/ margin-bottom:-3px;
}

.cse-box { /* cuadro de busqueda (form) */
float: left;
width: <?= $width ?>;
text-align:left;
height:60px;
padding-bottom: 35px;
/ padding-bottom: 0px;
margin-top:-25px;
}

/* antes right */

#footer {
clear: both;
width:<?= $width ?>;
text-align:center;
/* margin-left:auto; */
margin-right:auto;
/* margin:0 auto; */
/* border: dotted; */
position:absolute; top:<? if (isset($q) and ($q!='')) echo '1700px'; else echo '660px'; ?>; margin-left:256px;
/* margin-top:0px; #margin-top:-100px; _margin-top:-100px; */
height: 65px;
background-color: #ffffff;
}

#footer a,a:hover,a:visited{ /* defino como se ven los enlaces en el footer */
color:red;
text-decoration: none;
}

.clear {
line-height: 0px;
font-size: 0px;
clear: both;
height: 0px;
}


.favoritos { /* usar punto(.) si es class' y numeral(#) si es con 'id' */
color: white;
width : auto;
padding-right:10px;
float: right;
}

.favoritos a{
color:white;
text-decoration: none;
}

.favoritos a:visited{
color:white;
text-decoration: none;
}

.favoritos a:hover {
color:yellow;
text-decoration: none;
}

#resultados{
margin-top:40px; / margin-top:-20px;
margin-left:100px;
}


#adsensebajocse{
margin-left:98px;
margin-top:12px ; #margin-top:70px; _margin-top:-2px;
margin-bottom:-22px ; _margin-bottom:40px;
}

#clouds1{
margin-top:150px; #margin-top:180px; _margin-top:150px;
border-style: dotted dashed; color: #3980b8;
padding:1em; margin-left:100px;width:508px;
}

#clouds2{
border-style: dotted dashed; color: #3980b8;
padding:1em; margin-left:100px;width:508px;
}
Ah! el texto en JavaScript aparece si haces una busqueda en el formulario (!)
__________________
Salu2!
  #4 (permalink)  
Antiguo 31/01/2009, 09:24
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Respuesta: margin-top en bug-Fox (FF)

La version que ves ONLINE no usa el position absolute sino lo que esta comentado en #footer
__________________
Salu2!
  #5 (permalink)  
Antiguo 31/01/2009, 09:29
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Respuesta: margin-top en bug-Fox (FF)

Aca la version que ves online..... del sitio

Cita:
<? // 800x600
header("Content-type: text/css");
$q = $_GET['q'];

$width ='750px'; // 750px
?>

body {
text-align : center;
background-color: #ffffff; /* amarillo de fondo */
margin-top: 0px;
}

#macro-contenedor{
width:auto;
text-align:left;
margin-left:auto;
margin-right:auto;
margin:0 auto;
}

#contenedor{
width:<?= $width ?>;
margin-left:auto;
margin-right:auto;
margin:0 auto;

}

#header {
width:<?= $width ?>;
color:white;
margin-left:5px;
text-align: center;
}

#header h1 {
font-size:41px;color : red;
text-transform: uppercase;
text-decoration:none;
}

#header h1 a:visited {color:red;}
#header h1 a:hover {color:red;}

#left {
border : 0px dashed #000000;
width : 160px; /* 160 */
float : left;
margin-top:52px;
/ margin-top:48px;
padding-right:10px;
}

#cuerpo {
width: 575px; /* 785 */
float : left; /* si no esta el float left, en FF la caja se cae */
margin-top: 0px;
margin-left:5px;
text-align:left;
min-height:550px;
/ height:550px;
/* border: 0.05em black dashed; */
}

#tituloBlog{
margin-top:10px;
float : left;
width : 160px;
margin-bottom:-8px;
/ margin-bottom:-3px;
}

.cse-box { /* cuadro de busqueda (form) */
float: left;
width: <?= $width ?>;
text-align:left;
height:60px;
padding-bottom: 35px;
/ padding-bottom: 0px;
margin-top:-25px;
}

/* antes right */

#footer {
clear: both;
width:<?= $width ?>;
text-align:center;
margin-left:auto;
margin-right:auto;
margin:0 auto;
height: 65px;
background-color: #ffffff;
}

#footer a,a:hover,a:visited{ /* defino como se ven los enlaces en el footer */
color:red;
text-decoration: none;
}

.clear {
line-height: 0px;
font-size: 0px;
clear: both;
height: 0px;
}


.favoritos { /* usar punto(.) si es class' y numeral(#) si es con 'id' */
color: white;
width : auto;
padding-right:10px;
float: right;
}

.favoritos a{
color:white;
text-decoration: none;
}

.favoritos a:visited{
color:white;
text-decoration: none;
}

.favoritos a:hover {
color:yellow;
text-decoration: none;
}

#resultados{
margin-top:40px; / margin-top:-20px;
margin-left:100px;
}


#adsensebajocse{
margin-left:98px;
margin-top:12px ; #margin-top:70px; _margin-top:-2px;
margin-bottom:-22px ; _margin-bottom:40px;
}

#clouds1{
margin-top:150px; #margin-top:180px; _margin-top:150px;
border-style: dotted dashed; color: #3980b8; padding:1em; margin-left:100px;width:508px;
}

#clouds2{
border-style: dotted dashed; color: #3980b8; padding:1em; margin-left:100px;width:508px;
}
__________________
Salu2!
  #6 (permalink)  
Antiguo 31/01/2009, 10:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: margin-top en bug-Fox (FF)

Cita:
Iniciado por Italico76 Ver Mensaje
Amigos: no se que hacer........ necesito acomodar un footer y no quiero recurrir a groserias como position absolute.
Siempre este tipo de cosas me alucinan: ¿qué tiene de grosería usar position absolute? no sabía que era un grosero, porque aunque no abuso de ello ni mucho menos, la uso cuando la necesito o es el mejor recurso (en determinados casos).

Y dejándome de lo de "grosería": ¿qué tiene simplmente de "malo" usar position absolute?

Aunque lo detestes, échate una mirada a estas entrada de las http://www.forosdelweb.com/f53/faqs-...ml#post2576668

El pie está siempre al final de la página, en cualquier resolución, y si el texto crece, el pie lo acompaña para estar siempre al final del texto, no fijo en la pantalla. Quizá tengas mezclado el absolute con el fixed, si no, no entiendo tu aversión.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 31/01/2009, 11:19
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Respuesta: margin-top en bug-Fox (FF)

Maestro Mikmoro: me sucede que si uso position absolute en algun elemento...... otro por arriba se le puede "atrasar" (quedando por debajo del footer por ejemplo) aunque puede que me pase por "bruto"

Cita:
El pie está siempre al final de la página, en cualquier resolución, y si el texto crece, el pie lo acompaña para estar siempre al final del texto, no fijo en la pantalla. Quizá tengas mezclado el absolute con el fixed, si no, no entiendo tu aversión.
Amigo, aca el GRAN problema que tengo es que el texto esta generado por un script de Google y parece ser que reserva un espacio (height) y si no hay suficiente texto, me queda el footer muyyyyy abajo. No se como solucionarlo o si es el foro adecuado.

Ya me estoy leyendo tu articulo sobre el "footer siempre abajo" - muchisimas gracias por compartir eso con nosotros!!!!
__________________
Salu2!
  #8 (permalink)  
Antiguo 31/01/2009, 11:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: margin-top en bug-Fox (FF)

Vale, veamos. Como no imagino por qué puede quedar el pie tan abajo como dices, lo mejor es que, a falta de poder darnos una dirección donde verlo (los enlaces que has puesto a mi al menos no me llevaban a ningún sitio reconocible o asociable con tu problema), veas tu página en el navegador y pegues aquí el código HTML que se genera en el mismo, de manera que podamos comprobar qué hace exactamente el script del que hablas y qué resultado final da como para que genere ese pie tan abajo.

Digo yo, saltamontes Italico76

Cita:
Iniciado por Italico76 Ver Mensaje
otro por arriba se le puede "atrasar" (quedando por debajo del footer por ejemplo)
en el ejemplo que te comento no ocurre eso, porque el texto empuja el pie, como te decía.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 31/01/2009, 11:44
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Respuesta: margin-top en bug-Fox (FF)

Cita:
los enlaces que has puesto a mi al menos no me llevaban a ningún sitio reconocible o asociable con tu problema
Es que le he metido mano a cada minuto!

Viendo que position absolute es tan buena herramienta como dices (y considerando que me ha salvado alguna vez), voy a intentar meter la nube de tags en el el footer o ambos en un contenedor y fijarlo con position absolute

Gracias por todo! mil gracias....
__________________
Salu2!
  #10 (permalink)  
Antiguo 31/01/2009, 12:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: margin-top en bug-Fox (FF)

Bueno, ya sabes, si necesitas ayuda aquí estamos.

Saludos.
__________________
Visita mi nueva web idplus.org
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 20:47.