Problema con Internet Explorer

[balfer]

Ante todo presentarme, lo hago por aquí puesto que nose dónde está la sección para ello... Me llamo balfer y me gusta aprender, por eso estoy aquí.

En uno de mis proyectos me encontré un problema...

El pie de la página se ve perfecto en firefox y opera... pero no en Internet Explorer... Se ve movido a la derecha... más arriba de lo que corresponde... y me corta el contenido de la página.

No puedo adjuntar imágenes por motivos anti spam del foro...

Dejo la parte de código que corresponde con esa parte:

CSS:

Código:

#pie {height: 32px; width:100%; background:#FFFFFF; background-image:url(objetos/fondomenu.png); background-repeat:repeat; position:absolute;}

HTML:

Código:

<div id="pie">contenido del pie</div>

Espero alguien pueda ayudarme. Gracias.

[Raulmmmm]

A lo mejor si quitas el position: absolute se soluciona. Si no fuera así, pon un poco más del código HTML que esté cerca del pie y algo más de CSS.

[Mikmoro]

Según dónde lo tengas, es posible que se arregle con left:0; top: 0; porque has puesto posición absoluta pero no le das colocación.

Mikel.

[balfer]

Con el left:0px; he logrado alinearlo a la izquierda, pero sigue borrando el contenido de mi web... Si quito el "absolute" se pone flotante por encima del contenido, tapándolo.

Alguna idea?

[enjuto_9]

Iniciado por balfer

Ante todo presentarme, lo hago por aquí puesto que nose dónde está la sección para ello... Me llamo balfer y me gusta aprender, por eso estoy aquí.

En uno de mis proyectos me encontré un problema...

El pie de la página se ve perfecto en firefox y opera... pero no en Internet Explorer... Se ve movido a la derecha... más arriba de lo que corresponde... y me corta el contenido de la página.

No puedo adjuntar imágenes por motivos anti spam del foro...

Dejo la parte de código que corresponde con esa parte:

CSS:

Código:

#pie {height: 32px; width:100%; background:#FFFFFF; background-image:url(objetos/fondomenu.png); background-repeat:repeat; position:absolute;}

HTML:

Código:

<div id="pie">contenido del pie</div>

Espero alguien pueda ayudarme. Gracias.

Prueba a añadir al css #pie :

Código:

margin-right: auto; 
margin-left: auto;

Y nos cuentas, saludos!!!

[balfer]

Nada, sigue igual

Tendré que reescribir todo el código de nuevo T_T

[Mikmoro]

Bueno, si lo que quieres es que el pie se mantenga siempre abajo haya o no scroll, mírate este ejemplo, a ver si te sirve de orientación.

Mikel.

[balfer]

A ver, parece que no termino de explicarme del todo bien.

Tengo esta estructura de Web:

<div id="cabecera">
<div id="logotipo"></div>
<div id="banner"></div>
</div>
<div id="navegacion"> *Este es el menú de la web*
</div>

<div id="globalcontenido">
<div id="bloqueizquierdo">Contenido del bloque izquierdo aquí</div>
<div id="contenedor">Contenido del contenedor aquí</div>
<div id="bloquederecho">Contenido del bloque derecho aquí</div>
</div>

<div id="pie">
<div id="copyright">copyright aquí</div>
<div id="enlaces">enlaces aquí</div>
<div id="zonaclientes">zona clientes</div>
</div>

El efecto que consigo con esto... es que el pie quede al final de la capa global contenido, adaptándose al alto de la web... pero en Internet explorer no funciona, se queda "flotando" por encima del globalcontenido...

Utilizo el "truco" de los 30000px positivos y negativos para que el bloqueizquierdo, el bloquederecho, y el contenedor tengan el mismo alto, autoajustándose a los otros dos.

Saludos y gracias por la ayuda.

[Mikmoro]

Es decir, que el ejemplo que te he puesto no te ha servido para nada. Bueno, en ese ejemplo el pie no queda nunca por encima del contenido, queda siempre abajo y se desplaza si el contenido crece, sin taparlo nunca, que es el fundamento del ejemplo y de lo que estás explicando. Pero no era eso, y no te ha servido de orientación. Pues bueno, ¿seguro que has mirado el código a ver cómo está hecho?

Pon el css que usas para el html que has puesto, a ver qué se ve.

Mikel.

[balfer]

Ahí lo tienes, espero que sirva de algo >.<

Sino tendré que reescribir toda la web o.0

Código:

/* CSS Document */
* {margin:0px 0px 0px 0px ; padding:0px ; border: 0px;}
body {text-align:center; }
#global {background-color:white; width:100%; min-height:100%; min-width:800px;}
#global h3 {font-size:20px; text-align:center; margin-top:15px; text-decoration:overline underline;}
#global h4 {font-size:12px; text-align:right; margin-bottom:15px;}

#cabecera {background-image:url(objetos/fondocabecera.png); background-position:right; background-repeat:no-repeat; height:150px; width:100%;}

#logotipo1 { float:left; height:150px; width:150px;}
#logotipo1 img {margin: 30px 0px 0px 15px; border:0px;}
#logotipo1 a         { text-decoration:none;}
#logotipo1 a:link    {}
#logotipo1 a:visited {}
#logotipo1 a:hover   {background-color: none;}
#logotipo1 a:active  {}
#datos {float:right; width:433px; height:70px; padding-top:45px;}
#datos p {color:#CCCCCC;}


#logotipo2 { float:right; background-image:url(objetos/cabecera.png); background-repeat:no-repeat; width:433px; height:48px; margin:10px 10px 10px 10px;}

#navegacion { background-image:url(objetos/fondomenu.png); background-repeat:repeat-x; height:50px; width:100%;}
#navegacion li {float:left; list-style:none; margin: 0px 20px 0px 20px; padding-top:15px;}
#navegacion a { color:#CCCCCC; text-decoration:none;}
#navegacion a:visited {}
#navegacion a:hover   {color:white; }
#navegacion a:active  {}

#globalcontenido { background-color:#F2F2F2; background-repeat:repeat; width:auto; height:auto; overflow: hidden; }
#contenedor { background-color:#F2F2F2; padding: 25px 220px 25px 200px;padding-bottom:30000px; margin-bottom:-30000px;}
#contenedor p{ text-indent: 15px; font-size:14px; text-align:left; padding-left:15px; padding-right:15px;}

#menuizquierdo { float:left; width:170px; height:auto; background-color:#CCCCCC; padding:20px 15px 10px 20px; text-align:left;padding-bottom:30000px;margin-bottom:-30000px;border-right:solid 1px;}
#menuizquierdo a         {color:black; text-decoration:none ; display: block; font-size:12px;}
#menuizquierdo a:link    {}
#menuizquierdo a:visited {}
#menuizquierdo a:hover   {color:#003399; text-decoration:none ; }
#menuizquierdo a:active  {color:white;}
#menuizquierdo h3{background-color:#999999; color:white; text-align:center; font-size:14; vertical-align:top; margin-bottom:10px; text-decoration:none;}

#menuderecho {float:right; width:170px; height:auto; background-color:#CCCCCC; padding:20px 15px 10px 20px; text-align:left;padding-bottom:30000px;margin-bottom:-30000px;border-left:solid 1px;}
#menuderecho h3{background-color:#999999; color:white; text-align:center; font-size:14; vertical-align:top; margin-bottom:10px; text-decoration:none;}

#contactoder {width:auto; height:auto; border:solid 1px; padding:3px 3px 3px 3px;}

#contactoder p{font-size:12px;}

/*****************/
/*Pie y derivados*/
/*****************/
#pie {height: 32px; width:100%;background-image:url(objetos/fondomenu.png); background-repeat:repeat; position:absolute; left:0px;margin-right: auto; margin-left: auto;}
#pie li  {list-style: none; font-size: 12px;}
#pieuno  {float:left ; width:20%; padding-top:10px;}
#pieuno a { text-align:left; padding-left:15px; }
#piedos  {float:left ; width:60%; padding-top:10px;}
#pietres {float:left ; width:20%; padding-top:10px;}
#pietres p {font-size:12; color:white; text-align:right; padding-right:15px;}
#piedos p {font-size:13;}

/***********************/
/*Enlaces del pie 1 y 3*/
/***********************/
#pie a         {color:#CCCCCC; text-decoration:none ; display: block; font-size:12px;}
#pie a:link    {}
#pie a:visited {}
#pie a:hover   {color:white; text-decoration:none ; }
#pie a:active  {color:white;}

[trescirculos]

Balfer, monta la web online asi te podemos ayudar mejor y envianos la dirección.

Saludos

[Mikmoro]

No entiendo tu css en absoluto, sobre todo porque ni siquiera veo representados varios de los elementos que ponías en tu html, pero de entrada te puedo decir que empezamos con un error:

* {margin:0px 0px 0px 0px ; padding:0px ; border: 0px;}

El espacio entre el px y el punto y coma invalida por completo ese selector, que debería ser:

* {margin:0px; padding:0px; border: 0px;}

Tampoco entiendo bien dónde ni cómo quieres poner el pie viendo tu css. Como dice trescirculos, si pones un enlace donde se pueda ver quizá te podamos ayudar mejor.

Mikel.