IE, ou le commencement des problèmes

[Aenoa]

bonjour à tous,

je viens ici vous expliquer le problème que je rencontre avec IE, et qui n'est pas présent

En effet, mes tableaux demandant des lignes ayant a gauche une ligne fusionnée me cause des problèmes. J'ai pour illustrer, volontairement affiché les bordures. Il fais le même avec d'autres tableaux ayant une structure avec des "rowspan" plus grandes. Toutefois, il ne le fais pas avec les tableaux n'ayant pas de rowspan mais ayant des colspan... Etrange non ?

Voici une photo d'exemple :

Source du tableau :

<table align="center" width="450" border="1" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2" class="fiche_g" valign="middle" align="center" width="199px" height="200px">
<img src="http://i41.tinypic.com/vg5v6c.jpg" width="140" height="140" alt="" />
</td>
<td class="fiche_t1">
ÆNOA
</td>
</tr>
<tr>
<td class="fiche_t2">
Fondateur / Président</td>
</tr>
</table>
<br />

Le source CSS a présent :

.fiche_g
{
background:url(images/fiche/g.png) right top no-repeat;
width:199px;
height:200px;
}

.fiche_t1
{
background:url('images/fiche/t1.png') left top no-repeat; 
width:245px;
height:110px;
padding-top:80px;
font-weight:bold;
text-align:left;
text-shadow:#000000 1px;
text-transform:uppercase;
}

.fiche_t2
{
background:url('images/fiche/t2.png') left top no-repeat;
width:245px;
height:89px;
font-weight:bold;
padding-top:0px;
text-align:left;
text-shadow:#000000 1px;
text-transform:uppercase;
}

J'ai beau chercher, cela est assez problématique... J'ai donc affiché un message d'avertissement aux utilisateurs d'IE, mais comme il n'y a que ces tableaux qui sont problématiques, j'aimerais les régler pour être compatible avec tout les navigateurs....

Quelqu'un aurait déjà rencontré ce problème ?

Comment pensez-vous que IE / CHROME interprète le code pour ainsi causer l'erreur ?

Avez vous déjà trouvé une solution ?

Cordialement,

[Ernestine]

Salut,

Chez moi, le résultat est le même sous tous les navigateurs, et il correspond à ta mauvaise capture (celle de IE et Chrome).

La cellule de gauche fait 200 px de haut.

La cellule en haut à droite a height:110px et padding-top:80px ce qui lui fait 190 px de haut (car height et padding s'additionnent toujours)

La cellule en bas à droite a 89 px de haut.

Donc on a 200 px de haut à gauche et 279 px de haut à droite. C'est ce qui explique, je pense, ce décalage diforme.

En plus de ça, tu inclues des styles à la fois dans la feuille de style et dans le code html, ce qui est très brouillon. Par ailleurs, l'utilisation d'un tableau n'est vraiment pas judicieuse ici, il vaudrait mieux englober tout ça dans un div, ce qui éviterait par la même occasion de découper l'image de background en trois parties.

Sinon j'aime bien ta photo.

[Aenoa]

Merci beaucoup, je suis en train de régler le problème avec les DIVS, la section "staff" est bonne, grâce a toi !

EDIT : Problème totalement réglé.

Modifié 28 Décembre 2010 par Aenoa