Problemas de visualizacion entre Firefox e Internet Explorer

luciio · #1 (**permalink**) 15/09/2009, 15:18

Hola buenas tardes, les vengo a molestar compas poruqe fijense que estoy diseñando este sitio: http://www.clinicamagic.com/lucioxhtml/

y tengo un problema por el momento con el pie de pagina que en firefox se ve super bien, pero en internet explorer se encima un poco sobre la capa antecesora y no se como solucionarlo, espero me puedan ayudar porfavor ya que hoy se me presenta este problema y estoy seguro que despues se volvera a repetir entonces quisiera saber como solucionarlo, muchas gracias !

les dejo el codigo:

PD. soy muy nuevo en esto de el disñeo web, jeje.

CSS:

Cita:

* {margin:0;padding:0; border:0; outline:none; position: relative;}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #8A8A8A;
text-decoration: none
}

P {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #8A8A8A;
}

#contenedor {
width: 776px;
margin-left: -388px;
left: 50%;
top: 0px
}

#topmenu {
width: 776px;
height: 54px;
background-color: #dd7580
}

#menulinks {
width: 700px;
height: 54px;
margin-left: -350px;
left: 50%
}

·div55 {
width: 55px;
}

#leftlogo {
float: left;
width: 208px;
height: 258px;
background-image: url(imagenes/logo.jpg)
}

#header {
float: right;
width: 567px;
height: 258px;
background-image: url(imagenes/cabecera.jpg)
}

#bodyleft {
width: 190px;
height: 370px;
float: left
}

#bodyright {
width: 586px;
float: right

}

#contenedorbd {
width: 776px;
height: 380px;
}

#menuleft {
width: 174px;
height: 342px;
margin-left: -87px;
top: 15px;
left: 50%
}

#contentright {
top: 15px;
width: 540px;
margin-left: -270px;
left: 50%
}

#linea {
width: 776px;
height: 8px;
background-color: #dd7580
}

.corte {
clear: both;

}

.cuadro {
width: 100%
}

.atencion {
width: 260px;
float: left;
}

.sep {
width: 280px;
float: right;
}

.imagenei {
top: 12px;
padding: 0px;
margin-right: 10px;
margin-bottom: 10px;
border: 5px #FFFFFF solid;
float: left;
}

.imagened {
top: 22px;
left: 10px;
padding: 10px;
margin-right: 10px;
margin-bottom: 10px;
border: 5px #FFFFFF solid;
float: left;
}

#contprod {
top: 40px;
width: 540px;
height: 149px
}

#pie {
width: 100%;
height: 90px;
background-color: #dd7580;
position: absolute
}

.img1 {
top: 12px;
padding: 0px;
margin-right: 10px;
margin-bottom: 10px;
border: 5px #FFFFFF solid;
float: left;
}

.logopie {
top: 30px;
right: 20px;
float: right
}

HTML:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
<div id="contenedor">
<div id="topmenu">
<div id="menulinks">
<a href="#"><img src="imagenes/btn_1.jpg" width="131" height="54" alt="inicio" /></a>
<a href="#"><img src="imagenes/btn_2.jpg" width="132" height="54" alt="Curso basico delineado permanente" /></a>
<a href="#"><img src="imagenes/btn_3.jpg" width="135" height="54" alt="Curso avanzado delineado permanente" /></a>
<a href="#"><img src="imagenes/btn_4.jpg" width="128" height="54" alt="Productos delineado permanente" /></a>
<a href="#"><img src="imagenes/btn_5.jpg" width="140" height="54" alt="Contacto" /></a>
</div>
</div>
<div id="leftlogo"></div>
<div id="header"></div>
<div class="corte"></div>
<div id="linea"></div>
<div id="contenedorbd">
<div id="bodyleft">
<div id="menuleft">
<a href="#"><img src="imagenes/menu/curso-basico-delineado-permanente.jpg" width="173" height="32" /></a>
<a href="#"><img src="imagenes/menu/curso-avanzado-delineado-permanente.jpg" width="173" height="32" /></a>
<a href="#"><img src="imagenes/menu/curso-paramedico-reconstructivo.jpg" width="173" height="30" /></a>
<a href="#"><img src="imagenes/menu/curso-de-extensiones-de-pestañas.jpg" width="173" height="30" /></a>
<a href="#"><img src="imagenes/menu/curso-de-tatuaje-de-uñas.jpg" width="173" height="22" /></a>
<a href="#"><img src="imagenes/menu/curso-de-rizado-de-pestañas.jpg" width="173" height="22" /></a>
<a href="#"><img src="imagenes/menu/curso-de-tinte-de-pestañas.jpg" width="173" height="22" /></a>
<a href="#"><img src="imagenes/menu/beneficios-alumnas-egresadas.jpg" width="173" height="22" /></a>
<a href="#"><img src="imagenes/menu/certificacion-sep.jpg" width="173" height="22" /></a>
<a href="#"><img src="imagenes/menu/nuestro-objetivo.jpg"q width="173" height="22" /></a>
<a href="#"><img src="imagenes/menu/cryoterapia.jpg" width="173" height="22" /></a>
<a href="#"><img src="imagenes/menu/productos-delineado-permanente.jpg" width="173" height="22" /></a>
<a href="#"><img src="imagenes/menu/servicios.jpg" width="173" height="22" /></a>
<a href="#"><img src="imagenes/menu/contactanos.jpg" width="173" height="20" /></a> </div>
</div>
<div id="bodyright">
<div id="contentright">
<div class="cuadro"><img src="imagenes/curso-basico-delineado-permanente-title.jpg" width="377" height="40" /> </div>
<div class="atencion">
<img src="imagenes/contacto-imagen.jpg" width="68" height="79" class="imagenei" />
<br />
<br />
<p>Atención continua y permanente ya sea por vía Internet, telefónica, o acudir a nuestro plantel educativo.</p>
</div>
<div class="sep">
<img src="imagenes/certificacion-sep.jpg" width="75" height="50" class="imagened" />
<br />
<br />
<p>Certificación y constancia como tecnico en micropigmentacion por parte de la asociación mexicana de micropigmentacion y de la s.e.p</p>
</div>
<div id="contprod">
<div class="cuadro"><img src="imagenes/productos-titulo.jpg" width="184" height="37" /></div>
<div class="cuadro"><img src="imagenes/productos-delineado-permanente.jpg" width="540" height="112" /></div>
</div>
</div>
</div>
</div>
</div>
<div id="pie">
<div class="logopie"><img src="imagenes/logopie.jpg" width="109" height="43" /></div>
</div>
</body>
</html>

Mikmoro · #2 (**permalink**) 15/09/2009, 15:23

Mira a ver por qué tienes 4 enlaces que no tienen nada, o más bien cuyas imágenes no están, ocupando un lugar en IE6, no así en FF (como es natural).

Cita:

luciio · #3 (**permalink**) 15/09/2009, 15:48

aaaah srry, es ke si de repente se me va el roio bien denso jeje, ya corregi lo de las imagenes pero ahora se sigue mostrando encimado en internet explorer, no sabes a que se debe?

muchas gracias

Mikmoro · #4 (**permalink**) 15/09/2009, 15:50

Lo siento pero no entiendo ni palabra.

luciio · #5 (**permalink**) 15/09/2009, 15:59

Disculpame.

Te comento que ya corregi el problema con las imagenes que me comentabas, ahora ya se ven, pero sigo teniendo el mismo problema; en internet explorer el pie de pagina se encima un poco a su caja antecesora tapando en el menu el boton de contacto, en firefox se ve perfectamente, no sabes a que se debe este problema?

saludos y muchas gracias.

charli_vk · #6 (**permalink**) 16/09/2009, 16:43

Yo creo que se debe a las chapuzas que hace Microsoft con su navegador.

Siento que mi comentario no te sirva para nada pero he sufrido muchos problemas con ese navegador.

Un saludo y espero que lo resuelvas.

kaiseer · #7 (**permalink**) 16/09/2009, 18:12

Cita:

Iniciado por charli_vk

Yo creo que se debe a las chapuzas que hace Microsoft con su navegador.

Siento que mi comentario no te sirva para nada pero he sufrido muchos problemas con ese navegador.

Un saludo y espero que lo resuelvas.

Hola!! Lo mismo digo vale!! el IE es un gran problema, lo peor es que ademas hay que preocuparse por las diferentes versiones.. porque lo que se ve bien en el 6 es un desastre en el 8 o viceversa.:! es un verdadero sufrimiento!

Lamentablemente es el mas usado asi que si queremos llegar los millones de usuarios que usan el IE debemos ajustanos a él asi nos de JAquecas ..! Trate de buscar el error pero nada que ver..!! espero que lo puedas resolver y disculpa por no poder ayudarte.

kaiseer · #8 (**permalink**) 16/09/2009, 18:23

Ah por cierto..! en la version 8 del IE todo se ve bien..! al menos a mi. En donde veo que pasa eso es el en ie 7, que la barra rosada pega con el menu y la parte de contacto y productos esta por debajo.

Justo ahora estoy diseñando con CSS y he dejado de intentar que todo quede en el mismo lugar, parece imposible hacer que todo quede en su posicion cuando hablamos de las versiones del IE..! Todo bien en el 8 pero alguno que otro movimieto de las capas en el IE 6 y 7..

Claro que no hay un movimiento tan drastico como el tuyo.. lo que medio he hehco para que se parezcan es trabajar mucho con "position:absolute", pero apenas comienzo en el css asi que no me hagas mucho caso..! Suerte LUCIIO

kseso? · #9 (**permalink**) 17/09/2009, 05:29

¿Y por qué razón marcas alturas a ciertas cajas?
Recuerda cuál es el modelo de caja estándar y cuál es el que aplica ie7.
Retira las alturas de aquellas cajas que no deberían tenerla; coloca los enlaces de la izquierda en una lista (ul/li); y a los contenedores que tienen todo su contenido flotado añádeles el preceptivo overflow para que crezcan.
Y cosas como estas son innecesarias:
#menuleft {
height:342px;
left:50%;
margin-left:-87px;
width:174px;
}

Un saludo

luciio · #10 (**permalink**) 17/09/2009, 14:44

Cita:

Iniciado por kseso?

¿Y por qué razón marcas alturas a ciertas cajas?
Recuerda cuál es el modelo de caja estándar y cuál es el que aplica ie7.
Retira las alturas de aquellas cajas que no deberían tenerla; coloca los enlaces de la izquierda en una lista (ul/li); y a los contenedores que tienen todo su contenido flotado añádeles el preceptivo overflow para que crezcan.
Y cosas como estas son innecesarias:
#menuleft {
height:342px;
left:50%;
margin-left:-87px;
width:174px;
}

Un saludo

Muchas gracias a todos, en especial a ti keseso?, tu fuiste quien me inicio en esto del CSS jajaja y si todabia tengo enormes errores, pongo la altura de la caja porque muchas veces la caja de abajo no me respeta la de arriba si no pongo la altura hahaha, aunque vere ese comando que dices overflow aber que tal me resulta, ese comando (overflow) es para que la caja vaya subiendo su altura automaticamente respecto al contenido? muchisimas gracias!!

PD. ya solucione mas o menos el problema ahora el sitio web ya esta arriba: www.clinicamagic.com se ve bien en todos los IE y mozilla, excepto en la version 6 donde no se ven las barras de scroll quien sabe porque:S

Mikmoro · #11 (**permalink**) 17/09/2009, 15:02

Dos cosas:

1.- usar el position: relative; en el pequeño "reset" de la hoja de estilo

Cita:

* {margin:0;padding:0; border:0; outline:none; position: relative;}

tiene ciertos riesgos, sobre todo si no sabes bien cómo esto puede afectar a determinados elementos.
En tu caso, como puede ocurrirte muchas veces, tendrás que contrarestarlo con un position: static; en #contenedor, y aparecerá la barra de scroll en IE6.

2.- lo que te dice kseso? entre otras cosas es que no uses para centrar el contenedor el truco del 50% de desplazamiento y el margen negativo; es mucho más simple con un margin: 0 auto;

Cita:

#contenedor {
width: 776px;
margin: 0 auto;
position: static;
}

Tienes más errores de ese estilo, pero ahí tendrás que aplicarte de momento con estas pistas.