28172 sujets

CSS et mise en forme, CSS3

[Résolu] Marge verticale en trop sous IE6

Bonjour,

Tout d'abord félicitation pour votre site AlsaCreations, qui est devenu une véritable référence en france !

J'ai un petit problème de mise en page CSS sous internet explorer 6.
J'ai effectué une recherche sur Google, puis sur ce forum, et je ne trouve aucune réponse a mon problème!

Sur une maquette de site web, je veux a deux endroit créer une séparation verticale de largeur 100% et d'une hauteur de 13px.

J'ai donc créér en CSS une class nommé "séparation" dont le code est le suivant :
.separation { /** Placé sous le header et au dessus du footer **/
background-image:url(../img/design/border1.gif);
background-repeat:repeat-x;
height:13px;
}


J'ai appliqué cette class a 2 div, placés a 2 endroits differents.
L'affichage est parfait sous FF et IE7, mais IE6 (encor lui!!) m'affiche une marge verticale sous cette séparation de quelques pixel (je dirais peut etre environ 5px).
Et ceci aux deux endroit ou j'ai placé cette div.

Je ne comprend vraiment pas d'où il me sort cette marge ! Et je suis pratiquement sur qu'elle dépend de cette class "séparation".

Voici les codes complets:

CSS :

* {
margin:0;
padding:0;
}

body {
}

.spacer {
clear:both;
visibility:hidden;
}


#header {
background-color:#FF9933;
height:165px;
background-image:url(../img/design/header.png);
background-repeat:no-repeat;
}

#logo {
float:left;
padding-top:5px;
padding-left:20px;
}

#menu {
float:right;
padding-right:15px;
padding-top:137px;
position:absolute;
right:0px;
}

#menu li {
list-style:none;
display:inline;
float:left;
width:95px;
height:29px;
background-image:url(../img/design/onglet.gif);
background-repeat:no-repeat;
padding-right:2px;
text-align:center;
}

#menu li, #menu a {
   height: 29px;
   display: block;
   
}

#menu a {
text-decoration:none;
color: #333333;
text-transform:capitalize;
padding-top:5px;
}

#menu a:hover {
color:#CC0000;
background-image:url(../img/design/onglet_hover.gif);
background-repeat:no-repeat;
}

.separation { /** Placé sous le header et au dessus du footer **/
background-image:url(../img/design/border1.gif);
background-repeat:repeat-x;
height:13px;
}

/*********************PAGE****************************/
#page {
height:auto;
}

#sous_menu {
background-color:#fff;
background-image:url(../img/design/ombre_menu.jpg);
background-repeat:no-repeat;
background-position:top right;
width:210px;
height:520px;
float:left;
margin-right:15px;
}

#sous_menu h2 {
background-image:url(../img/design/h2.jpg);
background-repeat:no-repeat;
background-position:bottom left;
text-transform:capitalize;
font-size:20px;
font-weight:bold;
padding-top:15px;
padding-left:10px;
padding-bottom:5px;
}

#content {
background-color:#fff;
background-image:url(../img/design/content_bg.jpg);
background-repeat:repeat-x;
height:auto;
padding:15px;
}

/*********************FOOTER***********************/
#footer {
background-color:#FF9933;
height:64px;
background-image:url(../img/design/footer.png);
}


HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<link href="css/maquette.css" rel="stylesheet" type="text/css" />
<link href="css/texte.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" href="css/ie6.css" type="text/css" />
    <![endif]--> 
</head>

<body>
	<div id="header">
    <img id="logo" src="img/design/logo.gif" alt="AVH 78" />
        <ul id="menu">
            <li><a href="#">menu</a></li>
            <li><a href="#">menu</a></li>
            <li><a href="#">menu</a></li>
            <li><a href="#">menu</a></li>
            <li><a href="#">menu</a></li>
            <li><a href="#">menu</a></li>
        </ul>
    </div><!--/header--> 
    <div class="separation"></div>
    <div id="page">
    	<div id="sous_menu">
        	<h2>titre catégorie</h2>
            <ul>
            	<li><a href="#">menu</a></li>
            	<li><a href="#">menu</a></li>
            	<li><a href="#">menu</a></li>
            	<li><a href="#">menu</a></li>
            	<li><a href="#">menu</a></li>
            	<li><a href="#">menu</a></li>
            </ul>
        </div>
<!--/sous_menu-->
        <div id="content">    
    	
        	<h3>Titre</h3>
             <img src="img/RubanRR.jpg" style="float:right; padding:5px;" />
          <p>  Intellectum est enim mihi quidem in multis, et maxime in me ipso, sed paulo ante in omnibus, cum M. Marcellum senatui reique publicae concessisti, commemoratis praesertim offensionibus, te auctoritatem huius ordinis dignitatemque rei publicae tuis vel doloribus vel suspicionibus anteferre. Ille quidem fructum omnis ante actae vitae hodierno die maximum cepit, cum summo consensu senatus, tum iudicio tuo gravissimo et maximo. Ex quo profecto intellegis quanta in dato beneficio sit laus, cum in accepto sit tanta gloria.        </p>  
        <p>    Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret.         </p> 
         <p>   Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.         </p>
         </div>
      <!--/content-->
    <hr class="spacer" />     
    </div><!--/page-->
    <hr class="spacer" />
    <div class="separation"></div>
    <div id="footer"></div>

</body>
</html>


J'en profite au passage pour vous signaler 2 liens qui semblent mort sur votre page "A lire avant de poster dans ce salon (Méthodologie) !".
Il s'agit des liens des billets 3 et 4, lorsque je clique dessus j'obtient ce message "The URI you submitted has disallowed characters."

Je vous remercie d'avance pour l'aide que vous pourriez m'apporter. Je vais quant a moi de mon coté continuer a essayer de trouver une solution.

Cordialement,

THeDoGG
Modifié par TheDoGG (01 Feb 2009 - 05:31)
À priori, je dirais que c'est un vieux problème d'IE6 qui ne fige pas les hauteurs correctement, et qui applique toujours une hauteur équivalente à la hauteur d'une ligne de texte à tout élément de type bloc.

Tu peux donc tenter un font-size: 1px pour ces blocs de séparation.

Et bien sûr identifier au préalable si l'espace indésirable fait partie de ton bloc de séparation, ou s'il est externe à ce bloc, ça aurait été pas mal. Tu aurais pu le faire grâce à une couleur de fond sur tes blocs de séparation, par exemple. Smiley cligne
Effectivement, le font-size à résolu mon problème ! Smiley ravi
Merci beaucoup pour votre aide et vos conseils.
Sujet clos
Aller à