Foros del Web » Creando para Internet » CSS »

Problemas de visualizacion entre Firefox e Internet Explorer

Estas en el tema de Problemas de visualizacion entre Firefox e Internet Explorer en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/09/2009, 16:18
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Problemas de visualizacion entre Firefox e Internet Explorer

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&iacute;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>
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #2 (permalink)  
Antiguo 15/09/2009, 16:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de visualizacion entre Firefox e Internet Explorer

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:
<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>
  #3 (permalink)  
Antiguo 15/09/2009, 16:48
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: Problemas de visualizacion entre Firefox e Internet Explorer

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
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #4 (permalink)  
Antiguo 15/09/2009, 16:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de visualizacion entre Firefox e Internet Explorer

Lo siento pero no entiendo ni palabra.
  #5 (permalink)  
Antiguo 15/09/2009, 16:59
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: Problemas de visualizacion entre Firefox e Internet Explorer

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.
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #6 (permalink)  
Antiguo 16/09/2009, 17:43
Avatar de charli_vk  
Fecha de Ingreso: diciembre-2008
Ubicación: España
Mensajes: 108
Antigüedad: 9 años
Puntos: 3
Respuesta: Problemas de visualizacion entre Firefox e Internet Explorer

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.
  #7 (permalink)  
Antiguo 16/09/2009, 19:12
 
Fecha de Ingreso: septiembre-2009
Mensajes: 86
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Problemas de visualizacion entre Firefox e Internet Explorer

Cita:
Iniciado por charli_vk Ver Mensaje
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.
  #8 (permalink)  
Antiguo 16/09/2009, 19:23
 
Fecha de Ingreso: septiembre-2009
Mensajes: 86
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Problemas de visualizacion entre Firefox e Internet Explorer

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
  #9 (permalink)  
Antiguo 17/09/2009, 06:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas de visualizacion entre Firefox e Internet Explorer

¿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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 17/09/2009, 15:44
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: Problemas de visualizacion entre Firefox e Internet Explorer

Cita:
Iniciado por kseso? Ver Mensaje
¿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
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #11 (permalink)  
Antiguo 17/09/2009, 16:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de visualizacion entre Firefox e Internet Explorer

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:33.