4 respuestas en este tema

[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.

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,

[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 .

http://es.wikipedia.org/wiki/XHTML
http://www.w3schools.../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!