28172 sujets

CSS et mise en forme, CSS3

Bug ie 7 decalage colonnes

bonsoir,
jai un decalage de colonne de gauche vers la droite sur ie 7 sur
http://www.ecuriesiauvedressage.fr/actualites/competitions-dressage/ecuries/actualites.php

mon code css
/* Général */
body {
background: #EDEAEB;
font-family:"times new roman",sans-serif;
color:#336699;
font-size:100%;
height:100%;
text-align:center;
}
.scroll {overflow:auto;
width: 50%;
height: 50%;
border: 1px black solid;
}


a {
color: #336699;
}
a:hover, a:focus {
color: #336699;
}
strong {
color: #336699;
}

/* Bloc central contenant #navigation et #contenu */
#centre {
background: url(../images/colonnes.jpg) repeat-y; /* Voir -> Note 1 */
padding-bottom: 50px;
overflow: auto;
text-align: left;
}

/* Navigation */
#navigation {
float:left;
margin:0 auto;
width : 200px;
}
#tableau td {
text-align : center;
}
#navigation a {
color: #336699;
}


/* Contenu principal */
#contenu {
color: #336699;
text-align:left;
/* -> 2 */
}
#contenu a {
color: #336699;
}
#contenu a:hover, #contenu a:focus {
color: #336699;
}
#contenu strong {
color: #336699;
}


/* --- POSITIONNEMENT --- */

/* Page */
body {
margin : 0 auto;
width:1000px;
}
#global {
width:1024px; /* -> 3 */
margin: 0 auto; /* -> 4 */
text-align: center;
}

/* En-tête */
#entete {
background: url(../images/entete.jpg) no-repeat;
color: #336699;
height:201px;
width:1024px;
}
#entete h1 {
margin: 0 auto;
position:relative;
left: 30px;
font: 4em times, serif;
}

#entete h2 {
margin: 0 auto;
position:relative;
bottom:1px;
left: 30px;
font: 2em times, serif;
}
#entete h1 img {
float: left;
margin: 7px 20px 10px 0;
}
#entete .sous-titre {
margin: 4px 0 15px 0;
}

/* Bloc central contenant #navigation et #contenu */
#centre {
width: 100%; /* -> 5 */
height:100%;
overflow: hidden; /* -> 5 */

background: url(../images/colonnes.jpg) repeat-y; /* Voir -> Note 1 */
padding-bottom: 50px;
}

/* Menu de navigation */
#navigation {
width: 200px;
float: left; /* -> 6 */
position:absolute;
height:100%;
}
#navigation ul {
margin: 0;
padding:0;
list-style: none;
padding: 20px 10px 20px 10px;
}
#navigation a {
display: block;
height: 20px; /* -> 7 */
line-height: 20px;
font-size: 1em;
text-decoration: none;
padding-left: 35px;
margin: 2px 0;
}

/* Contenu */
#contenu {
margin-left: 200px; /* -> 8 */
padding: 10px 20px;
text-align:left;
}
#contenu > :first-child {
margin-top: 10px;
}
#contenu p, #contenu li {
line-height: 1.5;
}

/* Pied de page */
div#pied p {
margin:0 auto;
text-align:center; /* -> 8 */
background: url(../images/footer.jpg) no-repeat center top; /* Voir -> Note 1 */
margin-left:200px;
padding: 15px 20px 10px 0;
font-size: .80em;
margin-top:-25px;
position:relative;
}


/* Mention de copyright */
#copyright {
margin:0 auto ;
font-size: 1em;
text-align: center;
color: #336699;
}

[/code]


le menu de gauche c'est #navigation
jai fais une feuille de style ie7 speciale en metant witdh en pourcentagemais rien a faire maintenant me suis peut etre trompé et jai mis cela dans ma page html

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="imagess/ie.css" media="screen" />
<![endif]-->

ps : mon doc type : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


merci de votre aide
Bonjour, peut-être que IE n'aime pas ça:
#navigation {
float:left;
margin:0 auto; /* inutile */
width : 200px; 
}
et ça:
#navigation {
	width: 200px;
	float: left; /* -> 6 */  
	position:absolute;  /* inutile */
	height:100%;
	}
faudrait voir en enlevant les inutiles. À toi de faire les tests. Je te donne des pistes, je n'ai pas le temps de tester.

Attention à ne pas confondre class="navigation" et id="navigation".
Sujet clos
Aller à