[Résolu] design qui buge avec Firefox - mais qui marche parfaitement sous IE par Mitsuka - page 1

salut a tous

j'ai un "petit" probleme avec mon design qui fonctionne nikel sur IE mais ou il y a pleins de bugs sous Firefox

L'image du design vue sous IE:la voila

et celle du design vue sous firefox: la voila

et maintenant je vais vous donner aussi les codes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">;
<HTML><HEAD><TITLE>Mon site-------- Monsite.com

</TITLE>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="index" href="site.css" />
</head>
<body>
<div id="en_tete">
<form method="post" action="traitement.php"><p> ;<label>
pseudo :
<input type="text" name="pseudo" />
</label><br /><label>
mot de passe :
<input type="password" name="pass" /></label></p>
</form>
</div>
<div id="menu">
<div id="haut_menu"> Menu
</div>
<div class="element_menu">
<ul>
<li><a href="page1.html">1</a></li>
<li><a href="page2.html">2</a></li>
<li><a href="page3.html">3</a></li>
<li><a href="page1.html">1</a></li>
<li><a href="page2.html">2</a></li>
<li><a href="page3.html">3</a></li>
<li><a href="page1.html">1</a> ;</li>
<li><a href="page2.html">2</a></li>
<li><a href="page3.html">3</a></li>
</ul>
</div>
<div id="haut_menu"> Recherche
</div>
<div class="element_menu">
<ul>rechercher un truc sur....
<li></a></li>
</ul>
</div>
<div id="haut_menu"> Statistiques
</div>
<div class="element_menu">
<ul>
<li><a href="page1.html">nombre de connctes</a></li>
<li><a href="page2.html">membres</a></li>
<li><a href="page3.html">pages visiter</a></li>
</ul>
</div>
<div id="haut_menu"> Partenaires
</div>
<div class="element_menu">
<ul>
<li><a href="page1.html">......</a></li>
<li><a href="page2.html">:::::::</a></li>
<li><a href="page3.html">--------</a></li>
</ul>
</div>
<div id="haut_menu"> Publicité
</div>
<div class="element_menu">
<ul>
<li>la la p'tite pub qui tue et qui sert a rien

</a></li>
</ul>
</div>
</div>
<div id="corps">
Mon texte a inserer ici

</div>
</body>
</html>

body
{ width: 760px;
margin: 20px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #222126;
font-family: verdana, " Arial Black", "Times New Roman", Times, serif;
font-size: 12px;
margin: auto;}
#en_tete
{width: 720px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 0px;
color: #B3B3B3;
background-color: #852126;
margin-left: 160px;
border: solid black 1px;
background-color: #222126;
margin: 5px;}
input
{background-color: #111112;
color: #B3B3B3;
border: solid black 1px;}
#haut_menu
{border: dashed black 2px;
background-color: #111112;
padding: 2px;}
#menu
{float: left;
width: 110px;
color: #B3B3B3;
margin-left: 10px;
}.element_menu
{background-color: #222126;
background-image: url(" images/motif.png");
background-repeat: repeat-x;
border: 1px solid black;
text-align: left;
margin-bottom: 10px;}
.element_menu h3
{color: #B3B3B3;
font-family: verdana, Arial, "Arial Black", "Times New Roman", Times,
serif;
text-align: center;
}.element_menu ul
{list-style-type: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}.element_menu a
{color: #B3B3B3;
text-decoration: none;
float: left;
margin-left: -10px;}
.element_menu a:hover
{color: white;
text-decoration: none;
cursor: default;}
#corps
{margin-left: 140px;
margin-bottom: 20px;
padding: 5px;
color: #B3B3B3;
background-color: #111112;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: solid black 1px;}
#corps h1
{ color: #B3B3B3;
text-align: center;
font-family: verdana, "Arial Black", "Times New Roman", Times, serif;}
#corps h2
{height: 30px;
background-image: url("images/titre.png");
background-repeat: no-repeat;
font-family: verdana, "Arial Black", "Times New Roman", Times, serif;
padding-left: 30px;
color: #B3B3B3;
text-align: left;}

Merci beaucoup

Mitsuka

30 août 2006 à 13:15:09

Li3F

30 août 2006 à 14:56:05

Deja commence par fait des bordure d'une autre couleur que noir vu que ton fond est noir... car la on comprend rien

Anonyme

30 août 2006 à 16:07:39

t sur que c pas le contraire ?

gael

30 août 2006 à 16:13:17

Qu'un bordel ce code, meme pas indenté pas de saut de ligne, j'ai l'impression de m'étouffer en lisant :lol:

Candygirl

30 août 2006 à 17:15:01

.element_menu a
{color: #B3B3B3;
text-decoration: none;
float: left;
margin-left: -10px;}

Pourquoi un float:left alors que tu veux visiblement tes éléments les uns au-dessous des autres si j'en juge ton screen sur IE ?
Vire le float:left ça devrait être beaucoup plus présentable

Je pense que tu peu aussi virer le margin-left: -10px; si tu attribues un padding de 10 au lieu de 20 à ton ul:

.element_menu ul
{list-style-type: none;
padding: 0px;
padding-left: 10px;
margin: 0px;
margin-bottom: 5px;
}

design qui buge avec Firefox

mais qui marche parfaitement sous IE

design qui buge avec Firefox

Supprimer

Modérer

Signaler le message aux modérateurs