Problème positionnement <div> sur une Image

Bonjour,

J'ai un problème pour positionner un <div> représentant un bouton ("PRINT") sur une Image (texte en dégradé). Cela marche sans problème sous IE mais pas sur Firefox.


Voici un exposé plus détaillé du problème :
- - - - - - - - - - - - -

1) Voici une capture écran du résultat sous IE (Le résultat est celui que j'attends) :
http://img75.imageshack.us/img75/6138/testieuz7.jpg

2) Voici une capture écran du résultat sous FIREFOX (Le résultat N'est PAS celui que j'attends) :
http://img341.imageshack.us/img341/9527/testfirefoxmv5.jpg


3) Voici un schéma explicatif et le code source HTML / CSS :
http://img341.imageshack.us/img341/43/testexplicatifjq3.jpg

CODE HTML :

<table width="293" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="293" colspan="3">
			<img src="images/sideBar_img01.gif" width="293" height="163" border="0"></td>
	</tr>
	<tr>
		<td width="7">
			<img src="images/sideBar_middleBorderL.gif" width="7" height="35" border="0"></td>
		<td class="sideBarMiddle" width="279">
			</td>
		<td width="7">
			<img src="images/sideBar_middleBorderR.gif" width="7" height="35" alt=""></td>
	</tr>
	<tr>
		<td width="7">
			<img src="images/sideBar_bottomBorderL.gif" width="7" height="175" alt=""></td>
<!-- ICI /-->
		<td class="sideBarBottom" width="279">
<!-- ICI /-->
			<img src="images/sideBar_bottomShadedTxt.gif" width="271" height="121" border="0">
<!-- ICI /-->
			<div class="button03-03" id="button03-03">
				<a href="javascript: window.print();" onmouseover="changeButton03Bg('03','over'); return true;" onmouseout="changeButton03Bg('03','out'); return true;"><img class="buttonIcon" id="buttonIcon03" src="images/button_icon03Out.gif" width="16" height="16" border="0" alt="">PRINT</a></div>
		<td width="7">
			<img src="images/sideBar_bottomBorderR.gif" width="7" height="175" alt=""></td>
	</tr>
</table>

CODE CSS :

td.sideBarBottom {
	background-image: url(../images/sideBar_bottomBackground.gif);
	padding-top: 6px;
	vertical-align: top;
	text-align: middle;
	position : relative; 
	z-index: 1;
}

div.button03-03 {
	background-image : url(../images/button_03Out.gif);
	background-repeat: no-repeat;
	position: absolute;
	padding: 6px 55px 15px 8px;
	top: 0px;
	left: 0;
	text-align: left;
	font-size: 10px;
	z-index: 2;
}

- - - - - - - - - - - - -
Merci d'avance pour votre aide
Modifié par az_erto (21 Feb 2007 - 21:54)

Bonsoir,



Bonsoir,

Navré, mais ce type de code hors d'âge n'est pas fait pour être débugué à la main. Il a peu de chance de susciter l'intérêt ici...

<nostalgie>
Il avait vraiment un certain masochisme délicieusement pervers dans ces mises en pages à l'ancienne...
</>

Même si c'est d'un autre âge, pourriez-vous juste jeter un coup d'oeil, juste deux petites minutes

Merci beaucoup
Modifié par az_erto (22 Feb 2007 - 01:07)

S'il vous plaît, est-ce qu'il vous serait possible de jeter un coup d'oeil à mon problème. Merci d'avance Je ne sais pas comment positionner un <div> (le bouton "PRINT") sur une image (le texte en dégradé).

Merci d'avance.

Salut.

Je ne sais pas si c'est la cause de ton problème, mais il me semble que la balise "td.sidebarBotton" n'est pas fermée.

Pense à valider la syntaxe de ton code html avant toute autre mesure

Bonjour az_erto,

Met du contenu dans tes "td". (pas seulement des images de fond)!

Si j'me trompe pas, on ne peut pas placer des positions absolues dans un tableau comme ça brut.

Maintenant la première chose à faire donc est de supprimer les tableaux qui n'ont rien à faire ici

Merci à tous pour vos élèments de réponse.