28172 sujets

CSS et mise en forme, CSS3

Décalage d'environ 5px vers le haut retro-compatibilté IE 8

Bonjour à vous tous,

Je débute avec les CSS et j'ai un petit soucis avec de décalage vers le haut de mon contenu vers le haut de quelques pixels sur plusieurs sites ?

Est-ce qu'on peut faire quelque chose contre ça ?!

Ce qui est bizare c'est que c'est uniquement sur le contenu du site et non sur le tout ???


Merci d'avance pour votre aide...

Pour le css: 


@charset "utf-8";
/* CSS Document */

body{
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0;
	margin-left:0px;
	background: #FFF url(../img/bck.jpg) no-repeat center 160px;
	background-attachment: scroll;
	}
#header{
	margin-top:0px;
	margin-left: auto; 
  	margin-right: auto; 
  	width: 700px;
	}
#global{width:962px; 
		margin:0 auto;
		height:630px;
		text-align:center;
		}
#footer{
	margin-top:190px;
	margin-right:auto;
	margin-bottom:10px;
	margin-left:auto;	
	font-family: "Times New Roman", Times, serif;
	font-size:10px;
	color: #333;
	font-weight:normal;
	text-transform:uppercase;
	}
#bt{
	margin-top:150px;
	margin-left: auto; 
  	margin-right: auto; 
	width:962px;
	}
.bt1{
	width:220px;
	border:0px;
}
.bt1:hover{
	border:0px;
	width:220px;
	background-image:url(../img/btnhover_01.png);
	cursor:pointer;
}
.bt2{
	border:0px;
	width:220px;
}
.bt2:hover{
	border:0px;
	width:220px;
	background-image:url(../img/btnhover_02.png);
	cursor:pointer;
}
.bt3{
	border:0px;
	width:222px;
}
.bt3:hover{
	border:0px;
	width:222px;
	background-image:url(../img/btnhover_03.png);
	cursor:pointer;
}
.bt4{
	border:0px;
	width:220px;
}
.bt4:hover{
	border:0px;
	width:220px;
	background-image:url(../img/btnhover_04.png);
	cursor:pointer;
}
a{	color: #333;
	cursor:pointer;
	text-decoration:none
	outline:none;
}
a:hover{
	cursor:pointer;
	text-decoration:underline;}
a:visited{
	cursor:pointer;
	text-decoration:none;}
a:focus{
	outline:none;
	}


et pour le 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>Si on passait au vert</title>
<link rel=”shortcut icon” type=”image/x-icon” href=”/img/favicon.ico” />
<link rel=”icon” type=”image/png” href=”/img/favicon.png” />
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<script type="text/javascript" src="js/mootools-1.2.3-core-yc.js"></script>
<script type="text/javascript" src="js/mootools-1.2.3.1-assets.js"></script>
<script type="text/javascript" src="js/milkbox-yc.js"></script>
<link href="css/milkbox/milkbox.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="global">
<div id="header"><img src="img/header.png" alt="ET SI ON PASSAIT AU VERT" width="700" height="160" /></div>

<div id="bt">
  <table width="962"  height="85" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="left" valign="top"><a href="img/album1/001b.jpg" rel="milkbox[album1]" Title="Ambiance" border="0"><img src="img/btn_01.png" height="85" width="220" class="bt1" alt="Ambiance"/></a>
        <?php
$dir = "img/album1/";
// Ouvre un dossier bien connu, et liste tous les fichiers
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false) {	
        if ($file != "." && $file != ".." && $file != "001b.jpg") {	
		
   echo '<a href="'.$dir.$file.'" rel="milkbox[album1]" title="Ambiance"></a>'."\n";
		}
        }
        closedir($dh);
    }
}
?></td>
      <td align="left" valign="top"><a href="img/album2/001b.jpg" rel="milkbox[album2]" Title="Apéritif" border="0"><img src="img/btn_02.png" height="85" width="220" class="bt2" alt="Apéritif"/></a>
        <?php
$dir = "img/album2/";
// Ouvre un dossier bien connu, et liste tous les fichiers
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
	
        while (($file = readdir($dh)) !== false) {	
        if ($file != "." && $file != ".." && $file != "001b.jpg") {	
		
   echo '<a href="'.$dir.$file.'" rel="milkbox[album2]" title="Apéritif"></a>'."\n";
		}
        }
        closedir($dh);
    }
}
?></td>
      <td align="left" valign="top"><a href="img/album3/001b.jpg" rel="milkbox[album3]" Title="Diner" border="0"><img src="img/btn_03.png" height="85" width="222" class="bt3" alt="Diner"/></a>
        <?php
$dir = "img/album3/";
// Ouvre un dossier bien connu, et liste tous les fichiers
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
		
        while (($file = readdir($dh)) !== false) {	
        if ($file != "." && $file != ".." && $file != "001b.jpg") {	
		
   echo '<a href="'.$dir.$file.'" rel="milkbox[album3]" title="Diner"></a>'."\n";
		}
        }
        closedir($dh);
    }
}
?></td>
      <td align="left" valign="top"><a href="img/album4/001b.jpg" rel="milkbox[album4]" Title="Soirée Dansante" border="0"><img src="img/btn_04.png" height="85" width="220" class="bt4" alt="Soirée Dansante"/></a>
        <?php
$dir = "img/album4/";
// Ouvre un dossier bien connu, et liste tous les fichiers
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false) {	
        if ($file != "." && $file != ".." && $file != "001b.jpg") {	
		
   echo '<a href="'.$dir.$file.'" rel="milkbox[album4]" title="Soirée Dansante"></a>'."\n";
		}
        }
        closedir($dh);
    }
}
?>
</td>
    </tr>
  </table>
</div>
<div id="footer">et si on passait au vert - 2009 - <a href="mailto:@gmail.com">DESIGN</a></div>
</div>
</body>
</html>

Modifié par actarus44 (18 Mar 2011 - 19:37)
Bonjour,

Sans le code HTML exact (tel que produit par le PHP), les images et autres éléments, on ne peut pas tester en conditions réelles (ou tester tout court). L'idéal serait de donner l'adresse d'une page présentant le problème, en précisant bien avec quels navigateurs et quels versions tu constates un problème, sur quels éléments ou blocs de contenus.

Sans ça on ne peut pas vraiment t'aider.

Juste une chose: un décalage vertical de quelques pixels pour des paragraphes ou des titres, ça n'est pas forcément «normal» mais c'est courant et pas toujours évitable... et pas toujours problématique. En CSS, le positionnement horizontal se gère assez bien, mais le positionnement vertical dépend de nombreux paramètres, dont certains que l'on ne peut pas contrôler (la taille exacte occupée par un texte, par exemple). Il faut gérer ça en souplesse, et prévoir une extensibilité en hauteur des principaux conteneurs.
Oui c'est vrai désolé Smiley confus

Alors le site ce trouve à cette adresse : http://www.sionpassaitauvert.com et c'est au niveau du div id="bt".

Dans IE 8 tout est ok mais si j'active la retro-compatibilité le div bt monte d'environ 2-3 px...

Voilà et ceci est récurant sur plusieurs des sites que j'essaye de faire... est-ce moi qui fait une bêtise ou est-ce normal ?

Merci
C'est l'image dans ton header qui pousse le tout vers le bas.
Passe la en block, et ton site remontera de 4-5 pixels sur tout les navigateurs.
j'ai donc essayé avec ce css pour le header


#header{
	margin-top:0px;
	margin-left: auto; 
  	margin-right: auto; 
  	width: 700px;
	display:block;
	}


mais le #bt remonte toujours ??
Non, tu dois mettre le display block sur l'image elle même :

#header img{
    display: block;
}


Edit : petite explication, par défaut ton image est traitée comme un élément de type inline ç-à-d comme du texte.
Et donc, tout comme du texte, il y a une marge descendante qui est réservée (pour les lettres comme pqj etc). En le passant en bloc tu t'affranchit de cette marge que tout les navigateurs ne respectent pas.
Modifié par publicaccount (03 Sep 2009 - 12:09)
Sujet clos
Aller à