28173 sujets

CSS et mise en forme, CSS3

Problème marge/ barre de défilement IE

bonsoir

Bon j'ai un problème j'ai deux barre de défilement qui appraisse sous IE et je n'arrive pas à le reglé. Smiley fache

Le bug se situe dans:

div#matiere {
float: right;
width: 470px;
min-height: 400px;
margin: 50px;
background-color: #FFFFFF;
}

avec margin. pourtant normalement il y a juste la place (la largeur de l'ensemble fait 770px, le menu 200px, et 570px pour le contenu ou 470+100 de marge

je suppose qu'il faudrait faire un code juste pour EI mais je ne sais pas quoi. Smiley confused

voila mon CSS total:

html, body {
height: 100%;
margin: 10px 0;
background-color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#global {
width: 770px;
min-height: 100%;
margin: 0 auto;
position: relative;
background-position: center;
text-align: left ;
}
div#bandeau {
position:relative;
height: 150px;
width: 770px;
background-image: url(../Images/bandeau.gif);
background-repeat: no-repeat;
}
div#bandeau h1 {
margin: 0;
position: absolute;
bottom: 91px;
left: 350px;
font-size: 26px;
color: #FFFFFF;
width: 200px;
font-family: Arial, Helvetica, sans-serif;
}
div#contenu {
width: 770px;
background-image: url(../Images/repetion.gif);
background-repeat: repeat-y;
padding-bottom: 50px;
overflow: auto;
background-color: #FFFFFF;
}
div#menu {
float: left;
width: 200px;
min-height: 400px;
background-image: url(../Images/menu.gif);
background-repeat: no-repeat;
}
ul#menu {
list-style: none;
margin: 0;
padding-top: 125px;
padding-left: 65px;
}
ul#menu li a {
display: block;
height: 30px;
line-height: 30px;
padding-left: 0px;
margin: 2px 0;
text-decoration: none;
font-size: 14px;
color: #000000;
font-weight: bold;
}
ul#menu li a:hover {
background-position: left bottom;
color: #91d5f1;
}
div#matiere {
float: right;
width: 470px;
min-height: 400px;
margin: 50px;
background-color: #FFFFFF;
}
div#matiere h2 {
font-size: 14px;
}
div#matiere h3 {
font-size: 12px;
padding-top: 100;
font-style: normal;
font-weight: normal;
}
div#pieddepage {
height: 50px;
width: 770px;
background-image: url(../Images/pieddepage.gif);
background-repeat: no-repeat;
font-size: 9px;
text-align: center;
}


si vous avez une idée !

Merci
Je met aussin mon Xhtml:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<!--[if lte IE 6]>
<link href="../Css/ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<link href="../Css/general.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="global">
<div id="bandeau">
<h1>A PROPOS</h1>
</div>
<div id="contenu">
<div id="menu">
<ul id="menu">
<li><a href="acceuil.html" title="Première étape : le code (X)HTML">.:: Acceuil</a></li>
<li><a href="illustration.html" title="Deuxième étape : le positionnement">.:: Illustration</a></li>
<li><a href="graphisme.html" title="Troisiéme étape : couleurs & images de fond">.:: Graphisme</a></li>
<li><a href="design.html" title="Quatrième étape : le menu">.:: Design</a></li>
<li><a href="Photo.html" title="Cinquième étape : titres & liens">.:: Photo</a></li>
<li><a href="A propos.html" title="Sixième étape : ajustements pour IE">.:: A Propos</a></li>
</ul>
</div>
<div id="matiere">

</div>
</div>
<div id="pieddepage">Site optimisé sous Firefox pour 1025/768 minimum. © copyright 2007
</div>
</div>
</body>
</html>
Smiley confused Smiley confused Bon je tien a m'excuser de ce poste, je vien de voir que c'est un bug très courrant D'IE de crée une double marge gauche en foat.

Et qu'il est ciblé dans un des tuto de ce merveilleux site.
Sujet clos
Aller à