Ir al contenido


Foto

Problemas con CSS. Diferencias en Firefox/Chrome y Explorer


  • Por favor identifícate para responder
4 respuestas en este tema

#1 diego.moya

diego.moya

    Newbie

  • Miembros
  • Pip
  • 4 mensajes

Escrito 06 diciembre 2011 - 05:13

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.

Imagen Enviada



delphi
  1. @charset "utf-8";
  2. /* CSS Document
  3. COLOR #003466
  4.  
  5. */
  6.  
  7. a:link {
  8.   color: inherit;
  9.   text-decoration: none;
  10. }
  11. a:visited {
  12.   color: inherit;
  13.   text-decoration: none;
  14. }
  15. a:hover {
  16.   color: inherit;
  17.   text-decoration: underline;
  18. }
  19. a:active {
  20.   color: inherit;
  21.   text-decoration: none;
  22. }
  23.  
  24. body{background-color:#CECECE; font-family:Arial, Helvetica, sans-serif}
  25. #principal {position: absolute;left: 50%;width: 800px;height: auto;margin-left: -400px;}
  26.   #log{width:800px; height:100px; background-color:#003466;color:#FFF}
  27.   #logo{width:550px; height:100px; background-image:url(../imagenes/logo_4.png); background-repeat:no-repeat;float:left;}
  28.   #logueo{width:250px; height:100px; background-color:#003466; float:right; font-size:11px}
  29.       #cont_logueo{width:200px; height:50px; margin-left:25px; margin-top:25px;}
  30.         #tit_user{width:80px; height:15px; float:left;}
  31.         #boton_enviar{width:30px; height:14px; margin-left:10px; background-color:#FF0;}
  32.   #izquierda{width:558px; height:auto;float:left} 
  33.       #banner{width:558px; height:190px; background-image:url(../imagenes/banner.png); float:left}
  34.       #ofertas{width:558px; height:auto; float:left; background-color:#FFF} 
  35.  
  36.   #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}
  37.   #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}
  38.   #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}
  39.  
  40.   #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}
  41.   #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}
  42.  
  43.  
  44.  
  45.   #izquierda_admin{width:800px; height:auto; float:left; background-color:#FFF} 
  46.  
  47.  
  48.   #derecha{width:242px; height:auto;float:right; background-color:#FFFFFF}
  49.       #banner_cv{width:242px; height:133px;float:right; background-color:#FECF10;}
  50.       #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}
  51.  
  52.   #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} 
  53.  
  54.   #fila{width:139px; height:25px; float:left; text-align:start; font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center} 
  55.  
  56.  
  57.   #titulo{width:558px; height:30px; text-align:center; margin-top:7px; font-family:Verdana, Geneva, sans-serif; font-size:12px} 
  58.   hr{width:350px; size:1px;}
  59.  
  60.   #dato{ width:130px; height:25px; margin-left:150px; float:left; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px}
  61.   #inpt{ width:200px; height:25px; margin-right:70px; float:right; font-family:Georgia, "Times New Roman", Times, serif}
  62.       #inpt_ci{ width:200px; height:25px; margin-right:70px; float:right; font-family:Georgia, "Times New Roman", Times, serif}
  63.         #inpt_co{ width:200px; height:25px; margin-right:70px; float:right; font-family:Georgia, "Times New Roman", Times, serif}       
  64.  
  65.   #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}
  66.   #inpt_admin{ width:510px; height:28px; margin-right:0px; float:right; font-family: Arial, Helvetica, sans-serif;}
  67.   #text_admin{height: 13px;width: 180px; font-size:13px} 
  68.  
  69.         input[type=text] {height: 11px;width: 70px; font-size:11px  }
  70.         input[type=password] {height: 11px;width: 70px; font-size:11px  }
  71.         input[type=file] {height: 20px;width: 250px; font-size:11px  }


  • 0

#2 mveces

mveces

    Newbie

  • Miembros
  • Pip
  • 8 mensajes

Escrito 04 enero 2012 - 05:16

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:
  • 0

#3 enecumene

enecumene

    Webmaster

  • Administrador
  • 7.419 mensajes
  • LocationRepública Dominicana

Escrito 05 enero 2012 - 07:36

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.../html_xhtml.asp

Saludos.
  • 0

#4 jonaqp

jonaqp

    Newbie

  • Miembros
  • Pip
  • 3 mensajes

Escrito 18 mayo 2012 - 11:39

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
  • 0

#5 felipe

felipe

    Advanced Member

  • Administrador
  • 3.283 mensajes
  • LocationColombia

Escrito 19 mayo 2012 - 07:28

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!
  • 0




IP.Board spam blocked by CleanTalk.