28172 sujets

CSS et mise en forme, CSS3

Tableau différent sous ie et ff

Bon, tout d'abord bonjour à tous.
Ceci est ma première demande ici.
J'avoue avoir pas mal compulsé les informations ici.
Alors pour une fois, mon problème concerne firefox et non pas internet explorer.
tout d'abord l'adresse du site :
le site > sous menu mairie

pour visionner le problème :

avec internet explorer
avec firefox

en fait je voudrais que dans le tableau les cellules prennent toute la largeur et la hauteur du tableau.
allez, le code html :

<!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>Document sans nom</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<script src="retest.js" type="text/javascript"></script>
</head>

<body>
<div id="conteneur">
<div id="entete">...</div>
<div id="menu"><p class="menu"><a href="accueil.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/accsur.jpg',1)"><img class="item" src="images/accbase.jpg" alt="accueil" name="Image6" border="0" id="Image6" /></a><a href="portrait.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/porsur.jpg',1)"><img class="item" src="images/porbase.jpg" alt="portraits" name="Image7" border="0" id="Image7" /></a><a href="mariage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/marsur.jpg',1)"><img class="item" src="images/marbase.jpg" alt="mariage" name="Image8" border="0" id="Image8" /></a><a href="photoanimaliere.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/anisur.jpg',1)"><img class="item" src="images/anibase.jpg" alt="photo animalière" name="Image9" border="0" id="Image9" /></a><a href="tarifs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/tarsur.jpg',1)"><img class="item" src="images/tarbase.jpg" alt="tarifs" name="Image10" border="0" id="Image10" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/consur.jpg',1)"><img class="item" src="images/conbase.jpg" alt="contact" name="Image11" border="0" id="Image11" /></a></p></div>
<div id="principal">
<img id="fond" src="images/album2.gif" />
<div id="gauche">
<table id="mairie" class="mariage">
<tr><td><span onclick="afficherphoto('mariage12')"><img class="miniportrait" src="images/mini/mariage12.jpg" /></span></td>
<td><span onclick="afficherphoto('mariage13')"><img class="miniportrait" src="images/mini/mariage13.jpg" /></span></td>
<td><span onclick="afficherphoto('mariage14')"><img class="miniportrait" src="images/mini/mariage14.jpg" /></span></td>
<td><span onclick="afficherphoto('mariage15')"><img class="minipaysage" src="images/mini/mariage15.jpg" /></span></td></tr>
<tr><td><span onclick="afficherphoto('mariage16')"><img class="miniportrait" src="images/mini/mariage16.jpg" /></span></td>
<td><span onclick="afficherphoto('mariage17')"><img class="miniportrait" src="images/mini/mariage17.jpg" /></span></td>
<td><span onclick="afficherphoto('mariage18')"><img class="miniportrait" src="images/mini/mariage18.jpg" /></span></td>
<td><span onclick="afficherphoto('mariage19')"><img class="miniportrait" src="images/mini/mariage19.jpg" /></span></td></tr>
<tr><td><span onclick="afficherphoto('mariage20')"><img class="miniportrait" src="images/mini/mariage20.jpg" /></span></td>
<td><span onclick="afficherphoto('mariage21')"><img class="minipaysage" src="images/mini/mariage21.jpg" /></span></td>
<td><span onclick="afficherphoto('mariage22')"><img class="minipaysage" src="images/mini/mariage22.jpg" /></span></td>
<td></td>
</tr>
</table>
</div>
<div id="droite">...</div>
</div>
<div id="pied">...</div>
</div>
</body>
</html>

et le css :

@charset "utf-8";
/* CSS Document */
/* positionnement */
html, body{
width:100%;
height:100%;
}
body{
background:#999;
}
#conteneur{
width:100%;
height:100%;
overflow:hidden;
}
#entete{
width:100%;
height:5%;
}
#menu{
width:100%;
height:7%;
}
#principal{
position:relative;
width:100%;
height:80%;
overflow:hidden;

}
#fond{
position:absolute;
width:99%;
height:100%;
}
#gauche{
position:absolute;
top:5%;
left:6%;
width:38%;
height:90%;
color:#FFF;
font-weight:bolder;
}
#gauche ul{
text-align:center;
list-style:none;
}
#gauche li{
display:inline;
cursor:pointer;
}
#droite{
position:absolute;
top:5%;
right:7%;
width:38%;
height:90%;
}
#pied{
width:100%;
height:5%;
}

.menu{
text-align:center;
height:100%;
}
.item{
height:100%;
}
/*mise en page*/
.mariage{
display:none;
}
#gauche table{
position:absolute;
top:10%;
width:100%;
height:85%;
border:double;
}
#gauche tr{
width:100%;
}
#gauche td{
height:33%;
width:25%;
text-align:center;
}
.minipaysage{
width:100%;
max-width:100px;
}
.miniportrait{
width:60%;
max-width:67px;
}

Bon, je sais pas ce que je fais de travers, mais je veux bien le découvrir.

D'avance merci,

Haskard
Sujet clos
Aller à