Mozzila et Google Chrome

Résolu

bluenette Messages postés 213 Date d'inscription Statut Membre Dernière intervention -
bluenette Messages postés 213 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Mozzila et Google Chrome
Google maps satellite - Guide
Dns google - Guide
Mise a jour google chrome - Accueil - Applications & Logiciels
Google maps - Guide
Google chrome - Télécharger - Navigateurs

5 réponses

Réponse 1 / 5

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention 475

Salut,
Tu aurais une version en ligne de ton site?

Réponse 2 / 5

Meoran Messages postés 1562 Date d'inscription Statut Membre Dernière intervention 207

Salut,

ton code est valide w3c ?

Si non, http://validator.w3.org/

Réponse 3 / 5

bluenette Messages postés 213 Date d'inscription Statut Membre Dernière intervention 3

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>

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention 475

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">

bluenette Messages postés 213 Date d'inscription Statut Membre Dernière intervention 3

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

Meoran Messages postés 1562 Date d'inscription Statut Membre Dernière intervention 207

404 Not found...

EDIT : .html

bluenette Messages postés 213 Date d'inscription Statut Membre Dernière intervention 3

Oui je viens de l'édit nous nous sommes croisés! Désolée

Réponse 4 / 5

Meoran Messages postés 1562 Date d'inscription Statut Membre Dernière intervention 207

Ben... chez moi ça passe bien sur Mozilla :/

Il est où le problème exactement ?

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 Statut Membre Dernière intervention 3

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?

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention 475

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....

bluenette Messages postés 213 Date d'inscription Statut Membre Dernière intervention 3

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?

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention 475

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.

bluenette Messages postés 213 Date d'inscription Statut Membre Dernière intervention 3

Et tout fonctionne tellement mieux! Merci beaucoup

Votre réponse