Estilo de DIV funciona en FF, no en IE

quinqui · #1 (**permalink**) 09/04/2007, 11:16

Holas :D

Generalmente, cuando de trabajar con CSS se trata, tengo problemas con Firefox, pues es más estricto que IE en cuanto a validez de instrucciones.
Sin embargo, esta ocasión ha sido sorprendentemente a la inversa: los estilos que he aplicado a una DIV, funcionan en FF pero no en IE O_O!!

Lo raro para mí es que, siendo cinco las DIVs de la página, en las cuatro primeras los estilos respectivos son aplicados correctamente, mas no así en la última DIV. Todo esto en IE (pues en FF sí se ven los cinco estilos correctamente).

Este es el código de la página:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>.:: Mini Portales de quinqui v.2 ::.</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="qmp_soulc3/qmp_soulc3.css">
 </head>
 <body vlink="#2a3b43">
  <!-- Capa Todo -->
  <div id="divTodo" style="width: 300px">

   <!-- CAPA divSec -->
   <div id="divSec">
	Menu Secundario y otros links
   </div>

   <!-- CAPA divTop -->
   <div id="divTop">
	Banner
   </div>

   <!-- CAPA divCont -->
   <div id="divCont">
	Contenido Principal
   </div>

   <!-- CAPA divMenu -->
   <div id="divMenu">
	Secciones
   </div>

  </div>
  <!-- Fin Capa Todo -->
 </body>
</html>

Y esta la parte de la hoja CSS con los estilos de las Capas:

Código HTML:

/* Capa General */
#divTodo
{	position: absolute;
	left: 150px;
	z-index: 0;
	font-family: Tahoma, Verdana, sans-serif  }

/* Capa Secundaria */
#divSec
{	width: 180px;
	height: 480px;
	position: absolute;
	z-index: 1;
	top: 100px;
	left: 510px;
	background-color: #2a3b43;
	background-image: url()  } 
/* Capa Banner Top */
#divTop
{	width: 390px;
	height: 150px;
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 100px;
	background-color: ;
	background-image: url()  } 
/* Capa Contenido */
#divCont
{	width: 390px;
	height: 480px;
	position: absolute;
	z-index: 3;
	top: 150px;
	left: 150px;
	background-color: #bf8c67;
	background-image: url(../qmp_img/soulc3/qmp_fonX.jpg)  } 
/* Capa Menú */
#divMenu
{	width: 180px;
	height: 360px;
	position: absolute;
	z-index: 4;
	top: 50px;
	left: 0px;
	background-color: #bf8c67;
	background-image: url()  }

El estilo que no es aplicado usando IE es el de la capa divMenu. Por cierto, he validado esta página y el código CSS usando los validadores de W3C y ha dado OK a mis códigos. Todavía me pregunto qué le pasó a IE...

Desde ya, muy agradecida por su atención :)

quinqui · #2 (**permalink**) 11/04/2007, 10:56

Debo reconocer que me sorprendió que nadie respondiera a mi consulta, pues creí que la respuesta sería fácil, pero ya veo que no O_O
El caso es que buscando por mi cuenta en google, di con esta web: http://blog.innocuo.com/archive/2006...s-bugs-en-css/, en donde el webmaster tuvo problemas con las DIVs en IE. De alli me tiré a http://www.webcredible.co.uk/user-fr...explorer.shtml (citada en la primera página), en donde leí un tip para solucionar lo de que IE distorsiona el comportamiento de las DIVs. Lo probé y aún no puedo creer que fuera por algo tan simple, como esto:

Cambiar desde :

Código HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

A :

Código HTML:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Sé que el juego de caracteres es importante y todo eso, pero realmente no pensé que eso fuera exactamente la causa de que IE no mostrara la cuarta DIV donde debiera, siendo que el quisquilloso Firefox sí la estaba mostrando O_O....
(Por cierto, normalmente las páginas las hago con el segundo juego de caracteres, pero como últimamente estuve haciendo webs con Ajax, me exigía utf-8 para el XML, en fin...).

Esop. Espero haber ayudado a quien tuviera este mismo problema ^_^
Saludos!

tapion · #3 (**permalink**) 11/04/2007, 11:44

la verdad es que lo que comentas es bastante útil, aunque a mi en IE 7.0 y en FF se me ve igual supongo que serán las url's de las imagenes.

leches de ordenadores!

MikiBroki · #4 (**permalink**) 11/04/2007, 15:17

Qué raro... de todos modos has probado... el estilo divMenu la línea 'background-image: url()' la finalizas sin ';' y sin indicar nada en url()... prueba a quitarlo a ver.

EDITO: nada eso no puede ser... al ser las últimas líneas no hay problema.

tapion · #5 (**permalink**) 12/04/2007, 03:49

en IE 6.0 Si que veo el cambio al aplicar el charset. Supongo que según que problemas se solucionan al incrementar la versión del explorador. Esto enseña que las mariconadas del principio de los html que a veces se ignoran tienen más importancia de lo que parece

quinqui · #6 (**permalink**) 12/04/2007, 07:48

Jejejeje, pues mucha razón tienes, tapion, ^^.
Esto de que los charset y los doctypes de HTML sean tantos a mí me pone de cabeza, jejeje...