problema al maquetar con firefox?

Venechat · #1 (**permalink**) 27/12/2007, 00:46

Tengo un pequeño problemilla que cuando creo el estilo de mi web en IE7 se ve muy bien pero en firefox sale todo descuadrado todo esto es una practica que estoy realizando pero si no soluciono este problema no me servirá de nada que siga

espero su ayuda y muchas gracias.

Aquí les dejo el código Css:

body {
background:#FFFFFF repeat;
color:#000000;
text-align:center;
margin:25px 0px 25px 0px;
}

#cuerpo{
width: 700px;
margin:10px 10px 10px 10px;
font-family:"Tekton Pro Ext";
font-size:1opt;
text-align:left;
background:#C0C0C0;
margin:auto;
border:1px solid #808080;
}

#navegador{
background:#FC4E03;
font-family:"Arial Rounded MT Bold";
font-size:11pt;
padding:3px 10px 5px 10px;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
text-align:center;
width:680px;
margin:auto;
}

A{color:#000000;
text-decoration:none;
}

A.enlacenav:{visited;
}

A.enlacenav:{active;
}

A.enlacenav:{focus;
}

A.enlacenav:link{color:#000000;
}

A.enlacenav:hover{color:#FF9D6F;
}

#derecho{
width:290px;
text-align:left;
float:rigth;
background:#C0C0C0;
}

#izquierdo{
width:390px;
text-align:justify;
float:left;
background:#C0C0C0;
}

#pie{
background:#FC4E03;
width:700px;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
}

h3{
font-size:12pt;
}

y en este lado el XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

<head>
<meta http - equiv =" Content - Type " content =" text / html ;charset =utf -8" />
<title>Proyecto 001/Primera parte...</title>
<link rel="stylesheet" type="text/css" href="practica.css" />
</head>

<body>

<div id="navegador">
<a href="#" class="enlacenav">Portada</a> |
<a href="#" class="enlacenav">Invierno</a> |
<a href="#" class="enlacenav">Diciembre a marzo</a> |
<a href="#" class="enlacenav">La chimenea</a> |
<a href="#" class="enlacenav">Deportes de invierno</a> |
<a href="#" class="enlacenav">Contacto</a>
</div>

<div id="cuerpo">

<div id="izquierdo">
<p>Aqui va un parrafo comun y corriente</p>
</div>

<div id="derecho">
<p>Aqui va un parrafo comun y corriente</p>

</div>

</div>

<div id="pie">
<h3>muchas gracias por visitar nuestra Web</h3>
</div>

</body>

</html>

No es una gran cosa pero es que soy nuevo en esto de crear Web muchas gracias y esepro la ayuda que me hace falta.

gazpachoymochil · #2 (**permalink**) 27/12/2007, 06:22

Madre mía, qué cantidad de código!!

Creo que deberías empezar cada documento CSS de la forma:

Código:

body {
margin: 0;
padding: 0;
}

El resto de código CSS deberías incluirlo en los divs pertinentes. Otra aclaración... será mejor que emplees medidas utilizando porcentajes en vez de píxels. Por ejemplo, en vez de utilizar "margin:25px 0px 25px 0px;" utiliza "margin:2% 0 2% 0;". Esto te ahorrará problemas.

Ahhh, y el principal problema que habrás tenido es que firefox sigue los estándares de CSS e IE7 no. Así que deberás encontrar los problemas que has tenido buscando paso a paso en el código CSS, esto es, comentando la mayor parte del código y poco a poco ir descomentando para ver donde empieza a fallar. Evidentemente, cada vez que cargues la web hazlo en Firefozx e IE7, de esta forma podrás comprobar los resultados.

Un saludo y espero que te hayan servido de algo mis consejos.