margin-top en bug-Fox (FF)

[Italico76]

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.

#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:

#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!!!

[Aresillo]

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

[Italico76]

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!!!

<? // 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 (!)

[Italico76]

La version que ves ONLINE no usa el position absolute sino lo que esta comentado en #footer

[Italico76]

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

<? // 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;
}

[Mikmoro]

Iniciado por Italico76

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.

[Italico76]

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"

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!!!!

[Mikmoro]

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

Iniciado por Italico76

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.

[Italico76]

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....

[Mikmoro]

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

Saludos.