Problemas con el pie de página en Firefox y Internet Explorer

pakkk18 · 17 Jul 2011, 11:30 · Solicitar retirada

Buenos días, en primer lugar enhorabuena por el curso paso a paso del HtmlKit. Está realmente bien y es muy completo. Mi problema es el siguiente:
Voy por la lección 5. Al hacer un preview de mi plantilla he visto un problema con el pie de página en diferentes exploradores. En firefox me aparece más pequeño de altura (mucho menos de 65px) como si se hubiera contraido. En Internet Explorer si aparece bien la altura pero el pie de página está ligeramente desplazado a la derecha. Hay un problema común a ambos exploradores y es que se ven unos bordes a ambos lados de la imagen "curva-inferior.gif" que no se si serán los bordes de la capa #pie... Este es el código html de mi pie de página:

<div id="pie">
<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contacto</a></li><li><a href="#">Nos Enlazan</a></li>
</ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li>
</ul>
</div>

Y esta es su parte correspondiente en la hoja de estilos:

#pie {background-color:white; border-left:black 1px solid; border-right:black 1px solid; border-top:black 1px solid; height:65px;}
#pie li {list-style:none; font-size:12px;}
#pieuno {float:left; width:150px;}
#piedos {float:left; width:498px;}
#pietres {float:left; width:150px;}
#curva-inferior {background-image:url(objetos/curva-inferior.gif);
background-repeat:no-repeat; width:800px; height: 12px; overflow:hidden;}

Espero que me podáis ayudar. Un saludo

JorGens · 17 Jul 2011, 11:45 · Solicitar retirada

Gracias por la enhorabuena pakkk! Nos alegra que te sean útiles las lecciones.

Pega mejor todo tu codigo, tanto el html como el css. En ocasiones los fallos no están directamente en la parte correspondiente. Oki?

Lo arreglamos en seguida, seguro.

Un abrazo y bienvenido!

pakkk18 · 17 Jul 2011, 11:55 · Solicitar retirada

¡Vaya rapidez! ¡Esto si que es un buen foro y lo demás es tontería! Bueno,vamos al lío
Ahi va la plantilla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif" widht="270" height="80"
alt="Haz click aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
<div id="navegacion">
<ul><li><a href="#">Sección 1</a></li><li><a href="#">Sección 2</a></li><li><a href="#">Sección 3</a></li><li><a href="#">Sección 4</a></li>
</ul>
</div>

<div id="contenido">

<div id="menu">
<ul><h1>Título de Sección 1</h1><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>
</div>

<h1>Esta será la zona principal de la web</h1>
<p>Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>

<h2>Y este es el tercer párrafo.</h2><p> En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.

Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
</div>

<div id="pie">
<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contacto</a></li><li><a href="#">Nos Enlazan</a></li>
</ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li>
</ul>
</div>
<div id="curva-inferior"></div>
</div>


</body>
</html>

Y aquí la hoja de estilos:

* {text-indent:0px; margin:0px; padding:0px; border:0px;}
p {text-align:justify;}
h1 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:underline; text-align:center;}
h2 {font.size:1.1em; color:blue; font-weight:bold; text-decoration:none; text-align:center;}
body {text-align:center;}
#global {width:800px; margin:4px auto;}
#curva-superior {background-image:url(objetos/curva-superior.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}
#cabecera {background-color:white; border-left:black 1px solid;
border-right:black 1px solid; height:85px;}
#logotipo {widht:280px; float:left;}
#publicidad {widht:518px; float:right; margin-top:25px;}
#navegacion {background-color:gray; border:black 1px solid; height:20px;}
#navegacion li {float:left; margin:0px 20px 0px;}
#navegacion ul {margin-left:180px; list-style:none;}
#contenido {background-color:orange; border-left:black 1px solid; border-right:black 1px solid;}
#contenido p {padding:5px 10px 5px 10px; text-indent:15px;}
#menu {width:150px; float:left; text-align:left; margin:3px 10px 3px 3px; background-image:url(objetos/menu-parte-inferior.gif); background-position:bottom; padding-bottom:5px;}
#menu h1 {text-decoration:none; font-size:12px; padding-top:12px; background-image: url(objetos/menu-parte-superior.gif);}
#menu li {list-style:none; margin:4px 8px 4px 6px;}
#pie {background-color:white; border-left:black 1px solid; border-right:black 1px solid; border-top:black 1px solid; height:65px;}
#pie li {list-style:none; font-size:12px;}
#pieuno {float:left; width:150px;}
#piedos {float:left; width:498px;}
#pietres {float:left; width:150px;}
#curva-inferior {background-image:url(objetos/curva-inferior.gif);
background-repeat:no-repeat; width:800px; height: 12px; overflow:hidden;}
a {color:brown; text-decoration:none; display:block;}
a:link {}
a: visited {}
a:hover {color=red ; text-decoration:underline; background-color: silver;}
a:active {}
#pie a {color:blue; text-decoration:none; display:block}
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black; text-decoration:underline; background-color:white}
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color:white}
#logotipo a:active {}

Seguro que será una tontería...

Rabs · 17 Jul 2011, 12:16 · Solicitar retirada

pasame el link de la web para verlo en "directo" y asi verlo mejor :)

JorGens · 17 Jul 2011, 12:43 · Solicitar retirada

Te falta quizás cerrar un div?

<div id="pie">
<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contacto</a></li><li><a href="#">Nos Enlazan</a></li>
</ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li>
</ul>
</div>
</div>
<div id="curva-inferior"></div>
</div>

Confirmanoslo, oki?

pakkk18 · 17 Jul 2011, 14:02 · Solicitar retirada

Exacto. Me faltaba cerrar ese div. Muchas gracias por vuestra atención y rapidez. No dudaré en volver a preguntar si me vuelve a pasar algo parecido. Un saludo

JorGens · 17 Jul 2011, 14:28 · Solicitar retirada

No dudaremos en responderte! je je je

un abrazo!

Rabs · 17 Jul 2011, 15:26 · Solicitar retirada

Para eso estamos pakkk hehe (Jorgens, me has quitado la respuesta, cuando he vuelto a encender el ordenaor y ver este tema... HE VISTO QUE YA LO HABIAS RESPONDIDO!!) ehehe