[Résolu] Problème CSS avec Mozzila Firefox par Bill Gates 2 - page 1

Bonjour,
J'ai réalisé un design pour mon site et je le teste sur IE tout marche !
Content de moi je la fait tester à quelqu'un qui est sur Firefox et plus rien ne va !

/* CSS Document */
<!-- BODY {
body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */

}

/* L'en-tête */

#en_tete
{
width: 760px;
height: 100px;
background-image: url("images/header1.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
border: 2px solid grey; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

/* Menu */
#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}

.element_menu
{
background-color: #660000;
background-repeat: repeat-x;

border: 2px solid grey;

margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

.element_menu h3 /* Tous les titres de menus */
{
color: #FFFFFF;
font-family: "Comic Sans MS", Arial, "Times New Roman", Times, serif;
text-align: center;
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #FFFFFF;
font-family: Verdana, Arial, "Times New Roman", Times, serif;
font-weight: bold;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{

color: #000000;
}

/* Le corps de la page */

#corps
{
width: 620px;
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

color: #B3B3B3;
background-color: #660000; /* Une couleur de fond pour le corps */
/* background-image: url("images/motif.png"); */
border: 2px solid grey; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

#pied_de_page
{
width: 620px;
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

padding: 5px;

text-align: center;

color: #FFFFFF;
background-color: #660000;

background-repeat: repeat-x;

border: 2px solid grey;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Design 56K</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Design Simple" href="style56K.css" />
</head>

<body>
<div id="en_tete">

</div>

<div id="menu">

<div class="element_menu">
<h3>Titre</h3>
<p><a href="#">Lien</a><br>

<a href="#">Lien</a><br>
<a href="#">Lien </a></p>

<h3>Titre</h3>
<a href="#">Lien</a><br>

<a href="#">Lien</a><br>
<a href="#">Lien</a> </div>

</div>

<div id="corps">
<h1>Test de Design</h1>
<p> Bonjour ceci est une page de test du design Little Flash de la Version Red
Flash. <br>
blablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablabla<br>
blablablablablablablablablablablablablablablabla<br></p>
</div>

<div id="pied_de_page">
<p>Copyright Beauxbatons-France tout droits reservés 2006</p>
</div>
</body>
</html>

C'est un test c'est pas du grand art mais voila...

Quelqu'un c'est pourquoi ca marche sur IE et pas sur MF ? :euh:

Bill Gates 2

25 juin 2006 à 19:36:56

Sykka

25 juin 2006 à 19:44:37

Et c'est quoi exactement le problème ?

25 juin 2006 à 19:45:51

Le CSS est comme oublié par Firefox...
On voit la page comme si j'avais pas mit le CSS...

25 juin 2006 à 19:48:50

Dans ton fichier HTML, sous la ligne du Doctype, essaye de rajouter çà :

Je sais pas si c'est çà mais ajoute le, tu verras bien

25 juin 2006 à 19:53:15

Non désolé ca marche pas...
Si tu as MF regardes ce que ca fait

Bilbou

25 juin 2006 à 19:57:58

Hey !

Voici ton code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<html>
<head>
<title>Design 56K</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Design Simple" href="style56K.css" />
</head>

Supprime la balise <html> juste avant la <head> (il y en a deux, faute d'inattention...)

Bonne soirée !

25 juin 2006 à 20:00:04

Merci mais ca ne change toujours pas...

25 juin 2006 à 20:02:28

Sûrement un problème au niveau de la casse alors, je suppose.

Essaie de renommer ton CSS, sans chiffres, ni majuscules.

Peut-être que ça marcherait... :-°