Foros del Web » Creando para Internet » CSS »

Falla el estilo.css en Iexplorer y todo descuadrado

Estas en el tema de Falla el estilo.css en Iexplorer y todo descuadrado en el foro de CSS en Foros del Web. Hola. Estoy terminando una web donde como siempre al verla y probar día a día en Mozilla Firefox y otros que no son Iexplorer todo ...
  #1 (permalink)  
Antiguo 27/07/2011, 21:56
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.887
Antigüedad: 13 años, 10 meses
Puntos: 59
Falla el estilo.css en Iexplorer y todo descuadrado

Hola.

Estoy terminando una web donde como siempre al verla y probar día a día en Mozilla Firefox y otros que no son Iexplorer todo iba bien, sin embargo entro en Iexplorer y la veo todo descuadrada. (Años después vuelvo a lo mismo)

La web es esta:

http://miratuseguro.es

Y el estilo.css el siguiente:

Código CSS:
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. *{margin:0;
  4. padding:0;}
  5. body {
  6.     font-family: Verdana, Arial, Helvetica, sans-serif;
  7.     font-size:0.8em;
  8.     color:#000;
  9.     background-color:#f2f2f2;
  10.     }
  11. #menu{
  12.     width:700px;
  13.     background-image: url(imagenes/fondo-menu.jpg);
  14.     background-repeat: no-repeat;
  15.     height:160px;  
  16.     text-align:center;
  17.     display:block;
  18.     float:left;}
  19. .menu{
  20.     width:700px;
  21.     height:160px;
  22.     margin: 0;
  23.     padding:0; 
  24.     list-style:none;
  25.     background-image: url(imagenes/fondo-menu.jpg);
  26.     background-repeat: no-repeat;
  27.     }
  28. .menu li {float:left;}
  29. .menu li a {
  30.     display:block; 
  31.     line-height:160px;
  32.     text-decoration:none;
  33.     font-weight:bold;
  34.     text-align:center;     
  35.     font-size:0.9em;
  36.     color: #fff;
  37.     margin-left:0; 
  38.     }
  39. .menu li span{display: block;
  40.     overflow: hidden;
  41.     text-indent:-9999em;
  42.     }
  43. .menu li.automovil a { 
  44.     background-position: 0 0;
  45.     width:160px;
  46. }
  47. .menu li.automovil a:hover {
  48.     background-image: url(imagenes/fondo-menu.jpg);
  49.     background-position: 0 160px;  
  50. }
  51. body#automovil .menu li.automovil a {  
  52. background-image: url(imagenes/fondo-menu.jpg);
  53.     background-position: 0 160px;  
  54. }
  55. .menu li.hogar a{
  56.     background-image: url(imagenes/fondo-menu.jpg);
  57.     background-position: -160px 0;
  58.     width:70px;
  59. }
  60. .menu li.hogar a:hover {
  61.     background-image: url(imagenes/fondo-menu.jpg);
  62.     background-position: -160px 160px;
  63. }
  64. body#hogar .menu li.hogar a {
  65.     background-image: url(imagenes/fondo-menu.jpg);
  66.     background-position: -160px 160px;
  67. }
  68. .menu li.vida a {
  69. background-image: url(imagenes/fondo-menu.jpg);
  70.     background-position: -230px 0;
  71.     width:60px;
  72. }
  73. .menu li.vida a:hover {
  74. background-image: url(imagenes/fondo-menu.jpg);
  75.     background-position: -230px 160px;
  76. }
  77. body#vida .menu li.vida a {
  78. background-image: url(imagenes/fondo-menu.jpg);
  79.     background-position: -230px 160px;
  80. }
  81. .menu li.decesos a {
  82. background-image: url(imagenes/fondo-menu.jpg);
  83.     background-position: -290px 0;
  84.     width:80px;
  85. }
  86. .menu li.decesos a:hover {
  87. background-image: url(imagenes/fondo-menu.jpg);
  88.     background-position: -290px 160px;
  89. }
  90. body#decesos .menu li.decesos a {
  91. background-image: url(imagenes/fondo-menu.jpg);
  92.     background-position: -290px 160px;
  93. }
  94. .menu li.accidentes a {
  95. background-image: url(imagenes/fondo-menu.jpg);
  96.     background-position: -370px 0;
  97.     width:120px;
  98. }
  99. .menu li.accidentes a:hover {
  100. background-image: url(imagenes/fondo-menu.jpg);
  101.     background-position: -370px 160px;
  102. }
  103. body#accidentes .menu li.accidentes a {
  104. background-image: url(imagenes/fondo-menu.jpg);
  105.     background-position: -370px 160px;
  106. }
  107. .menu li.salud a {
  108. background-image: url(imagenes/fondo-menu.jpg);
  109.     background-position: -490px 0;
  110.     width:60px;
  111. }
  112. .menu li.salud a:hover {
  113. background-image: url(imagenes/fondo-menu.jpg);
  114.     background-position: -490px 160px;
  115. }
  116. body#salud .menu li.salud a {
  117. background-image: url(imagenes/fondo-menu.jpg);
  118.     background-position: -490px 160px;
  119. }
  120. .menu li.negocio a {
  121. background-image: url(imagenes/fondo-menu.jpg);
  122.     background-position: -550px 0;
  123.     width:150px;
  124. }
  125. .menu li.negocio a:hover {
  126. background-image: url(imagenes/fondo-menu.jpg);
  127.     background-position: -550px 160px;
  128. }
  129. body#negocio .menu li.negocio a {
  130. background-image: url(imagenes/fondo-menu.jpg);
  131.     background-position: -550px 160px;
  132. }
  133. .logo{float:left}
  134. #contenedor{width:990px;
  135. margin:0 auto;
  136. background-color:#fff;}
  137. .imagen-encabezado{
  138. display:block;
  139. border: 1px solid #301c0f;}
  140. #contenido{
  141.     padding:10px;}
  142. #contenidos-dobles{clear:both;}
  143. #contenido-izquierda{
  144.     width:520px;
  145.     background-image: url(imagenes/fondo-contenido-izquierda.jpg);
  146.     background-position: center bottom;
  147.     background-repeat: no-repeat;
  148.     padding:15px;
  149.     float:left;
  150. }
  151. #contenido-derecha{
  152.     width:350px;
  153.     padding:15px;
  154.     float:left;
  155.     text-align:center;
  156. }
  157. .rojo{
  158.     color: #d33431;
  159.     font-size:1.1em;
  160. }
  161. h1{margin:10px;}
  162. h2{
  163. margin:10px;text-decoration: underline;
  164. }
  165. p{margin:10px;}
  166. .imagen-centrada{text-align:center;}
  167. .imagen-respuesta{margin:20px;}
  168. .enlace-descarga{color: #333;font-weight: bold;
  169. font-size:0.9em;}
  170. .enlace-descarga:hover{ color: #d33431;}
  171. form {
  172.     padding:15px;
  173. }
  174. legend{margin:5px;padding:5px;}
  175. fieldset {margin:5px;padding:10px;}
  176. input{background-color: #ccc;margin:5px;}
  177. input:hover {
  178. background-color: #ddd; }
  179. .aviso-formulario{color: #d33431;
  180. }
  181. #pie{
  182.     background-color: #333;
  183.     color: #fff;
  184.     height:100px;
  185.     clear:both;
  186. }
  187. .pie{
  188.     color:#fff;
  189.     font-size:1.2em;
  190.     text-align:center; 
  191.     font-weight: bold;
  192.     position:relative;
  193.     top: 40px;
  194. }
  195. .enlace-email{text-decoration:none;
  196. color:#fff;}
  197. .enlace-email:hover {text-decoration:underline;}
  198. .listas{margin:10px;padding:10px;}

He probado varios opciones, hasta con un ie.css para ver si se arregla dejando algo para Iexplorer... pero nada no lo consigo.

¿Que error debo de cambiar?
  #2 (permalink)  
Antiguo 27/07/2011, 23:25
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.147
Antigüedad: 9 años
Puntos: 181
Respuesta: Falla el estilo.css en Iexplorer y todo descuadrado

No he tenido tiempo de revisar el código, pero a simple vista parece que la causa del problema es el borde que tiene la imagen del logo.

Prueba agregando esta regla a tu CSS; img {border:0;}



Saludos.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 28/07/2011, 03:40
 
Fecha de Ingreso: julio-2011
Mensajes: 56
Antigüedad: 5 años, 5 meses
Puntos: 5
Respuesta: Falla el estilo.css en Iexplorer y todo descuadrado

Has puesto dos reglas una para #menu y otra .menu ¿no deberia de ser solo una? a simple vista sin ver nada de html esta un poco complicado averiguar que pasa, puede ser que la suma de los width sean muy grandres
  #4 (permalink)  
Antiguo 28/07/2011, 07:37
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.887
Antigüedad: 13 años, 10 meses
Puntos: 59
Respuesta: Falla el estilo.css en Iexplorer y todo descuadrado

Cita:
Iniciado por pitufoweb Ver Mensaje
No he tenido tiempo de revisar el código, pero a simple vista parece que la causa del problema es el borde que tiene la imagen del logo.

Prueba agregando esta regla a tu CSS; img {border:0;}



Saludos.
Hola pitufoweb, era eso, lo he arreglado aquí:

Código CSS:
Ver original
  1. .logo{float:left;
  2. border:0;}

Cita:
Iniciado por amdisenoweb Ver Mensaje
Has puesto dos reglas una para #menu y otra .menu ¿no deberia de ser solo una? a simple vista sin ver nada de html esta un poco complicado averiguar que pasa, puede ser que la suma de los width sean muy grandres
Hola amdisenoweb, si tengo dos reglas y haciendo cambios se quedaba igual... finalmente era el tema del borde de la imagen que hacía como bien dices que el ancho fuese más grande.

Después de tantos años... las prisas y el estar un tiempo sin hacer nada... vuelvo a fallos de principiante.

Gracias a los dos, saludos.

Etiquetas: contenido, falla, iexplorer, todo, formulario
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 06:44.