Problème avec un design

Bonjour.

Pendant les vacances, j'ai fait un site sur mon ordinateur portable. je l'ai testé avec IE. Tout marche. Cependant, quand le teste avec Firefox, j'ai des bugs d'affichages plus ou moins gênants. J'aimerais savoir ce qu'il faut faire pour que ma page s'affiche convenablement sous Firefox.

la page html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Laideron.com : il y a toujours plus moche que vous</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<link rel="alternate stylesheet" media="screen" type="text/css" title="Design gris style enterement" href="design2.css" />
</head>
<body>
<div id="banniere"></div>

<div class="menu">
<h1>Menu</h1>
<p>
<ul>
<li><a href='index.php'>Liste des photos</a></li>
<li><a href='top.php'>Top des laiderons</a></li>
<li><a href='mailto:webmaster@laiderons.ovh.net'>Contactez-nous !</a></li>

<li><a href='mailto:webmaster@laiderons.ovh.fr?subject=Nouvelle image'>Nouveau laideron</a></li>
<li><a href='livredor.php'>Vos commentaires</a></li>
<li><a href='bug.php'>Rapporter un bug</a></li>
<li><a href='mise-en-forme.php'>Mise en forme</a></li>
</ul>
</p>

<h1>Le TOP 3</h1>
<div class='photo'><p><a href='afficher.php?id=39'><img src='boulet39.jpg'/></a><br><a href='afficher.php?id=39'>Par Admin<br>10</a><br><br></p></div><div class='photo'><p><a href='afficher.php?id=88'><img src='goussard.jpg'/></a><br><a href='afficher.php?id=88'>Par Admin<br>10</a><br><br></p></div><div class='photo'><p><a href='afficher.php?id=23'><img src='boulet23.jpg'/></a><br><a href='afficher.php?id=23'>Par Admin<br>10</a><br><br></p></div></div>
<div id="corps">
<h1>Liste des photos ( par date ) :</h1><br><br><p>Pages : 1 <a href="index.php?page=2">2</a> <a href="index.php?page=3">3</a> <a href="index.php?page=4">4</a> <a href="index.php?page=5">5</a> <a href="index.php?page=6">6</a> </p><br><br><div class='photo'><p><br><a href='afficher.php?id=91'><img class='image' src='boulet55.bmp'/></a><br><em>Si encore yavait que les lunettes</em><br>Par Admin.<br><br><p>Note : 8 ( 3 vote(s) )<br><a href='noter.php?id=91'>Noter</a><br><a href='comment.php?image=91'>Commenter</a> ( 1 commentaire(s) )</p></div><div class='photo'><p><br><a href='afficher.php?id=90'><img class='image' src='boulet44.bmp'/></a><br><em></em><br>Par Admin.<br><br><p>Note : 4 ( 1 vote(s) )<br><a href='noter.php?id=90'>Noter</a><br><a href='comment.php?image=90'>Commenter</a> ( 1 commentaire(s) )</p></div><div class='photo'><p><br><a href='afficher.php?id=89'><img class='image' src='boulet70.jpg'/></a><br><em></em><br>Par Admin.<br><br><p>Note : 8.25 ( 4 vote(s) )<br><a href='noter.php?id=89'>Noter</a><br><a href='comment.php?image=89'>Commenter</a> ( 0 commentaire(s) )</p></div><div class='photo'><p><br><a href='afficher.php?id=88'><img class='image' src='goussard.jpg'/></a><br><em>Un beauf en pleine promenade...</em><br>Par Admin.<br><br><p>Note : 10 ( 10 vote(s) )<br><a href='noter.php?id=88'>Noter</a><br><a href='comment.php?image=88'>Commenter</a> ( 4 commentaire(s) )</p></div><div class='photo'><p><br><a href='afficher.php?id=87'><img class='image' src='15.jpg'/></a><br><em></em><br>Par Admin.<br><br><p>Note : 0 ( 2 vote(s) )<br><a href='noter.php?id=87'>Noter</a><br><a href='comment.php?image=87'>Commenter</a> ( 0 commentaire(s) )</p></div><div class='photo'><p><br><a href='afficher.php?id=86'><img class='image' src='14[1].jpg'/></a><br><em></em><br>Par Admin.<br><br><p>Note : 8 ( 1 vote(s) )<br><a href='noter.php?id=86'>Noter</a><br><a href='comment.php?image=86'>Commenter</a> ( 1 commentaire(s) )</p></div>
<p>
Il y a 84 photos en tout dans le site.<p><p>Pages : 1 <a href="index.php?page=2">2</a> <a href="index.php?page=3">3</a> <a href="index.php?page=4">4</a> <a href="index.php?page=5">5</a> <a href="index.php?page=6">6</a> </p> </div>

</body>
</html>

Et le fichier CSS:

.texte-normal
{
text-align: justify;
text-indent: 25px;
}

body
{
background-color: #ebfbff;
background-image: url("degrade.bmp");
background-repeat: repeat-y;
font-family: "Comic sans MS", Arial, "Lucida bright", sherif;
font-size: 0.8em;
padding: 0px;
}

img
{
border: 3px;
border-style: inset;
border-color: #7f7fff;
}

ul, ol
{
list-style-type: disc;
}

#barre_titre
{
font: 2.5em, bold, "Comic sans MS", "Arial Black", sherif, bold;
background-image: url("image.gif");
text-align: center;
color: silver;
width: 531px;
height: 220px;
border-color: blue;
margin: auto;
margin-top: 5px;
margin-bottom: 20px;
}

.menu ul, .menu ol
{
text-align: left;
margin-left: 20px;
}

.menu
{
font-family: "Comic sans MS", arial, "courier new", sherif;
border: 3px;
border-style: outset;
border-color: #7f7fff;
width: 15%;
float: left;
margin-right: 5px;
padding-top: 5px;
padding-left: 2px;
padding-right: 2px;
margin-bottom: 10px;
overflow: hidden;
left: 0px;
}

.menu .photo
{
margin: auto;
width: 95%;
}
.menu .photo p
{
text-align: center;
}

.menu .photo img
{
width: 95%;
}

.menu h1
{
font-family: "Comic sans MS", "Arial Black", Arial, sherif;
font-size: 1.1em;
font-weight: bold;
text-decoration: underline;
text-transform: uppercase;
text-align: center;
padding-top: 0px;
}

#corps
{
text-align: center;
border: 3px;
border-style: double;
border-color: #7f7fff;
margin-right: 0px;
width: 79%;
max-width: 79%;
float: right;
padding: 5px;
margin-bottom: 20px;
overflow: hidden;
/* margin-right: 5px; */
}

#corps h1
{
text-indent: 5%;
}

#corps .photo
{
width: 100%;
padding: 0px;
margin-bottom: 50px;
}

#corps p
{
float: clear;
}

#corps .photo .image
{
float: left;
width: 50%;
left: 0px;
margin-right: 10px;
margin-bottom: 50px;
}

a
{
color: blue;
}

a:hover
{
color: aqua;
}

.smiley
{
float: clear;
/* mi-width: 19px; */
display: inline;
position: relative;
top: 4px;
border: 0px;
}

Et le résultat :
http://jmeykiechel.free.fr/bug-css.html

Merci d'avance à ceux qui ont eu le courage de tout lire...

ridjidji

28 juillet 2006 à 13:41:16

Anonyme

28 juillet 2006 à 13:44:29

De quelle bug d'affichage parles tu ?

28 juillet 2006 à 13:49:07

Hé bien, sous FF, le texte à coté des image ne se met pas à coté de l'image à laquelle il correspond

john38

28 juillet 2006 à 13:49:58

Ben il faut faire une autre feuille de style pour ff, avec ce code dans l'entete :

La première est pour FF et comme ff ne lit pas après <!-- et ben l'autre est pour ie

28 juillet 2006 à 13:54:18

ok. Mais comment faire pour que les légendes des images <P> ne sortent pas des bloques .photo ?

29 juillet 2006 à 15:10:43

Quelqu'un a une idée ?

Entre IE et Firefox

Problème avec un design

Supprimer

Modérer

Signaler le message aux modérateurs