Bonjour à tous,
j'ai un problème de hauteur de bloc dans mon menu à gauche dans ce site : scoutorama
Sous IE6 les blocs textes font 2 pixels de plus que sous Firefox, voir beaucoup plus sous IE7, ce qui provoque un décalage énorme.
Je ne comprend pas d'où ça vient. J'ai tenté de simplifier mon code, de supprimer mes listes, pour cerner le problème, mais rien n'y fait !
Modifié par windvins (19 Jun 2007 - 20:55)
j'ai un problème de hauteur de bloc dans mon menu à gauche dans ce site : scoutorama
Sous IE6 les blocs textes font 2 pixels de plus que sous Firefox, voir beaucoup plus sous IE7, ce qui provoque un décalage énorme.
Je ne comprend pas d'où ça vient. J'ai tenté de simplifier mon code, de supprimer mes listes, pour cerner le problème, mais rien n'y fait !
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>debug_css</title>
<style type="text/css">
#menu_left{
float: left;
display:inline;/*bug IE*/
background:url(images/bg_menu_left_bottom.png) bottom no-repeat;
background-color:#FFF5DF;
padding-top:0px;
border-color:#F0D8A4;
border-style:solid;
border-width:1px;
margin-top:20px;
margin-left:30px;
width:148px;
height:auto;
}
#menu_left_dominantes{
/*titre h2*/
background:url(images/bg_menu_left_titre.png) no-repeat left top;
height:35px;
padding-left:10px;
padding-top:0px;
margin-top:0px;
margin-bottom:5px;
}
h2{
background:url(images/fleche_carree.gif) no-repeat left center;
margin-left:0px;
padding-left:20px;
margin-top:0px;
padding-top:5px;
margin-bottom:0px;
padding-bottom:5px;
margin-top: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
color:#76805E;
}
.menu_left_liste1{
/*background:url(images/puce_1.gif) no-repeat left 4px;*/
margin-top:10px;
padding-top:5px;/*5px*/
margin-left:5px;/*10px*/
padding-left:10px;/*11px*/
margin-right:0px;
padding-right:0px;
margin-bottom:0px;
padding-bottom:5px;/*5px*/
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:11px;
letter-spacing:1px;
vertical-align:bottom;
}
.menu_left_line{
display:block;
position:relative;
left:0px;
/*background-color:#3399FF;*/
margin-top:0px;
padding-top:0px;
margin-left:0px;
padding-left:0px;
padding-bottom:0px;
margin-bottom:0px;
padding-right:0px;
margin-right:0px;
margin:0px;
padding:0px;
border-bottom-color:#FDE9BD;
border-style:solid;
border-bottom-width:1px;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;
font-size:0px;
font-weight:100;
width:100%;
height:0px;
}
.liste_2{
margin-top:0px;
padding-top:0px;
padding-left:0px;
margin-left:36px;
list-style-image:url(images/puce_2.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:100;
color:#76805E;
}
</style>
</head>
<body>
<div id="menu_left">
<div id="menu_left_dominantes">
<h2>DOMINANTES</h2>
</div>
<span class="menu_left_liste1">
Civisme
</span>
<span class="menu_left_line"></span>
<span class="menu_left_liste1">
Expression
</span>
<span class="menu_left_line"></span>
<span class="menu_left_liste1">
Conaissance de Dieu
</span>
<span class="menu_left_line"></span>
<span class="menu_left_liste1">
Nature
</span>
<span class="menu_left_line"></span>
<span class="menu_left_liste1">
Campisme
</span>
<span class="menu_left_line"></span>
<span class="menu_left_liste1">
Communication
</span>
<span class="menu_left_line"></span>
<span class="menu_left_liste1">
Sport
</span>
<!--<ul id="menu_left_liste1"> -->
<!-- <ul class="liste_2">
<li>Echauffements</li>
<li>Olympiades</li>
<li>Jeux</li>
</ul> -->
<!--</ul> -->
<span class="menu_left_line"></span>
<span class="menu_left_liste1">
Artisanat
</span>
<span class="menu_left_line"></span>
<div id="menu_left_dominantes">
<h2>PRATIQUES</h2>
</div>
<span class="menu_left_liste1">
Articles
</span>
<span class="menu_left_line"></span>
<span class="menu_left_liste1">
Jeux
</span>
<span class="menu_left_line"></span>
<span class="menu_left_liste1">
Quizz
</span>
<h5></h5>
</div>
</body>
</html>
Modifié par windvins (19 Jun 2007 - 20:55)
. Commence donc d'abord par nettoyer les erreurs de ton code et faire en sorte que ta page passe la validation. Ensuite, tu pourras chercher pourquoi les navigateurs interprètent différemmment le même code (valide). (J'ai quand même ma petite idée sur tes <h4> vides, mais... attendons que tu nettoies)
