CSS IE8 contre Firefox et tous les autres

Bonsoir à tous,

Quelqu'un saurait-il pourquoi ce style n'est pas compris par Firefox, Opera, Safari et Google Chrome alors qu'il passe très bien sous IE8

.pimage{
	position:relative;
	background-image:url(/img/fond_div.jpg);
	background-repeat:no-repeat;
	width:130px;
    height:130px;
	z-index:2;
}

#textemenu{
background-color:#FFFFFF;
	position:absolute;
	z-index:3;
             bottom:5px;
	left:3px;
            width:125px;

}

Je l'utilise comme cela

echo '<td class="pimage"><a href="',$valeur1,'" title="image" rel="splash.image">
  <img src="',$valeur1,'" width=',$largeur2,' height=',$hauteur2,'>
</a>
<div id="textemenu">
<a href="http://www.myurl.com/rubrique'.$row_rub['rubrique_user'].'">
'.$row_rub['nom_rubrique'].'</a></div></td>';

Tout est décalé sur Firefox et les autres navigateurs quand j'applique la class "pimage"
Existe-t-il une parade pour le faire fonctionner sur tous les navigateurs ?

Merci d'avance.
Modifié par pareto (25 Mar 2010 - 22:40)

J'ai testé sous FF3.6, chrome 4.1, safari 4.0.5, il n'y a pas de décalage par rapport à IE8, vous pourriez faire une capture écran ou nous donner l'URL

Bonjour, je vous ai fait un schéma pour visualiser ce qui se passe (projet en interne... )

sous IE8:

les menus se placent centrés sous les images

sous Firefox, opéra, safari et chrome

les menus se calent tous les uns sur les autres en bas a gauche...

Pb de position absolute / relative ou imbriquation des divs ?
Modifié par pareto (26 Mar 2010 - 09:27)

Bonjour,

Pour commencer, nous donner un code PHP est un peu inutile pour un problème de rendu. Il vaut mieux nous donner directement le code HTML généré, ça sera plus lisible.

Sur le problème lui-même, je soupçonne une impossibilité d'utiliser un élément TD comme référent pour ses descendants positionnés. Autrement dit: le position:relative ne prend pas.
Dans Firefox 3.6 par exemple, je ne peux pas décaler une cellule de tableau avec un position:relative;left:50px;, ça n'est pas pris en compte. Je ne sais pas si Firefox et compagnie respectent à la lettre CSS 2.1 sur ce point précis, si c'est IE8 qui le fait, ou bien si (plus probable) la spécification ne précise pas quoi faire dans ce cas de figure et donc les implémentations divergent.

Solution: il te faut un DIV à l'intérieur de ton TD.

Bonjour, en effet, j'ai mis un div dans le TD mais ça ne marche pas

voici la source générée:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th width="2%" rowspan="2" align="left" scope="col"><img src="/img/pix.gif" width="24" height="250" /></th>
            <th width="100" align="center" scope="col">
<table align="center"><td class="pimage"><a href="uploads/17.jpg" title="image" rel="splash.image">
  <img src="uploads/17.jpg" width=91 height=122></a>
<a href="http://www.xxx.com/rubrique1"><div id="textemenu">menu1</a></div></td>
<td><img src="img/pix.gif" width="12px" alt="" /></td><td class="pimage"><a href="uploads/1.jpg" title="image" rel="splash.image">
  <img src="uploads/1.jpg" width=122 height=76></a>
<a href="http://www.xxx.com/rubrique2"><div id="textemenu">menu2</a></div></td>
<td><img src="img/pix.gif" width="12px" alt="" /></td></tr><tr align="center"><td class="pimage"><a href="uploads/9.jpg" title="image" rel="splash.image">
  <img src="uploads/9.jpg" width=122 height=92></a>
<a href="http://www.xxx.com/rubrique5"><div id="textemenu">menu3</a></div></td>
<td><img src="img/pix.gif" width="12px" alt="" /></td><td class="pimage"><a href="uploads/8.jpg" title="image" rel="splash.image">
  <img src="uploads/8.jpg" width=122 height=81></a>
<a href="http://www.xxx.com/rubrique4"><div id="textemenu">menu4</a></div></td>
<td><img src="img/pix.gif" width="12px" alt="" /></td><td class="pimage"><a href="uploads/16.jpg" title="image" rel="splash.image">
  <img src="uploads/16.jpg" width=90 height=122></a>
<a href="http://www.xxx.com/rubrique5"><div id="textemenu">menu5</a></div></td>
<td><img src="img/pix.gif" width="12px" alt="" /></td></tr></table>

Modifié par pareto (26 Mar 2010 - 10:34)

pareto a écrit :
Bonjour, en effet, j'ai mis un div dans le TD

Je n'en vois pas. Je parlais d'une structure comme ceci:

<td>
  <div style="position: relative;">
    ... Liens, image et légende ...
  </div>
</td>

Ce qui peut être difficile dans ce cas de figure: faire que le DIV prenne toute la hauteur du TD, si cette hauteur n'est pas connue.

En passant, pourquoi un tableau pour ce contenu? De simples DIV flottants ou éventuellement une liste (UL, LI) n'aurait pas été plus adapté?

bonsoir ,

@Florent :en effet , td ou display:table-cell ne prennent pas le positionement relatif dans firefox (observé et lu ) , pour repositionné un element a l'ecran , mais permet l'utilisation z-index .

http://www.w3.org/TR/CSS2/visuren.html#choose-position a écrit :

relative
The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

ton code est plein d'erreurs , entre autres :
- une id (#texte) ne peut-etre utilier que sur un seul element par document .
- drole d'imbrication que tu a avec <a><div></a></div> !!??

Tu pourrais simplement te servir d'un conteneur comme parent relatif comme sugerer :

<div class="vigne">
<img src="http://forum.alsacreations.com/previews/25609-firefox.jpg" height="122" width="91" alt="" />
<a href="#" >menu 1</a>
</div>

et faire ta mise en forme a partir de celui-ci :

.vigne {height:130px;width:130px;position:relative;text-align:center;padding:0.5em 0 1.4em;margin:0 auto;background:yellow;}
.vigne img { vertical-align:top; }
.vigne a {position:absolute;left:0;bottom:0.2em;width:100%;text-align:center;}

GC