Problema con divs laterales en IE

Pues os cuento. Tengo un problema con unos divs de navegación laterales. Al crear el documento:

Código :

<div id="coll">
      <a href="blog.html" class="blog_button">b</a>
      <a href="mtg.html" class="mtg">mtg</a>
      <a href="musica.html" class="musica">m</a>
      <a href="hard_soft.html" class="hard_soft">h</a>
      <a href="disseny_web.html" class="disseny_web">d</a>
   </div>
   <div id="coll1" align="center">
      <h3>Actualment disfrute de...</h3>
   </div>
   <div id="coll2" align="center">
      <p class="colabora"><a href="#" class="text_link2"><span>LLIBRES</span></a></p>
      <a href=""><img src="fotos/thumbs/misc/hpcs.jpg" class="border"/></a>
      <a href=""><img src="fotos/thumbs/misc/sdv.jpg" class="border"/></a>
      <p class="colabora"><a href="#" class="text_link2"><span>VIDEOJOCS</span></a></p>
      <img src="fotos/thumbs/misc/hlepisodeone.jpg" class="border"/>
      <img src="fotos/thumbs/misc/proevolution.jpg" class="border"/>
      <p class="colabora"><a href="#" class="text_link2"><span>CINEMA</span></a></p>
      <img src="fotos/thumbs/misc/dejavu.jpg" class="border"/>
      <img src="fotos/thumbs/misc/mentesblanco.jpg" class="border"/>
      <p class="colabora"><a href="#" class="text_link2"><span>CD'S</span></a></p>
      <img src="fotos/thumbs/misc/so86683.gif" class="border"/>
      <img src="fotos/thumbs/misc/deftones_02.jpg" class="border"/>      
   </div>
   <div id="coll3">
      <p class="colabora">Si t'agrada escriure i desitges publicar un article, un relat, o qualsevol 
      escrit sobre algún tema que t'interesse especialment, et convide a <a href="contacta.html" class="text_link2">publicar-lo</a> a M!k3M's Site.</p>
   </div>
   <div id="coll4">
      <p class="colabora">També en cas de que desitges que publique alguna fotografia, dibuix o qualsevol tipus d'art, només tens
      que posar-te en <a href="contacta.html" class="text_link2">contacte</a> amb mí.</p>
   </div>
   <div id="navigate">
      <ul>
         <li><a href="index.html">Inici</a></li>
         <li><a href="fotos.html">Fotos</a></li>
         <li><a href="flash.html">Projectes Flash</a></li>
         <li><a href="miscelania.html">Miscel·lània</a></li>
         <li><a href="foro.html">Fòrum</a></li>
         <li><a href="links.html">Links</a></li>
         <li><a href="sobre.html">Sobre</a></li>
         <li><a href="contact.html">Contacta</a></li>
      </ul>
   </div>

... se observan varios divs. Los llamados "collX" son los laterales, y el navigate es el principal de navegación que está posicionada en la parte de arriba justo al lado del div "coll". Los "collX" desearía que saliesen pegados unos debajo de otros tal como están colocados en el html, tal que así:

Así es como salen en Firefox, y están posicionados gracias a los comandos Css: Position, marcado en absolute, y z-index, marcado en 1.

El problema viene que en IE, salen todos los "CollX" menos el "coll"(ya que éste no está posicionado con absolute y z-index, a la derecha de la página fuera del sitio, tal que así:

Que debo hacer para que salga bien en ambos navegadores?

Gracias de antemano.

Yo es que no lo hubiera puesto esa estructura, sino más bien algo como:
(Ojo a las nuevas divs)

Código :

<div id="contenedor">
<div id="izq">
   <div id="coll">
      <a href="blog.html" class="blog_button">b</a>
      <a href="mtg.html" class="mtg">mtg</a>
      <a href="musica.html" class="musica">m</a>
      <a href="hard_soft.html" class="hard_soft">h</a>
      <a href="disseny_web.html" class="disseny_web">d</a>
   </div>
   <div id="coll1" align="center">
      <h3>Actualment disfrute de...</h3>
   </div>
   <div id="coll2" align="center">
      <p class="colabora"><a href="#" class="text_link2"><span>LLIBRES</span></a></p>
      <a href=""><img src="fotos/thumbs/misc/hpcs.jpg" class="border"/></a>
      <a href=""><img src="fotos/thumbs/misc/sdv.jpg" class="border"/></a>
      <p class="colabora"><a href="#" class="text_link2"><span>VIDEOJOCS</span></a></p>
      <img src="fotos/thumbs/misc/hlepisodeone.jpg" class="border"/>
      <img src="fotos/thumbs/misc/proevolution.jpg" class="border"/>
      <p class="colabora"><a href="#" class="text_link2"><span>CINEMA</span></a></p>
      <img src="fotos/thumbs/misc/dejavu.jpg" class="border"/>
      <img src="fotos/thumbs/misc/mentesblanco.jpg" class="border"/>
      <p class="colabora"><a href="#" class="text_link2"><span>CD'S</span></a></p>
      <img src="fotos/thumbs/misc/so86683.gif" class="border"/>
      <img src="fotos/thumbs/misc/deftones_02.jpg" class="border"/>      
   </div>
   <div id="coll3">
      <p class="colabora">
         Si t'agrada escriure i desitges publicar un article, un relat, o qualsevol    escrit sobre algún tema que t'interesse especialment, et convide a <a href="contacta.html" class="text_link2">publicar-lo</a> a M!k3M's Site.
      </p>
   </div>
   <div id="coll4">
      <p class="colabora">
         També en cas de que desitges que publique alguna fotografia, dibuix o qualsevol tipus d'art, només tens que posar-te en <a href="contacta.html" class="text_link2">contacte</a> amb mí.
      </p>
   </div>
</div>
<div id="der">
   <div id="navigate">
      <ul>
         <li><a href="index.html">Inici</a></li>
         <li><a href="fotos.html">Fotos</a></li>
         <li><a href="flash.html">Projectes Flash</a></li>
         <li><a href="miscelania.html">Miscel·lània</a></li>
         <li><a href="foro.html">Fòrum</a></li>
         <li><a href="links.html">Links</a></li>
         <li><a href="sobre.html">Sobre</a></li>
         <li><a href="contact.html">Contacta</a></li>
      </ul>
   </div>
   <div class="clearing"></div>
   <div class="contenido">
      <p>el contenido pricipal va aqu&iacute;</p>
   </div>
</div>
</div>

Y en el css

Código :

#contenedor{
   padding:0;
   margin:0 auto;
   width:760px;
   height:auto;
}
#izq{
   margin:0;
   padding:0;
   width:120px;
   height:auto;
   float:left;
}
#der{
   margin:0;
   padding:0;
   width:640px;
   height:auto;
   float:right;
}
.clearing{
   clear:both;
}

Prueba con eso y verás como rula (desactivando primero tu actual hoja de estilos y añadiendo sólo el css que he puesto), cambia después las medidas a las que tengas en cada div, ten en cuenta los bordes si le vas a poner, margin y padding. Haz dos hojas de estilos paralelas, una para FF y otra para IE, ya que cambia la interpretación del modelo de cajas.

Tengo un problema:

En IE7, si miro mi página desde mi disco duro, la veo casi perfectamente(a parte de algunos paddings que no son correctos del todo...), ahora, si la subo online, y la miro con IE7, la veo completamente descolocada...

Podéis ver a que me refiero: [url]mikemsite.iespana.es[/url]

Porque me pasa esto?

Y ahora como sé como hackear la página si no sé como se verá cuando la suba? Subiéndola cada vez que la modifique??


Help, Please!

P.D.: Es posible que no se vea tampoco bien con FF, porque he tocado algo sin querer y yo no lo veo bien, habrá que revisarlo...

Puede deberse a la publicidad (no sé, se me ocurre) y a que además estás sobrepasando el ancho de uno de los divs, recuerda que IE interpreta de forma diferente los margenes, así que ahí también puede estar el problema y por eso se te desorganiza, prueba achicando un poco el div de contenido.

Zarzamora escribió:

Tengo claro que el modelo de cajas no es igual en IE y debo realizar una hoja de estilos especial para éste, pero el problema que tengo es que si miro el contenido desde mi disco duro en IE, lo veo bien, pero si lo veo desde el host lo veo mal... Puede ser la publicidad realmente?

De todas maneras el host es provisional para hacer pruebas y eso..., en cuanto la termine me gustaría pillarme uno mejor.

Gracias por la aportación igualmente.

Prueba a eliminar todos los archivos en el servidor y los vuelves a subir.

O prueba a actualizar sin caché

Johnny escribió:

Pero es que da igual como lo haga, en mi ordenador se ve bien, y lo he probado con otros ordenadores y se ve mal... No es cuestión de la caché...

Sustituye

Código :

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]--> 

por...

Código :

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]--> 

Ten en cuenta que en IE 7 cambian algunas interpretaciones respecto a los anteriores, puedes incluso poner varias condicionales, segun la version de IE.

Además te recomiendo que hagas las llamadas a las hojas de estilos generales primero y por último añadas las condicionales, por ejemplo...

Código :

<link rel="stylesheet" href="css/mikem_style.css" media="screen" type="text/css"/>
<link rel="stylesheet" href="css/layout_basic.css" media="screen" type="text/css"/>
<link rel="stylesheet" href="css/col_left.css" media="screen" type="text/css"/>
<link rel="stylesheet" href="css/class.css" media="screen" type="text/css"/>
<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]--> 
<!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]--> 

El tema de que se vea bien en local y no el servidor es porque los scripts de tu hosting te añaden algún estilo adicional, si quieres cuelga los archivos, pones aquí el link y los subo a una carpeta en mi server para que lo veas. Yo ahora no tengo IE 7 y no lo puedo probar, a ver si me vuelvo a instalar XP porque tengo tanto trabajo últimamante que la máquina virtual y emuladores en ubuntu están empezando a "petar" con photoshop y similares...
Un saludo

Bien, probaré de ese modo, gracias.

De todas maneras en las hojas de estilos específicas de IE, no tengo muy claro que poner, o que modificar. El tamaño del "width" del div de navegación horizontal "navigate" ?