Tableau décalé sous Mozilla

Kartoon1234
Invité n'ayant pas de compte PHPfrance

13 juin 2012, 13:32

Bonjour à toutes et à tous !! :D
Bon alors cela fait plusieurs jours que j'essaie de trouver une réponse à mon problème sur Internet mais en vain... Je suis en train de faire un site Internet en utilisant le logiciel Dreamweaver de la suite Adobe et je ne m'en sors plus.
Je dois afficher un tableau d'images qui font toutes exactement la même taille. Et lorsque l'utilisateur passe la souris sur une des images, le titre de celle ci apparaît en bas de l'image. Tout se passe à merveille sur Google Chrome, Internet Explorer et Safari. Mais dès que je passe sur Firefox, la structure du tableau semble modifiée. Certaines cellules du tableau sont décalées de quelques pixels vers le haut et du coup, le titre ne se superpose plus exactement sur l'image mais légèrement en dessous. J'espère que je me fais clairement comprendre. Sinon, pour les plus forts (et j'espere que c'est ceux là qui vont m'aider), je vous donne un exemple de l'une de mes pages qui pose problème (parce que sur d'autres pages, j'ai pas tous ces problèmes...). Merci beaucoup à tous de m'avoir lu et de m'aider parce que je sais vraiment plus quoi faire !!! :cry: :cry: :cry:







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>L'HYDRE</title>
<link href="l'hydre2.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>

<body>
<div class="fond_fixe">
<div class="bande"></div>
<div class="header">
<div class="logo"><a href="accueil.html"><img src="images/nom-du-site.jpg" alt="nom_du_site" /></a></div>
<div class="mini_menu">
<table width="200" border="0" cellspacing="10" cellpadding="0">
<tr>
<td><img src="images/Tetes/survol-mini_logo_illustration.jpg" alt="Illustration_mini" /></td>
<td><a href="page-motion_carte-de-voeux-Gobelins.html"><img src="images/Tetes/mini_logo_motion.jpg" alt="motion_mini" name="Motion_mini" onmouseover='Motion_mini.src="images/Tetes/survol-mini_logo_motion.jpg"' onmouseout='Motion_mini.src="images/Tetes/mini_logo_motion.jpg"' /></a></td>
<td><a href="page-publication_construction.html"><img src="images/Tetes/mini_logo_publication.jpg" alt="mublications_mini" name="Publications_numeriques" onmouseover='Publications_numeriques.src="images/Tetes/survol-mini_logo_publication.jpg"' onmouseout='Publications_numeriques.src="images/Tetes/mini_logo_publication.jpg"' /></a></td>
<td><a href="page-graphisme_ecolo-eco.html"><img src="images/Tetes/mini_logo_graphisme.jpg" alt="Graphisme_mini" name="Graphisme_mini" onmouseover='Graphisme_mini.src="images/Tetes/survol-mini_logo_graphisme.jpg"' onmouseout='Graphisme_mini.src="images/Tetes/mini_logo_graphisme.jpg"' /></a></td>
<td><a href="page-publicite_autolib.html"><img src="images/Tetes/mini_logo_publicite.jpg" alt="Publicité_mini" name="Publicite_mini" onmouseover='Publicite_mini.src="images/Tetes/survol-mini_logo_publicite.jpg"' onmouseout='Publicite_mini.src="images/Tetes/mini_logo_publicite.jpg"' /></a></td>
<td><a href="page-sauvane_lhydre-cest-quoi.html"><img src="images/Tetes/mini_logo_sauvane.jpg" alt="suavane_mini" name="Sauvane_mini" onmouseover='Sauvane_mini.src="images/Tetes/survol-mini_logo_sauvane.jpg"' onmouseout='Sauvane_mini.src="images/Tetes/mini_logo_sauvane.jpg"' /></a></td>
</tr>
</table>
</div>

<!-- end .header -->
</div>


<div class="bande2"></div>
</div>



<div class="menu">
<ul>
<li><h1><a href="page-illustrations_tableaux-parisiens-de-baudelaire.html">TABLEAUX PARISIENS DE BAUDELAIRE</a></h1></li>
<li><h1>CARNETS DE CROQUIS</h1></li>
</ul>
</div>


<div class="Travaux">
<table width="627" border="0" cellspacing="15" cellpadding="0">
<tr>
<td><a href="images/illustration/carnet_de_croquis/illustration-monstres.jpg" rel="lightbox[les Coincoin]" title="Bestiaire monstrueux : créature n°1 et n°2"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-monstres.jpg" alt="montres"/></a> <div class="title">Bestiaire monstrueux</div></td>
<td width="138"><a href="images/illustration/carnet_de_croquis/illustration-bestiole1.jpg" rel="lightbox[les Coincoin]" title="Bestiaire monstrueux : créature n°7"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-bestiole1.jpg" alt="Bestiole1"/></a> <div class="title">Bestiaire monstrueux</div></td>
<td width="138"><a href="images/illustration/carnet_de_croquis/illustration-bestiole2.jpg" rel="lightbox[les Coincoin]" title="Bestiaire monstrueux : créature n°32"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-bestiole2.jpg" alt="Bestiole2"/></a> <div class="title">Bestiaire monstrueux</div></td>
<td width="138"><a href="images/illustration/carnet_de_croquis/illustration-bottes.jpg" rel="lightbox[les Coincoin]" title="Robe à fleurs"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-bottes.jpg" alt="Bottes"/></a> <div class="title">Robe à fleurs</div></td>
</tr>
<tr>
<td width="138"><a href="images/illustration/carnet_de_croquis/illustration-canari_obey.jpg" rel="lightbox[les Coincoin]" title="Obey"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-canari_obey.jpg" alt="Canari_obey"/> </a><div class="title">Obey</div></td>

<td><a href="images/illustration/carnet_de_croquis/illustration-catch.jpg" rel="lightbox[les Coincoin]" title="CATCH !"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-catch.jpg" alt="catch"/> </a><div class="title">CATCH !</div></td>
<td><a href="images/illustration/carnet_de_croquis/illustration-chats.jpg" rel="lightbox[les Coincoin]" title="Les chats, illustration de la chanson 'Belzébuth' - Les Colocs"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-chats.jpg" alt="chats"/> </a><div class="title">Les Colocs</div></td>
<td><a href="images/illustration/carnet_de_croquis/illustration-chimères.jpg" rel="lightbox[les Coincoin]" title="Who ?"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-chimères.jpg" alt="chimères"/> </a><div class="title">Who ?</div></td>
</tr>
<tr>
<td><a href="images/illustration/carnet_de_croquis/illustration-croquis.jpg" rel="lightbox[les Coincoin]" title="Les gens : étude"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-croquis.jpg" alt="croquis"/></a> <div class="title">Les gens : étude</div></td>

<td><a href="images/illustration/carnet_de_croquis/illustration-dino.jpg" rel="lightbox[les Coincoin]" title="Dinosaure : étude"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-dino.jpg" alt="dino"/></a> <div class="title">Dinosaure : étude</div></td>
<td><a href="images/illustration/carnet_de_croquis/illustration-expressions.jpg" rel="lightbox[les Coincoin]" title="Lexique québécois"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-expressions.jpg" alt="expressions"/> </a><div class="title">Lexique québécois</div></td>
<td><a href="images/illustration/carnet_de_croquis/illustration-fleurs.jpg" rel="lightbox[les Coincoin]" title="Fleurs"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-fleurs.jpg" alt="fleurs"/></a> <div class="title">Fleurs</div></td>
</tr>
<tr>
<td><a href="images/illustration/carnet_de_croquis/illustration-foufounes.jpg" rel="lightbox[les Coincoin]" title="Foufounes électriques"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-foufounes.jpg" alt="foufounes"/> </a><div class="title">Foufounes électriques</div></td>
<td><a href="images/illustration/carnet_de_croquis/illustration-guapas.jpg" rel="lightbox[les Coincoin]" title="Mama"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-guapas.jpg" alt="guapas"/></a> <div class="title">Mama</div></td>
<td><a href="images/illustration/carnet_de_croquis/illustration-hoohoo.jpg" rel="lightbox[les Coincoin]" title="Hoo hoo"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-hoohoo.jpg" alt="hoohoo"/></a> <div class="title">Hoo hoo</div></td>
<td><a href="images/illustration/carnet_de_croquis/illustration-inri.jpg" rel="lightbox[les Coincoin]" title="I.N.R.I"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-inri.jpg" alt="inri"/></a> <div class="title">I.N.R.I</div></td>

</tr>
<tr>
<td><a href="images/illustration/carnet_de_croquis/illustration-pingouins.jpg" rel="lightbox[les Coincoin]" title="Histoire de pendule"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-pingouins.jpg" alt="pingouins"/></a> <div class="title">Histoire de pendule</div></td>
<td><a href="images/illustration/carnet_de_croquis/illustration-reveur.jpg" rel="lightbox[les Coincoin]" title="Le rêveur"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-reveur.jpg" alt="reveur"/></a> <div class="title">Le rêveur</div></td>
<td><a href="images/illustration/carnet_de_croquis/illustration-hesse.jpg" rel="lightbox[les Coincoin]" title="Cabanoïde"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-hesses.jpg" alt="hesse"/></a> <div class="title">Cabanoïde</div></td>
</tr>
</table>
</div>


<div class="texte"><h1>Extraits de mes divers carnets de dessins et carnets de voyages.</h1></div>

</body>
</html>







Il s'agit de la balise "Travaux". C'est ici que viens le problème...

ViPHP
xTG
ViPHP | 7331 Messages

13 juin 2012, 13:41

Si tu veux que quelqu'un t'aide il lui faudra le style de la class travaux aussi pour pouvoir te répondre. :)

Kartoon1234
Invité n'ayant pas de compte PHPfrance

13 juin 2012, 15:07

Ah oui pardon ca pourrait etre utile...


@charset "utf-8";

@font-face
{
font-family:'FUTURAMC';
src:url('Police%20-%20FuturaStdCondensed/FUTURAMC.TTF');
}

@font-face {
font-family: 'FuturaStd-CondensedBold';
src: url('Police - FuturaStdCondensed/FuturaStd-CondensedBold.otf')
}


body {
font: 100%/1.4 FuturaStd-CondensedBold Verdana, Arial, Helvetica, sans-serif;
background: #F0F7F0;
color: #000;
width : 100%;
margin : auto;
}

strong
{
display : none;
}


/* ~~ Sélecteurs d'éléments/balises ~~ */
ul, ol, dl { /* En raison des variations entre les navigateurs, il est conseillé d'attribuer une valeur de zéro aux marges intérieures et aux marges des listes. A des fins de cohérence, vous pouvez définir les valeurs désirées dans cette zone ou dans les éléments de liste (LI, DT, DD) qu'elle contient. N'oubliez pas que les paramètres que vous définissez ici se répercuteront sur la liste .nav, sauf si vous rédigez un sélecteur plus spécifique. */
padding: 0;
margin: 0;
}

p
{
src : url('Police - FuturaStdCondensed/FUTURAMC.ttf');
}


h1, a
{
font-size : 14px;
}

a img { /* ce sélecteur élimine la bordure bleue par défaut affichée dans certains navigateurs autour d'une image lorsque celle-ci est entourée d'un lien. */
border: none;
}

/* ~~ La définition du style des liens de votre site doit respecter cet ordre, y compris le groupe de sélecteurs qui créent l'effet de survol. ~~ */
a:link {
color:#414958;
}
a:visited {
color: #4E5869;
}


.langue
{
width: 158px;
text-align:right;
position : absolute;
bottom : 0px;
float: right;
left: 1000px;
font-family: 'FuturaStd-CondensedBold';
}

.fond_fixe
{
position : fixed;
width : 100%;
}

.bande
{
background : #FFFFFF;
width : 100%;
height : 45px;
}


/* ~~ aucune largeur n'est attribuée à l'en-tête. Il occupera toute la largeur de votre mise en page. Il contient un espace réservé pour une image, qui doit être remplacé par votre logo lié. ~~ */
.header {
position :relative;
background: #FFFFFF;
min-width : 1000px;
}


.bande2
{
position : fixed;
background-color : #F0F7F0;
top : 139px;
width : 100%;
height : 20px;
}


/* ~~ Styles de liste de navigation (peuvent être supprimés si vous optez pour un menu de survol prédéfini tel que Spry) ~~ */
ul.nav {
list-style: none; /* entraîne la suppression du marqueur de liste */
margin-bottom: 5px; /* crée l'espace entre la navigation et le contenu en dessous */
width : 353px;
}

ul.nav a, ul.nav a:visited { /* le regroupement de ces sélecteurs garantit que vos liens conservent leur apparence de bouton, même après avoir été activés */
padding: 5px 15px 5px 30px;
display: block; /* attribue au bloc de liens des propriétés qui lui font remplir toute la balise LI qui le contient. Force la zone entière à réagir à un clic de souris. */
text-decoration: none;
background: #FFFFFF;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* modifie la couleur de l'arrière-plan et du texte pour les navigateurs à la souris et au clavier. */
background: #6F7D94;
color: #FFF;
}

.Travaux
{
background : #F0F7F0;
padding-left: 353px;
padding-top:220px;
}

.video, .lhydre
{
padding-left: 453px;
padding-top:200px;
}

.mentions
{
background-color:#FFFFFF;
width : 500px;
margin-left:400px;
padding : 200px 20px 20px 20px;
font-family: 'FuturaStd-CondensedBold';
}


.title
{
background-color: rgba(0,0,0,0.6);
color: #fff;
position : relative;
margin-bottom:0px;
font-size: 14px;
padding-top: 5px;
padding-left: 8px;
padding-bottom : 5px;
width: 130px;
display: none;
font-family: 'FuturaStd-CondensedBold';

}

td:hover .title
{
display : block;
position: absolute;
}



.accueil
{
position : absolute;
left : 400px;
width : 600px;
margin : auto;
padding-top:80px;
}

.logo
{
width : 324px;
height : 94px;
margin-left: 30px;
}

.menu
{
background : #FFFFFF;
width : 353px;
position : fixed;
top: 156px;
height: auto;
font-family: 'FuturaStd-CondensedBold';
}

.menu ul
{
list-style-type: none;
margin-left : 27px;
display: block;
}

.menu a
{
text-decoration : none;
}


.mini_menu
{
position : absolute;
background : #FFFFFF;
right : 0%;
bottom : 0px;
}



.texte
{
position : fixed;
bottom : 30px;
font-size: 14px;
background :#FFFFFF;
width : 319px;
padding: 10px 5px 10px 30px;
font-family: 'FuturaStd-CondensedBold';
}


.enConstruction
{
margin-top : 150px;
margin-left : 10%;
position : absolute;
}


.CV
{
font-family: 'FuturaStd-CondensedBold', sans-serif;
position :fixed;
top : 35%;
left : 50%;
width : 350px;
text-align:center;
}


.MonCV a
{
font-family: 'FuturaStd-CondensedBold', sans-serif;
position :absolute;
top : 70%;
left : 40%;
text-decoration:none;
font-size:24px;
color:#000;
}

.MonCV:hover a, .Ecrire:hover a, .Poke:hover a
{
text-decoration:underline;
}



.Ecrire a
{
font-family: 'FuturaStd-CondensedBold', sans-serif;
font-size:24px;
position :absolute;
top : 70%;
left : 60%;
text-decoration:none;
color: #000;
}

.Poke a
{
font-family: 'FuturaStd-CondensedBold', sans-serif;
font-size:24px;
position :absolute;
top : 70%;
left : 80%;
text-decoration:none;
color:#000;
}


.bloc
{
min-height : 900px;
}




#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox img{ width: auto; max-width : 1000px; max-height: 800px;height: auto; padding: 10px;}
#lightbox a img{ border: none; }

#outerImageContainer{position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; max-width:1020px; max-height:820px; }
#imageContainer{ padding: 0px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 50%; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 28px; height: 28px; display: block; border-radius:25px;}
#prevLink { background: url(images/fleche_gauche.jpg) left 50% no-repeat; position : relative ;left: -50px; float: left;}
#nextLink { background: url(images/fleche_droite.jpg) right 50% no-repeat; position : relative ;right: -50px; float: right;}

#imageDataContainer{ src: url('Police - FuturaStdCondensed/FuturaStd-CondensedBold.otf'); font-family: 'FuturaStd-CondensedBold', sans-serif; background-color: rgba(0,0,0,0.4); margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; max-width:1020px; max-height:820px;}

#imageData{ padding:0 10px; color: #fff; }
#imageData #imageDetails{ width: 100%; float: left; text-align: right; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#bottomNavClose{ background: url(images/croix.jpg) right 50% no-repeat ;width: 28px; height : 28px; float: right; position :absolute; right : -50px; top : -50%; outline: none; border-radius:25px;}

#overlay{ position: fixed; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

ViPHP
xTG
ViPHP | 7331 Messages

13 juin 2012, 15:40

Utiliser les balises HTML et CSS du forum aiderai bien aussi...
Je ne suis pas qualifié pour te répondre, mais si j'avais les capacités sache que je ne le ferrai pas tellement c'est illisible ainsi.
Et il pourrait être bien d'isoler les membres incriminés plutôt que de balancer tous le fichiers en bloc l'air de dire "démerdez-vous". ;)

Kartoon1234
Invité n'ayant pas de compte PHPfrance

13 juin 2012, 16:01

Ok c'est vrai que c'était quand meme pas très bien presenté. Donc alors pour faire court, je pense que le problème viens de la classe "Travaux" qui contient la sous classe "title". J'ai trifouillé dans tous les sens, mais ca ne change rien sur Mozilla Firefox.

Donc voici le code HTML :
<div class="Travaux"> 
<table width="627" border="0" cellspacing="15" cellpadding="0">
<tr>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-monstres.jpg" alt="montres"/></a> <div class="title">Bestiaire monstrueux</div></td>
<td width="138"<img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-bestiole1.jpg" alt="Bestiole1"/></a> <div class="title">Bestiaire monstrueux</div></td>
<td width="138"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-bestiole2.jpg" alt="Bestiole2"/></a> <div class="title">Bestiaire monstrueux</div></td>
<td width="138"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-bottes.jpg" alt="Bottes"/></a> <div class="title">Robe à fleurs</div></td>
</tr>
<tr>
<td width="138"><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-canari_obey.jpg" alt="Canari_obey"/> </a><div class="title">Obey</div></td>

<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-catch.jpg" alt="catch"/> </a><div class="title">CATCH !</div></td>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-chats.jpg" alt="chats"/> </a><div class="title">Les Colocs</div></td>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-chimères.jpg" alt="chimères"/> </a><div class="title">Who ?</div></td>
</tr>
<tr>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-croquis.jpg" alt="croquis"/></a> <div class="title">Les gens : étude</div></td>

<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-dino.jpg" alt="dino"/></a> <div class="title">Dinosaure : étude</div></td>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-expressions.jpg" alt="expressions"/> </a><div class="title">Lexique québécois</div></td>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-fleurs.jpg" alt="fleurs"/></a> <div class="title">Fleurs</div></td>
</tr>
<tr>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-foufounes.jpg" alt="foufounes"/> </a><div class="title">Foufounes électriques</div></td>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-guapas.jpg" alt="guapas"/></a> <div class="title">Mama</div></td>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-hoohoo.jpg" alt="hoohoo"/></a> <div class="title">Hoo hoo</div></td>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-inri.jpg" alt="inri"/></a> <div class="title">I.N.R.I</div></td>

</tr>
<tr>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-pingouins.jpg" alt="pingouins"/></a> <div class="title">Histoire de pendule</div></td>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-reveur.jpg" alt="reveur"/></a> <div class="title">Le rêveur</div></td>
<td><img src="images/illustration/carnet_de_croquis/1.vignettes/vignette_illustration-hesses.jpg" alt="hesse"/></a> <div class="title">Cabanoïde</div></td>
</tr>
</table> 
</div>

Et le code CSS associé :
.Travaux
{
background : #F0F7F0;
padding-left: 353px;
padding-top:220px;
}

.title
{
background-color: rgba(0,0,0,0.6);
color: #fff;
position : relative;
margin-bottom:0px;
font-size: 14px;
padding-top: 5px;
padding-left: 8px;
padding-bottom : 5px;
width: 130px;
display: none;
font-family: 'FuturaStd-CondensedBold';
}



td:hover .title 
{
display : block;
position: absolute;
}


Mille merci si quelqu'un arrive à m'aider !! :D