Sujet Précédent Sujet Suivant

Mozzila et Google Chrome

Résolu/Fermé
bluenette Messages postés 213 Date d'inscription lundi 25 mai 2009 Statut Membre Dernière intervention 21 mars 2019 - Modifié par bluenette le 16/06/2011 à 12:47
bluenette Messages postés 213 Date d'inscription lundi 25 mai 2009 Statut Membre Dernière intervention 21 mars 2019 - 28 juin 2011 à 17:31
Bonjour,

Je suis en train de construire un site, et mon problème est que sur Google Chrome les div se placent bien et sur Mozilla rien à voir, elles se chevauchent .

Qu'es ce qui peut expliquer cela?

Voici mon html et mon css :

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Invitation au Délice vous propose un large choix de macarons faits maison, miels, pains d'épices, madeleines au miel, et de nombreux autres articles de qualité. En direct du producteur, nous vous assurons un suivi rigoureux dans nos produits, et une qualité incomparable."/>
<meta name="keyword" content="miel, macarons, perigord, bio, biologique, pas cher, pain d'épices, pièce montée de macarons, cadeaux d'invités, noix de coco, menthe, chocolat, framboise, abricot, vanille, café, caramel, beurre salé, pistache, cassis, cerise, citron, madeleines, nonettes, bonbons au miel"/>
<title>Invitation au Délice</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</head>
<body>
<a href="index.html"><img src="images/logo.png" alt="Logo Invitation au Délice" id="logo" /></a>
<div id="bandeau">
<p><a href="lentreprise.html"><img src="images/menu_01.png" alt="L'Entreprise" /></a> <a href="nosproduits.html"><img src="images/menu_02.png" alt="Nos Produits" /></a> <a href="conditions.html"><img src="images/menu_03.png" alt="Conditions" /></a> <a href="contact.html"><img src="images/menu_04.png" alt="Contact" /></a></p>
</div>
<div id="blocgauche">
<a href="miel.html"><img src="images/miel.png" alt="miel" id="blocgauche1" />
<a href="macarons.html"><img src="images/macarons.png" alt="Macarons" id="blocgauche2" />
<a href="painsdepices.html"><img src="images/painsdepices.png" alt="Pains d'Epices" id="blocgauche3" />
<a href="madeleines.html"><img src="images/madeleines.png" alt="Madeleines" id="blocgauche4" />
</div>
<div id="parfums">
<p><b>Les Parfums :</b></p>
</div>
<div id="blocun">
<img src="images/macaronscerise.jpg" alt="Cerise" id="Macarons1" />
<img src="images/cerise.jpg" alt="Cerise" id="Variété1" />
<img src="images/macaronschocolat.jpg" alt="Cerise" id="Macarons5" />
<img src="images/cafe.jpg" alt="Café" id="Variété5" />
<img src="images/macaronsvanille.jpg" alt="Cerise" id="Macarons9" />
<img src="images/abricot.jpg" alt="Abricot" id="Variété9" />
</div>
<div id="blocdeux">
<img src="images/macaronsvanille.jpg" alt="Vanille" id="Macarons2" />
<img src="images/vanille.jpg" alt="vanille" id="Variété2" />
<img src="images/macaronsframboise.jpg" alt="Cerise" id="Macarons6" />
<img src="images/citron.jpg" alt="Citron" id="Variété6" />
<img src="images/macaronscerise.jpg" alt="Cerise" id="Macarons10" />
<img src="images/chocolatmenthe.jpg" alt="Chocolat Menthe" id="Variété10" />
</div>
<div id="bloctrois">
<img src="images/macaronschocolat.jpg" alt="Chocolat" id="Macarons3" />
<img src="images/pistache.jpg" alt="pistache" id="Variété3" />
<img src="images/macaronsvanille.jpg" alt="Cerise" id="Macarons7" />
<img src="images/cassis.jpg" alt="Cassis" id="Variété7" />
<img src="images/macaronsframboise.jpg" alt="Cerise" id="Macarons11" />
<img src="images/noixdecoco.jpg" alt="Noix de Coco" id="Variété11" />
</div>
<div id="blocquatre">
<img src="images/macaronsframboise.jpg" alt="Framboise" id="Macarons4" />
<img src="images/framboise.jpg" alt="framboise" id="Variété4" />
<img src="images/macaronscerise.jpg" alt="Cerise" id="Macarons8" />
<img src="images/chocolat.jpg" alt="Chocolat" id="Variété8" />
<img src="images/macaronschocolat.jpg" alt="Cerise" id="Macarons12" />
<img src="images/caramelbeurresale.jpg" alt="Caramel Beurre Salé" id="Variété12" />
</div>
<div id="explicatif">
<p> Nos macarons sont conçus de manière artisanale, ils sont sans conservateurs et contiennent tous du miel d'acacia. Celui-ci, ne se trouve pas au goût, mais il permet de vous proposer des macarons au moelleux incomparable. Les vertus du miel assurent également un rôle de conservateur naturel.</p>
</div>
<div id="boites">
<p><b>Les Boites :</b></p>
</div>
<div id="blocun1">
<img src="images/boitede6version1.jpg" alt="Boite de 6 Macarons Version Une" id="Macarons1" />
<img src="images/boitede16.jpg" alt="Boite de 16 Macarons" id="Macarons3" />
</div>
<div id="blocdeux1">
<img src="images/boitede6version2.jpg" alt="Boite de 6 Macarons Version Deux" id="Macarons2" />
<img src="images/boitede25.jpg" alt="Boite de 25 Macarons" id="Macarons4" />
</div>
</body>
</html>
</body>
</html>

CSS :
body
{
background:url(images/fond_ecran.jpg),top center;
background-repeat:no-repeat;
}
img#logo
{
position : absolute;
top : 03%;
left: 75%;
margin-left : -303px;
border: none;
}
div#bandeau
{
position: absolute;
top:15%;
left:6%;
width:100%;
height: 100px;
}
a img
{
border:none;
}
div#contenu
{
position: absolute;
left: 35%;
top : 35%;
width: 58%;
}
div#contenu p
{
font-size: 20px;
text-align: justify;
font-family: Palatino Linotype,Georgia, yriad Pro,Serif;
color: white;
}
h2
{
text-align: center;
font-family: Palatino Linotype,Georgia, yriad Pro,Serif;
text-decoration: underline;
color: white;
margin-bottom: 10%;
}
center
{
font-size: 20px;
text-align : center;
font-family: Palatino Linotype,Georgia, yriad Pro,Serif;
color: white;
margin-top: 5%;
margin-bottom : 5%;
}
img#piecesmontees
{
position: absolute;
top: 35%;
left: 02%;
border: none;
}
img#adresse
{
position: absolute;
top: 50%;
margin-top:-85px;
left: 50%;
margin-left: -159px;
border:none;
}
div#mail p
{
position: absolute;
top : 70%;
font-size: 20px;
left: 37%;
font-family: Palatino Linotype,Georgia, yriad Pro,Serif;
color: white;
text-decoration: none;
border: none;
}
a:link
{
text-decoration: none;
border:none;
color: white;
}
div#blocgauche
{
margin-top: 22%;
margin-left: 2.5%;
margin-right: auto;
width: 195px;
float: left;
height: 200px;
}
div#blocdroit
{
margin-top: 20%;
float:left;
margin-left: 8%;
margin-right: auto;
width: 220px;
}
div#blocextradroit
{
margin-top: 20%;
float:left;
margin-left: 12%;
margin-right: auto;
width: 220px;
}
img#Miel1
{
margin-bottom: 20%;
}
img#Miel2
{
margin-bottom: 20%;
}
img#Miel3
{
margin-bottom: 20%;
}
img#Miel4
{
margin-bottom: 20%;
}
img#Miel5
{
margin-bottom: 20%;
}
img#Miel6
{
margin-bottom: 20%;
}
img#Miel7
{
margin-bottom: 20%;
}
img#Miel8
{
margin-bottom: 20%;
}
img#Miel9
{
margin-bottom: 20%;
}
img#Miel10
{
margin-bottom: 20%;
}
img#Miel11
{
margin-bottom: 20%;
}
img#Miel12
{
margin-bottom: 20%;
}
img#Miel13
{
margin-bottom: 20%;
}
img#Miel14
{
margin-bottom: 20%;
}
img#Miel15
{
margin-bottom: 20%;
}
img#Miel16
{
margin-bottom: 20%;
}
img#Miel17
{
margin-bottom: 20%;
}
div#parfums p
{
position:absolute;
top: 30%;
left: 22%;
border:none;
text-decoration: underline;
font-size: 20px;
font-family: Palatino Linotype,Georgia, yriad Pro,Serif;
color: white;
}
div#blocun
{
margin-top: 27%;
float:left;
margin-right: auto;
width: 150px;
height: 330px;
}
div#blocdeux
{
margin-top: 27%;
float:left;
margin-left: 5%;
margin-right: auto;
width: 150px;
height: 330px;
}
div#bloctrois
{
margin-top: 27%;
float:left;
margin-left: 5%;
margin-right: auto;
width: 150px;
height: 330px;
}
div#blocquatre
{
margin-top: 27%;
float:left;
margin-left: 5%;
margin-right: auto;
width: 150px;
height: 330px;
}
div#explicatif p
{
position:absolute;
border:none;
font-size: 16px;
font-family: Palatino Linotype,Georgia, yriad Pro,Serif;
color: white;
text-align: justify;
}
div#explicatif
{
position: absolute;
margin-top: 90%;
margin-left: 21.5%;
width: 71%;
margin-bottom: 20%;
}
div#boites
{position:absolute;
top: 110%;
left: 22%;
border: none;
width: 200px;
}

div#boites p
{
position:absolute;
border:none;
text-decoration: underline;
font-size: 20px;
font-family: Palatino Linotype,Georgia, yriad Pro,Serif;
color: white;
}
div#blocun1
{
margin-top: 20%;
margin-left: 26%;
float:left;
margin-right: auto;
width: 250px;
height: 330px;
}
div#blocdeux1
{
margin-top: 20%;
float:left;
margin-left: 16%;
margin-right: auto;
width: 250px;
height: 330px;
}

Merci par avance à tous de votre aide

A voir également:

5 réponses

Réponse 1 / 5
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
16 juin 2011 à 14:50
Salut,
Tu aurais une version en ligne de ton site?
1
Réponse 2 / 5
Meoran Messages postés 1562 Date d'inscription vendredi 28 août 2009 Statut Membre Dernière intervention 8 avril 2015 206
16 juin 2011 à 14:13
Salut,

ton code est valide w3c ?

Si non, http://validator.w3.org/
0
Réponse 3 / 5
bluenette Messages postés 213 Date d'inscription lundi 25 mai 2009 Statut Membre Dernière intervention 21 mars 2019 3
16 juin 2011 à 14:57
Merci beaucoup je viens de corriger plusieurs erreurs. Mais il en reste encore deux que je ne comprends pas :

Ligne 10, colonne 6 : type de document ne permet pas l'élément "body" ici
<Corps >
?
L'élément nommé ci-dessus a été trouvé dans un contexte où il n'est pas permis. Cela pourrait signifier que vous avez mal imbriquées éléments - comme un "style" élément dans le "corps" section au lieu de l'intérieur «tête» - ou deux éléments qui se chevauchent (ce qui n'est pas autorisé).

Ligne 74, colonne 7 : balise de fin pour "html" qui n'est pas terminée
</ Html >
?
Très probablement, vous imbriquées les balises et les fermées dans le mauvais ordre. Pour <p> exemple <em> ...</ p> n'est pas acceptable, comme <em> doit être fermé avant <p>. Nidification est acceptable: <em> ...</ em> </ p>

Pourtant il me semble que mes balise body et html sont bien placées et bien refermées!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Invitation au Délice vous propose un large choix de macarons faits maison, miels, pains d'épices, madeleines au miel, et de nombreux autres articles de qualité. En direct du producteur, nous vous assurons un suivi rigoureux dans nos produits, et une qualité incomparable."/>
<meta name="keyword" content="miel, macarons, perigord, bio, biologique, pas cher, pain d'épices, pièce montée de macarons, cadeaux d'invités, noix de coco, menthe, chocolat, framboise, abricot, vanille, café, caramel, beurre salé, pistache, cassis, cerise, citron, madeleines, nonettes, bonbons au miel"/>
<title>Invitation au Délice</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</head>
<body>
<a href="index.html"><img src="images/logo.png" alt="Logo Invitation au Délice" id="logo" /></a>
<div id="bandeau">
<p><a href="lentreprise.html"><img src="images/menu_01.png" alt="L'Entreprise" /></a>
<a href="nosproduits.html"><img src="images/menu_02.png" alt="Nos Produits" /></a>
<a href="conditions.html"><img src="images/menu_03.png" alt="Conditions" /></a>
<a href="contact.html"><img src="images/menu_04.png" alt="Contact" /></a></p>
</div>
<div id="blocgauche">
<a href="miel.html"><img src="images/miel.png" alt="miel" id="blocgauche1" /></a>
<a href="macarons.html"><img src="images/macarons.png" alt="Macarons" id="blocgauche2" /></a>
<a href="painsdepices.html"><img src="images/painsdepices.png" alt="Pains d'Epices" id="blocgauche3" /></a>
<a href="madeleines.html"><img src="images/madeleines.png" alt="Madeleines" id="blocgauche4" /></a>
</div>
<div id="parfums">
<p><b>Les Parfums :</b></p>
</div>
<div id="blocun">
<img src="images/macaronscerise.jpg" alt="Cerise" id="macarons1" />
<img src="images/cerise.jpg" alt="Cerise" id="variété1" />
<img src="images/macaronschocolat.jpg" alt="Cerise" id="macarons5" />
<img src="images/cafe.jpg" alt="Café" id="variété5" />
<img src="images/macaronsvanille.jpg" alt="Cerise" id="macarons9" />
<img src="images/abricot.jpg" alt="Abricot" id="variété9" />
</div>
<div id="blocdeux">
<img src="images/macaronsvanille.jpg" alt="Vanille" id="macarons2" />
<img src="images/vanille.jpg" alt="vanille" id="variété2" />
<img src="images/macaronsframboise.jpg" alt="Cerise" id="macarons6" />
<img src="images/citron.jpg" alt="Citron" id="variété6" />
<img src="images/macaronscerise.jpg" alt="Cerise" id="macarons10" />
<img src="images/chocolatmenthe.jpg" alt="Chocolat Menthe" id="variété10" />
</div>
<div id="bloctrois">
<img src="images/macaronschocolat.jpg" alt="Chocolat" id="macarons3" />
<img src="images/pistache.jpg" alt="pistache" id="variété3" />
<img src="images/macaronsvanille.jpg" alt="Cerise" id="macarons7" />
<img src="images/cassis.jpg" alt="Cassis" id="variété7" />
<img src="images/macaronsframboise.jpg" alt="Cerise" id="macarons11" />
<img src="images/noixdecoco.jpg" alt="Noix de Coco" id="variété11" />
</div>
<div id="blocquatre">
<img src="images/macaronsframboise.jpg" alt="Framboise" id="macarons4" />
<img src="images/framboise.jpg" alt="framboise" id="variété4" />
<img src="images/macaronscerise.jpg" alt="Cerise" id="macarons8" />
<img src="images/chocolat.jpg" alt="Chocolat" id="variété8" />
<img src="images/macaronschocolat.jpg" alt="Cerise" id="macarons12" />
<img src="images/caramelbeurresale.jpg" alt="Caramel Beurre Salé" id="variété12" />
</div>
<div id="explicatif">
<p> Nos macarons sont conçus de manière artisanale, ils sont sans conservateurs et contiennent tous du miel d'acacia. Celui-ci, ne se trouve pas au goût, mais il permet de vous proposer des macarons au moelleux incomparable. Les vertus du miel assurent également un rôle de conservateur naturel.</p>
</div>
<div id="boites">
<p><b>Les Boites :</b></p>
</div>
<div id="blocun1">
<img src="images/boitede6version1.jpg" alt="Boite de 6 Macarons Version Une" id="boitemacarons1" />
<img src="images/boitede16.jpg" alt="Boite de 16 Macarons" id="boitemacarons3" />
</div>
<div id="blocdeux1">
<img src="images/boitede6version2.jpg" alt="Boite de 6 Macarons Version Deux" id="boitemacarons2" />
<img src="images/boitede25.jpg" alt="Boite de 25 Macarons" id="boitemacarons4" />
</div>
</body>
</html>
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
16 juin 2011 à 15:18
Change le doctype en Transitional et ça passe: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
0
bluenette Messages postés 213 Date d'inscription lundi 25 mai 2009 Statut Membre Dernière intervention 21 mars 2019 3
Modifié par bluenette le 16/06/2011 à 15:27
Génial merci plus de fautes. Cependant j'ai toujours le problème de mon site qui ne s'affiche plus du tout pareil selon le navigateur (niquel sur Google Chrome et cata sur mozilla

Voici le lien en ligne : http://www.invitationaudelice.fr/macarons.html
0
Meoran Messages postés 1562 Date d'inscription vendredi 28 août 2009 Statut Membre Dernière intervention 8 avril 2015 206
Modifié par Meoran le 16/06/2011 à 15:27
404 Not found...

EDIT : .html
0
bluenette Messages postés 213 Date d'inscription lundi 25 mai 2009 Statut Membre Dernière intervention 21 mars 2019 3
16 juin 2011 à 15:28
Oui je viens de l'édit nous nous sommes croisés! Désolée
0
Réponse 4 / 5
Meoran Messages postés 1562 Date d'inscription vendredi 28 août 2009 Statut Membre Dernière intervention 8 avril 2015 206
Modifié par Meoran le 16/06/2011 à 15:28
Ben... chez moi ça passe bien sur Mozilla :/

Il est où le problème exactement ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
bluenette Messages postés 213 Date d'inscription lundi 25 mai 2009 Statut Membre Dernière intervention 21 mars 2019 3
16 juin 2011 à 15:33
Et chez moi le bloc "Nos macarons sont conçus artisanalement,..." est positionné sur les photos des boites de macarons. Es-ce mon mozilla qui ne s'actualise pas correctement?
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
16 juin 2011 à 16:28
Arf!
Pourquoi ce positionnement pour le div boites 
div#boites {
    border: medium none;
    left: 22%;
    position: absolute;
    top: 110%;
    width: 200px;
}

C'est tout le positionnement qui est à revoir.
Réduit la taille de la fenêtre de ton navigateur et tu verras ce que ça provoque....
0
bluenette Messages postés 213 Date d'inscription lundi 25 mai 2009 Statut Membre Dernière intervention 21 mars 2019 3
16 juin 2011 à 16:33
Ah oui en effet, ça va pas du tout ça! Pourquoi ça fait ça?

Comment faut-il que je fasse pour arriver à positionner mes éléments sans que ça fasse cet effet? C'est a cause du position: absolute?
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
16 juin 2011 à 16:49
Tu utilises des positionnements en % à tort.
Exemple avec le div bandeau.
Met: 
top:100px;

Ça ira déjà mieux.
Revois le reste de la même manière.
0
bluenette Messages postés 213 Date d'inscription lundi 25 mai 2009 Statut Membre Dernière intervention 21 mars 2019 3
28 juin 2011 à 17:31
Et tout fonctionne tellement mieux! Merci beaucoup
0