Discussion :

[BnA]

Bonjour à tous

Je vous écris aujourd'hui pour vous exposer un problème que me prend la tête depuis plusieurs heures maintenant, et qui, je l'avoue, me désespère.

Ci-joint les codes HTML et CSS, suivis d'un screenshot (qui vaut mieux qu'un long discours).

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<table class="social" cellspacing="0" cellpadding="0">
	<tr>
    	<td rowspan="3"><img height="187px" src="images/content/news/social/main_fr.jpg" alt="Ajoutez ELLA à vos contacts Facebook, LinkedIn ou Twitter et bénéficiez d'offres exceptionnelles" /></td>
        <td><a class="fb" href="http://www.facebook.com/"><span>facebook</span></a><a class="li" href="http://www.linkedin.com"><span>Linked'In</span></a><a class="tw" href="http://twitter.com"><span>Twitter</span></a></td>
    </tr>
</table>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
div.content table.social{
	border-collapse:collapse;
	border:0;
	height:187px;
	margin:auto;
}
 
div.content table.social td{
	border:0;
}
 
div.content table.social td a.fb{     /* onglet facebook  */
	width:201px;
	height:64px;
	display:block;
	background:url(../images/content/news/social/fb_tab.jpg) no-repeat left top;	
}
 
 
div.content table.social td a.li{      /* onglet linkedIn  */
	width:201px;
	height:60px;
	display:block;
	background:url(../images/content/news/social/li_tab.jpg) no-repeat left top;	
}
 
 
div.content table.social td a.tw{    /* onglet twitter   */
        width:201px;
	height:63px;
	display:block;
	background:url(../images/content/news/social/tw_tab.jpg) no-repeat left top;	
}
div.content table.social a span{
	display:none;
}

Mon problème, si je puis dire, c'est que j'ai un décalage qui sort de "je-ne-sais-où" sur ma colonne de droite.

Alors bon, je sais que les tableaux ne sont à utiliser - théoriquement - que pour des données et non pour de la mise en page, que j'aurais du utiliser des DIV etc,... mais là n'est pas le souci.

J'ai donc un décalage vers le bas de: 1px sous IE, 2px sous Opera et FF (cf. screenshot), 0px (hourrah!) sous Chrome et Safari... Pourtant, le code est on ne peut plus simple, et j'ai déjà conçu des visuels via des <table> auparavant, sans avoir ce genre de problème.

Sur le screenshot, les traits rouges vous permettent de visionner la structure de mon <table>, ainsi que la découpe des images.

Auriez-vous une solution qui me permettrait d'avoir un rendu identique à peu près partout?

Peut-être est-ce du aux dimensions et au display de mes <a>? C'est en tous cas ce que je me suis dit, sans pour autant trouver une solution...

Merci d'avance à tous pour votre précieuse aide!

A bientôt!