PROGRAMACIÓN WEB > CSS (Cascading Style Sheet)
Problemas con CSS. Diferencias en Firefox/Chrome y Explorer
(1/1)
diego.moya:
Hola a todo el foro. Tengo un problema con los estilos css de mi página web. La página se ve como deberia en chrome y firefox, pero si la veo en explorer (ya sea en la versión 8 o 9) se ve mal, los divs fuera de lugar, imagenes sin el tamaño especificado etc.
La página es http://selectiva.boxsystem.cl/
Como se ve en explorer 9 y firefox 8.
--- Código DELPHI ---@charset "utf-8";/* CSS Document COLOR #003466 */ a:link { color: inherit; text-decoration: none;}a:visited { color: inherit; text-decoration: none;}a:hover { color: inherit; text-decoration: underline;}a:active { color: inherit; text-decoration: none;} body{background-color:#CECECE; font-family:Arial, Helvetica, sans-serif}#principal {position: absolute;left: 50%;width: 800px;height: auto;margin-left: -400px;} #log{width:800px; height:100px; background-color:#003466;color:#FFF} #logo{width:550px; height:100px; background-image:url(../imagenes/logo_4.png); background-repeat:no-repeat;float:left;} #logueo{width:250px; height:100px; background-color:#003466; float:right; font-size:11px} #cont_logueo{width:200px; height:50px; margin-left:25px; margin-top:25px;} #tit_user{width:80px; height:15px; float:left;} #boton_enviar{width:30px; height:14px; margin-left:10px; background-color:#FF0;} #izquierda{width:558px; height:auto;float:left} #banner{width:558px; height:190px; background-image:url(../imagenes/banner.png); float:left} #ofertas{width:558px; height:auto; float:left; background-color:#FFF} #titulo_oferta{width:548px; height:36px; float:left; margin-top:10px; font-family:Georgia, "Times New Roman", Times, serif; font-size:25px; margin-left:10px; font-weight:500} #titulo_fecha{width:548px; height:20px; float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:10px; margin-left:10px; font-weight:500} #detalle_oferta{ width:548px; margin-top:90px; margin-left:10px; height:auto; font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; border-top:2px solid #999; border-bottom:2px solid #999} #req_oferta{ width:152px; height:17px; float:left; font-family: Arial, Helvetica, sans-serif; margin-left:10px; border-bottom:1px solid #999; border-right:4px solid #999; font-size:12px; text-align:left} #req_det{ width:392px; height:17px; float:right;font-family: Arial, Helvetica, sans-serif; border-bottom:1px solid #999;font-size:12px; text-align:left; text-align:center} #izquierda_admin{width:800px; height:auto; float:left; background-color:#FFF} #derecha{width:242px; height:auto;float:right; background-color:#FFFFFF} #banner_cv{width:242px; height:133px;float:right; background-color:#FECF10;} #titulo_rrhh{width:242px; height:25px; background-color:#003466; float:left; color:#FFF; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; text-align:center} #columna{width:139px; background-color:#FFF; height:15px; float:left; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold; border-bottom:2px solid black} #fila{width:139px; height:25px; float:left; text-align:start; font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center} #titulo{width:558px; height:30px; text-align:center; margin-top:7px; font-family:Verdana, Geneva, sans-serif; font-size:12px} hr{width:350px; size:1px;} #dato{ width:130px; height:25px; margin-left:150px; float:left; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px} #inpt{ width:200px; height:25px; margin-right:70px; float:right; font-family:Georgia, "Times New Roman", Times, serif} #inpt_ci{ width:200px; height:25px; margin-right:70px; float:right; font-family:Georgia, "Times New Roman", Times, serif} #inpt_co{ width:200px; height:25px; margin-right:70px; float:right; font-family:Georgia, "Times New Roman", Times, serif} #dato_admin { width:250px; height:27px; margin-left:20px; float:left; font-family: Arial, Helvetica, sans-serif; font-size:12px; text-align:center; border-bottom:1px solid #CCC} #inpt_admin{ width:510px; height:28px; margin-right:0px; float:right; font-family: Arial, Helvetica, sans-serif;} #text_admin{height: 13px;width: 180px; font-size:13px} input[type=text] {height: 11px;width: 70px; font-size:11px } input[type=password] {height: 11px;width: 70px; font-size:11px } input[type=file] {height: 20px;width: 250px; font-size:11px }
mveces:
Buenas que tal, tal ves tu problema son los pixeles, intenta usando % en lugar de px de esa manera debe salir igual sin importar el explorador o la pantalla de la computadora.
Espero te ayude en algo,
Saludos, :cool:
enecumene:
La mejor forma es utilizando el formato XHTML con un DOCTYPE, asi te evitas ese tipo de problemas, claro, siempre y cuando IE se mayor que la version 7 :p.
http://es.wikipedia.org/wiki/XHTML
http://www.w3schools.com/html/html_xhtml.asp
Saludos.
jonaqp:
creo que tu problema seria esto..
#principal {position: absolute;left: 50%;width: 800px;height: auto;margin-left: -400px;}
cuando utilizas absoluto chrome y firefox puedes aceptar en igualdad
pero a IE como nos dice cesar cancino el inombrable , sucede que no acepta mucho las posiciones que en algunos, se van a ir a la derecha.
ahora el uso de % es buenisimo pero es mas dedicado y detalloso.
ya que si haces debes fijar bien
99% se ve igual en todos los buscadores .
no soy experto en css pero tambien me ha pasado
lo mejor es crear asi ,es una idea.
<div id="principal">
<div id="header"> <------aca declaras el ancho y centralo
Aca entran tus miles de div
</div>
<div id="content"> <------aca declaras el ancho y centralo
Aca entran tus miles de div
</div>
<div id="footer"> <------aca declaras el ancho y centralo
Aca entran tus miles de div
</div>
<div>
es una idea , pero asi plantea la w3c para sitio lindos .
solo es una idea espero que te haya ayudado
saludos, jonathan de peru
felipe:
Otra cosa que puedes hacer es a las imágenes asignarles un borde de 0px, en ocasiones y por defecto IE hace esto por lo que se pueden desubicar los div debido al cambio de tamaño.
Saludos!
Navegación
Ir a la versión completa