Bug IE 8 superposition de 2 div

Bonjour,

Je rencontre un souci avec IE 8. J'ai réalisé un site internet qui contiens des images positionnées sous forme de colonnes grâce à des div (positionrubrique) en float left.
Chacune des images contient une autre div (positioncadrerubrique) en position absolue qui affiche le titre de l'article et son contenu sur l'image (div: positionrubrique)...
Bref, voici un exemple concret. Vous constaterez que Firefox affiche correctement le site. Par contre, ce n'est pas le cas de IE 8 et je commence à désespérer.

Voici un bout du code :

<div id="positionrubrique">
      <div id="positioncadrerubrique">
            <a id="title">titre de l'article</a>
            <br/>
            <a id="text">texte article</a>
      </div>
</div>

#positionrubrique {
float:left;
margin:10px 10px 0 0;
padding:0;
width:200px;
z-index:220;
}

#positioncadrerubrique {
background-image:url(../lb_img/transparent.png);
height:150px;
margin:150px 0 0;
padding:5px 0 10px 5px;
position:absolute;
width:200px;
z-index:230;
}

Merci pour votre aide.
Modifié par nforum (04 Feb 2009 - 17:53)

Bonjour,

Hum...Pour rappel un identifiant (id /#) doit être unique, ce qui n'est pas le cas pour ta page...

Si tes images sont porteuses de sens, ce que tu sembles penser puisque tu les as insérées dans le code html, l'alternative textuelle ne doit pas être vide (alt="")...

Je n'ai pas pu vérifier avec IE8, mais ton problème de positionnement se retrouve sous IE7,IE6 (+ petit soucis avec l'opacité...) peut-être revoir en détail positionnement absolu ?

En bref, en positionnant le conteneur de ton cadre et en modifiant quelques "détails" , tu devrais obtenir à peu de chose, ce que tu souhaites :

.positionrubrique {
position:relative; (par exemple)
...
}
.positioncadrerubrique {
position: absolute;
top:150px; (plutôt que des marges...)
left:0;
}

Ceci étant dit, une liste (non ordonnée ou de définition) conviendrait, à mon humble avis tout aussi bien...voir mieux

A quoi te servent tous ces "conteneurs" (content, contentrubrique)?
A quoi te servent tous ces z-index ?
Tu as eu un lot, et tu ne veux pas gacher ? ), ils ne servent pas à grand chose ici

Une petite révision sur le positionnement et les propriétés css en général ne fera pas de mal

Bonne continuation,
Cdt,
Sylvain
Modifié par 6l20 (01 Dec 2008 - 17:21)

Et puis ça manque de titraille :

Je mettrais un h1 (avec alt) sur le nom du photographe, donc au lieu de :

<ul class="logo">
    <li><a href="http://www.laylabarake.com"><img src="IMG/siteon0.gif" alt="" width="121" height="24" class="spip_logos" /></a></li>
</ul>

Ceci :

<h1 class="logo"><a href="http://www.laylabarake.com"><img src="IMG/siteon0.gif" alt="Layla Barake" width="121" height="24" class="spip_logos" /></a></h1>

Pareil pour les articles, plutôt come ça :

<div class="positionrubrique">
      <div class="positioncadrerubrique">
            <h2><a id="title">titre de l'article</a></h2>
            <p><a id="text">texte article</a></p>
      </div>
</div>

Avec les recommandations de 6l20...
Modifié par Patidou (27 Nov 2008 - 15:50)

bon, ça fonctionne. Merci pour les conseils... et les remarques

je vais y méditer, car c'est bien possible que ma logique me joue des tours. Je vais revoir les positionnements afin d'être plus efficace sur les prochains sites.


Merci 1000 fois

Oups j'ai laissé les id, comme ça c'est correct :

<div class="positionrubrique">

      <div class="positioncadrerubrique">

            <h2><a>titre de l'article</a></h2>

            <p><a>texte article</a></p>

      </div>

</div>

Et un petit article sur la sémantique html
Modifié par Patidou (27 Nov 2008 - 16:33)

Bonjour,

ta page n'est pas valide d'après le validateur du W3C, tant que ce n'est pas le cas, le reste n'a que peu d'importance
(à moins que tu n'aies pas encore répercuté sur ton site les modifs données ici)
Si tu veux le faire simplement, la Web Developer Toolbar (Outils, Validate HTML) est une extension bien pratique pour Firefox.

EDIT: IE8 n'existe pas encore, intéresse-toi plutôt à IE7 et IE6 surtout que normalement l'un et les autres n'auront pas grand chose en commun.
Modifié par Felipe (27 Nov 2008 - 18:50)

ce qu'il y d'étrange est que lorsque je modifie mes id en class (dans ma page html + css), la disposition part en cacahuète.
il va falloir que je regarde tout ça de plus près pour que la validation soit bonne.

Merci pour les conseils