Fond décalé entre IE et FF
Nono
-
Léo -
Léo -
Bonjour !
Après quelques recherches infructueuses, je m'en remet à vous.
J'ai construit mon site et je découvre que sous IE7 et FF3, le fond de ma page est décalé d'un seul petit pixel et ça se voit trop !
Que faire pour aligner tout le site de la même façon sur n'importe quel navigateur ?
CSS :
/*** CORPS DU SITE ***/
body {
margin: 0; /* Marges externes */
padding: 0; /* Marges internes */
background: #123A89 url(images/header.png) no-repeat top center; /* Fond de la page */
width: 100%; /* Largeur de la boite */
font-size: 13px; /* Taille de la police d'écriture */
color: #FFFFFF; /* Couleur du texte */
font-family: Verdana; /* Type de police d'écriture */
text-align: center; /* Alignement de la police d'écriture */
}
/*** HEADER ***/
#header {
height: 392px; /* Hauteur de la boite */
}
h1 {
color: #FFD700; /* Couleur du texte */
font-size: 16px; /* Taille de la police d'écriture */
font-weight: bold; /* Graisse de la police d'écriture */
padding-left: 20px; /* Marge interne gauche */
height: 20px; /* Hauteur de la boite */
background: url(images/h1.png) no-repeat; /* Fond de la page */
}
h2 {
color: #FFD700; /* Couleur du texte */
font-size: 14px; /* Taille de la police d'écriture */
font-weight: bold; /* Graisse de la police d'écriture */
padding-left: 30px; /* Marge interne gauche */
}
h3 {
color: #FFD700; /* Couleur du texte */
font-size: 12px; /* Taille de la police d'écriture */
padding-left: 40px; /* Marge interne gauche */
}
a img {
border: 0;
}
a {
color: #FFD700; /* Couleur du texte */
text-decoration: none; /* Décoration du texte */
}
a:hover {
font-weight: bold; /* Graisse de la police d'écriture */
}
/*** CONTENU ***/
#page {
width: 1020px; /* Largeur de la boîte */
margin: auto; /* Marges externes */
padding: 0; /* Marges internes */
background: url(images/fondpage.png) repeat-y center; /* Fond de la page */
}
#menu {
float: left; /* Flottement d'une boîte */
width: 200px; /* Largeur de la boîte */
margin: 10px; /* Marges externes */
margin-left: 20px; /* Marge externe gauche */
font-size: 11px; /* Taille de la police d'écriture */
text-align: left; /* Alignement de la police d'écriture */
padding: 10px; /* Marges internes */
border: 1px solid white; /* Epaisseur/Style/Couleur des bordures */
line-height: 200%; /* Interligne du bloc */
}
#contenu {
width: 707px; /* Largeur de la boîte */
margin: 0; /* Marges externes */
margin-left: 270px; /* Marge externe gauche */
text-align: justify; /* Alignement de la police d'écriture */
line-height: 140%; /* Interligne du bloc */
padding: 10px; /* Marges internes */
}
#contenu p {
padding: 5px; /* Marges internes */
}
/*** FOOTER ***/
#footer {
clear: both; /* Colle la boite sous toutes les autres */
width: 1000px; /* Largeur de la boîte */
height: 40px; /* Hauteur de la boîte */
margin: auto; /* Marges externes */
margin-bottom: 30px; /* Marge externe inférieure */
padding-top: 2px; /* Marge interne gauche */
padding-left: 22px; /* Marge interne gauche */
font-size: 10px; /* Taille de la police d'écriture */
background: #123A89 url(images/footer.png) no-repeat; /* Fond de la page */
color: #2656E8; /* Couleur du texte */
text-align: justify; /* Alignement de la police d'écriture */
}
#footer a {
color: #2656E8; /* Couleur du texte */
text-decoration: none; /* Décoration du texte */
}
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">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Europa Park's Place</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<!-- HEADER -->
<div id="header">
</div>
<div id="page">
<!-- MENU -->
<div id="menu">
<h1 class="ascenseur">Accueil</h1>
<h1 class="ascenseur">Europa Park</h1>
<div>
<a href="#">Allemagne</a> <br>
<a href="#">France</a>
</div>
<div></div>
<h1 class="ascenseur">Infos Pratiques</h1>
<div>
<a href="#">Horaires</a> <br>
<a href="#">Calendrier</a> <br>
<a href="#">Tarifs</a> <br>
<a href="#">Accès</a> <br>
<a href="#">Météo</a> <br>
<a href="#">Webcams</a>
</div>
<div></div>
</div>
<!-- CONTENU -->
<div id="contenu">
<h1>Bienvenue sur Europa Park's Place, le Site !</h1>
<p class="soustitre">
Edito de Moi
</p>
<h2>Bienvenue sur Europa Park's Place, le Site !</h2>
<h3>Bienvenue sur Europa Park's Place, le Site !</h3>
<p>
Véritable portail d'Europa Park's Place, en un clin d'oeil, vous voyez en ce moment les dernières news de toutes nos annexes : Site, Forum, Blog, Spécial THN, Page Facebook, ...
</p>
<p>
<span class="nbpages">1</span> <span class="nbpagesnow">1</span>
</p>
</div>
<!-- FOOTER -->
<div id="footer">
<p>
Europa Park's Place - Copyright © 2005-2009 - Tous Droits Réservés - Optimisé pour Mozilla Firefox
</p>
</div>
</div>
</body>
</html>
Testez avec les deux navigateurs : [URL="http://www.epsplace.fr/new/"]http://www.epsplace.fr/new//URL
Après quelques recherches infructueuses, je m'en remet à vous.
J'ai construit mon site et je découvre que sous IE7 et FF3, le fond de ma page est décalé d'un seul petit pixel et ça se voit trop !
Que faire pour aligner tout le site de la même façon sur n'importe quel navigateur ?
CSS :
/*** CORPS DU SITE ***/
body {
margin: 0; /* Marges externes */
padding: 0; /* Marges internes */
background: #123A89 url(images/header.png) no-repeat top center; /* Fond de la page */
width: 100%; /* Largeur de la boite */
font-size: 13px; /* Taille de la police d'écriture */
color: #FFFFFF; /* Couleur du texte */
font-family: Verdana; /* Type de police d'écriture */
text-align: center; /* Alignement de la police d'écriture */
}
/*** HEADER ***/
#header {
height: 392px; /* Hauteur de la boite */
}
h1 {
color: #FFD700; /* Couleur du texte */
font-size: 16px; /* Taille de la police d'écriture */
font-weight: bold; /* Graisse de la police d'écriture */
padding-left: 20px; /* Marge interne gauche */
height: 20px; /* Hauteur de la boite */
background: url(images/h1.png) no-repeat; /* Fond de la page */
}
h2 {
color: #FFD700; /* Couleur du texte */
font-size: 14px; /* Taille de la police d'écriture */
font-weight: bold; /* Graisse de la police d'écriture */
padding-left: 30px; /* Marge interne gauche */
}
h3 {
color: #FFD700; /* Couleur du texte */
font-size: 12px; /* Taille de la police d'écriture */
padding-left: 40px; /* Marge interne gauche */
}
a img {
border: 0;
}
a {
color: #FFD700; /* Couleur du texte */
text-decoration: none; /* Décoration du texte */
}
a:hover {
font-weight: bold; /* Graisse de la police d'écriture */
}
/*** CONTENU ***/
#page {
width: 1020px; /* Largeur de la boîte */
margin: auto; /* Marges externes */
padding: 0; /* Marges internes */
background: url(images/fondpage.png) repeat-y center; /* Fond de la page */
}
#menu {
float: left; /* Flottement d'une boîte */
width: 200px; /* Largeur de la boîte */
margin: 10px; /* Marges externes */
margin-left: 20px; /* Marge externe gauche */
font-size: 11px; /* Taille de la police d'écriture */
text-align: left; /* Alignement de la police d'écriture */
padding: 10px; /* Marges internes */
border: 1px solid white; /* Epaisseur/Style/Couleur des bordures */
line-height: 200%; /* Interligne du bloc */
}
#contenu {
width: 707px; /* Largeur de la boîte */
margin: 0; /* Marges externes */
margin-left: 270px; /* Marge externe gauche */
text-align: justify; /* Alignement de la police d'écriture */
line-height: 140%; /* Interligne du bloc */
padding: 10px; /* Marges internes */
}
#contenu p {
padding: 5px; /* Marges internes */
}
/*** FOOTER ***/
#footer {
clear: both; /* Colle la boite sous toutes les autres */
width: 1000px; /* Largeur de la boîte */
height: 40px; /* Hauteur de la boîte */
margin: auto; /* Marges externes */
margin-bottom: 30px; /* Marge externe inférieure */
padding-top: 2px; /* Marge interne gauche */
padding-left: 22px; /* Marge interne gauche */
font-size: 10px; /* Taille de la police d'écriture */
background: #123A89 url(images/footer.png) no-repeat; /* Fond de la page */
color: #2656E8; /* Couleur du texte */
text-align: justify; /* Alignement de la police d'écriture */
}
#footer a {
color: #2656E8; /* Couleur du texte */
text-decoration: none; /* Décoration du texte */
}
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">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Europa Park's Place</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<!-- HEADER -->
<div id="header">
</div>
<div id="page">
<!-- MENU -->
<div id="menu">
<h1 class="ascenseur">Accueil</h1>
<h1 class="ascenseur">Europa Park</h1>
<div>
<a href="#">Allemagne</a> <br>
<a href="#">France</a>
</div>
<div></div>
<h1 class="ascenseur">Infos Pratiques</h1>
<div>
<a href="#">Horaires</a> <br>
<a href="#">Calendrier</a> <br>
<a href="#">Tarifs</a> <br>
<a href="#">Accès</a> <br>
<a href="#">Météo</a> <br>
<a href="#">Webcams</a>
</div>
<div></div>
</div>
<!-- CONTENU -->
<div id="contenu">
<h1>Bienvenue sur Europa Park's Place, le Site !</h1>
<p class="soustitre">
Edito de Moi
</p>
<h2>Bienvenue sur Europa Park's Place, le Site !</h2>
<h3>Bienvenue sur Europa Park's Place, le Site !</h3>
<p>
Véritable portail d'Europa Park's Place, en un clin d'oeil, vous voyez en ce moment les dernières news de toutes nos annexes : Site, Forum, Blog, Spécial THN, Page Facebook, ...
</p>
<p>
<span class="nbpages">1</span> <span class="nbpagesnow">1</span>
</p>
</div>
<!-- FOOTER -->
<div id="footer">
<p>
Europa Park's Place - Copyright © 2005-2009 - Tous Droits Réservés - Optimisé pour Mozilla Firefox
</p>
</div>
</div>
</body>
</html>
Testez avec les deux navigateurs : [URL="http://www.epsplace.fr/new/"]http://www.epsplace.fr/new//URL
A voir également:
- Fond décalé entre IE et FF
- Comment mettre une vidéo en fond d'écran - Guide
- Ie tab - Télécharger - Outils pour navigateurs
- Fond d'écran carousel - Forum Xiaomi
- Bill ie cork ✓ - Forum Consommation & Internet
- Faites afficher avec un fond coloré les cellules qui contiennent une valeur comprise entre 250 et 350. - Forum VB / VBA
1 réponse
Bonjur
Tu as un problème sous tous les navigateur IE8, IE7, Opera 10, Chrome3, FF3, Safari.
Pour Internet Explorer 7 utilise les commentaires conditionnels si besoin. Pour IE8 si ta page s'affiche bien dans Firefox par exemple tu ne devrais pas avoir de problème.
Essaye avec un width;1007px; à la place du 1020px dans le div page, ça semble fonctionner, à voir ce que ça donne sur les autres navigateurs. A voir au footer, car il sera décalé peut-être au niveau des margin ou du width qui je ne vois pas ce qu'il vient faire là ?!
Tu as un problème sous tous les navigateur IE8, IE7, Opera 10, Chrome3, FF3, Safari.
Pour Internet Explorer 7 utilise les commentaires conditionnels si besoin. Pour IE8 si ta page s'affiche bien dans Firefox par exemple tu ne devrais pas avoir de problème.
Essaye avec un width;1007px; à la place du 1020px dans le div page, ça semble fonctionner, à voir ce que ça donne sur les autres navigateurs. A voir au footer, car il sera décalé peut-être au niveau des margin ou du width qui je ne vois pas ce qu'il vient faire là ?!
J'ai testé avec tes modifications, le fond se cale bien sous le header avec IE7 et FF3, mais l'ombre à droite est coupée et c'est le footer qui se retrouve décalé... Je continue à chercher en tatonnant mais pour l'instant, rien de correct... une idée ?
Bonne journée !