Entrar

Problemas con Firefox

bbacigalupo · · Solicitar retirada
Hola

Estoy intentando hacer mi primera página web. La probé con Internet Explorer y se ve bien, pero con Firefox se ve toda desordenada. Acá voy a pegar el código, es bastante corto. Ojalá que alguien me pueda decir dónde está el problema.

Gracias, saludos

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>

<div id="global">
<div id="cabecera">
[contenido no disponible]</div>
<div id="navegacion">Barra de Navegación</div>
<div class="contenido-int-ext">
<div class="int-izq-ext">

[contenido no disponible]</p></div>
<div class="int-der-ext">


</p>
<p class="texto-negrita">Juan Bacigalupo</p>


Profesor Titular Universidad de Chile</p>
</div>
</div>
<div class="contenido-gral">Info Personal</div>
<div id="pie">Las Palmeras#3425, Ñuñoa, Santiago-Chile</div>

</body>
</html>

Y acá está el css

*{margin: 0px;padding: 0px;border: 0px}
body {text-align:center }
#menu {background-color: #2F4F4F;width: 150px;float:left;margin:3px 10px 3px 3px }
#menu li {list-style:none ; margin: 4px 0px 4px 6px}
a {color:#FFFFF0;font-size:1em;text-decoration:none;display:block}
a:link{}
a:visited{}
a:hover {color:red;font-size:1em;text-decoration:none;background-color:silver}
a:active{}
#cabecera {background-color: silver }
#navegacion {background-color: gray }
#contenido {background-color: #B0C4DE;width: 800px;height:250px;float:left }
#contenido p{padding:5px 10px 5px 10px}
#pie {background-color: gray }
#global {width:800px;margin: 4px auto }
p {text-align:justify}
.int-izq {background-color: #B0C4DE;width: 375px;height:125px;float:left;text-align:left;padding:10px 10px 10px 10px}
.int-der {background-color: #B0C4DE;width: 375px;height:125px;float:right;padding:10px 10px 10px 10px}
.a1 {width: 100px;float:left}
.a2 {width: 250px;float:right}
.b1 {width: 100px;float:left}
.b2 {width: 250px;float:right}
.contenido-int {background-color: #B0C4DE;width: 800px;height:125px }
.contenido-int-ext {background-color: #B0C4DE;width: 800px;height:180px }
.int-izq-ext {background-color: #B0C4DE;width: 180px;height:180px;float:left;text-align:right;padding:10px 0px 10px 20px}
.int-der-ext {background-color: #B0C4DE;width: 615px;height:180px;float:right;padding:10px 10px 10px 10px}
.texto-negrita { font-weight:bold}
.contenido-gral {background-color: #B0C4DE;width: 800px;padding: 35px 10px 20px 10px}
kAnY · · Solicitar retirada
como bien te explica el tutorial en distintos explorex se ve diferente, pero si lo tienes bien yo ya no se el problema
bbacigalupo · · Solicitar retirada
No he subido la página todavía, recién estoy haciendo el código pero sólo se ve bien en el Internet Explorer. Quisiera saber que debo hacer para que se vea bien en los demás navegadores. Quizás no igual pero al menos no tan desordenada como se ve por ejemplo en el Firefox, que es un desastre.
Saludos
Tania · · Solicitar retirada
estos tres div no tienen nombre, no los has alineado a ningun sitio.

<div class="contenido-int-ext">
<div class="int-izq-ext">

[contenido no disponible]</p></div>
<div class="int-der-ext">
Tania · · Solicitar retirada
Mira, lo mejor es que crees bien los divs y le pongas todos los atributos
que puedas dentro de ellos.
Luego las clases (o sea el class=___ lo dejas para cosas puntuales

HTML

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>

<div id="global">
<div id="cabecera">
[contenido no disponible]</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">


[contenido no disponible]</p>



</p>
<p class="texto-negrita">Juan Bacigalupo</p>


Profesor Titular Universidad de Chile</p>
</div>
</div>
<div id="sobrepie">Info Personal</div>
<div id="pie">Las Palmeras#3425, Ñuñoa, Santiago-Chile</div>

</body>
</html>


CSS


<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
*{margin: 0px;padding: 0px;border: 0px}
body {text-align:center }
#menu {background-color: #2F4F4F;width: 150px;float:left;margin:3px 10px 3px 3px }
#menu li {list-style:none ; margin: 4px 0px 4px 6px}
a {color:#FFFFF0;font-size:1em;text-decoration:none;display:block}
a:link{}
a:visited{}
a:hover {color:red;font-size:1em;text-decoration:none;background-color:silver}
a:active{}
#cabecera {background-color: silver }
#navegacion {background-color: gray }
#contenido {background-color: #B0C4DE; width:800px; height:250px;}
#contenido p{padding:5px 10px 5px 10px}
#sobrepie{
background-color:gray; width:800px;
}
#pie {background-color:gray; width:800px; }
#global {width:800px; margin:4px}
p {text-align:justify}
.int-izq {background-color: #B0C4DE;width: 375px;height:125px;float:left;text-align:left;padding:10px 10px 10px 10px}
.int-der {background-color: #B0C4DE;width: 375px;height:125px;float:right;padding:10px 10px 10px 10px}
.a1 {width: 100px;float:left}
.a2 {width: 250px;float:right}
.b1 {width: 100px;float:left}
.b2 {width: 250px;float:right}
.contenido-int {background-color: #B0C4DE;width: 800px;height:125px }
.contenido-int-ext {background-color: #B0C4DE;width: 800px;height:180px }
.int-izq-ext {background-color: #B0C4DE;width: 180px;height:180px;float:left;text-align:right;padding:10px 0px 10px 20px}
.int-der-ext {background-color: #B0C4DE;width: 615px;height:180px;float:right;padding:10px 10px 10px 10px}
.texto-negrita { font-weight:bold}
.contenido-gral {background-color: #B0C4DE;width: 800px;padding: 35px 10px 20px 10px}