Prob mise en page sous IE

[Protanim]

Bonjour,

Je viens de m'apercevoir que j'ai un soucis de mise en page sous Internet explorer 8 (7 également) et Opéra. Par contre, ma page fonctionne correctement avec Firefox, Chrome, Safari, Gentoo, Navigator...
Bref, je pense plus à un prob de comptabilité qu'une erreur de ma part, même si ça reste possible bien entendu !

La ou je comprends vraiment rien, c'est que l'élement qui pose problème est affiché 5 fois, il plante 4 fois et marche une fois correctement sous IE (il fonctionne les 5 fois sous firefox). Allez comprendre !

Donc en fait il s'agit de cette page http://www.conservation-nature.fr/index2.php

Ce qui bug, c'est le bandeau noir sur les images (les 4 images de "dernières actus") qui est décalé sous IE par contre le même code dans "Eco-action" à droite fonctionne correctement.

Pourriez vous m'aider car la je suis perdu ?

Merci d'avance

 

[passion]

Bonjour,

C'est normal que tu n'es pas le même rendu car sur IE l'interprétation des <table> n'est pas le même que sur FF (par ex)
Je n'ai pas trop chercher dans le code mais j'ai pu voir que :

<table>
  <tr>
    <td>
    ---- COLONNE DE GAUCHE -----
    <div>
     ........
   </td>
    <td>
    ---- COLONNE DE DROITE -----
    <table>
    .......
   </td>
   <tr>
.......

Tu as des imbrications supp. de <table> dans la colonne de droite d'où le décalage.

Perso, j'utilise ceci en entête de mon CSS pour initialiser les marges internes et externes.

* {
margin: 0;
padding: 0;
}

PS : Tu as un aspect diffèrent sur Safari

Bonne continuation

 

[Protanim]

Ouai mais comment expliquer ce décalage sur IE uniquement sur une partie ?
voir ici http://www.conservation-nature.fr/prob.JPG
A gauche : problème
A droite : OK

J'ai essayé de mettre le code que tu me dis, mais ça change rien.

 

[passion]

IE interprète aussi les marges différemment.
On voit bien que ce décalage est dû à ton padding-left.

Si tu utilises FF, je te conseilles ceci (webdevelopper):
https://addons.mozilla.org/fr/firefox/addon/60

tu comprends mieux chaque élément.

Ton <td> est composé d'un padding-left de :

<td width="50%" valign="top" style="border-left: 1px solid rgb(204, 204, 204); font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; padding-left: 1em; padding-top: 1em;">

et en plus ta <div> comporte :

.minitop{
 background-image:url(images/basombre.png);
height:12px;
margin-top:73px;
padding:9px 10px;
position:absolute;
width:205px;
}

les 2 associés donne ton résultat

 

[Protanim]

J'ai beau essayé dans tous les sens ça ne marche pas. Le padding left est aussi présent dans le tableau de droite ou ça marche. Ma foi !

J'ai testé avec l'affichage de compatibilité de IE et ça marche correctement.

 

[Protanim]

Problème résolu, merci à tous