Div problèmatique avec ie7

Question

michelmaguin

14 Oct 2010 à 23:14

Bonjour,

après quelques modifications couronnées de succès dans mon code css ( grace à alsacreation, merci Smiley biggrin

) j'ai quand même une div qui est franchement positionnée trop bas,

voici mon code je vois pas ou est l'erreur Smiley confus

, la div concernée est ".block" elle regroupe le bloc texte principale de ma page.

#wrapper{
width:890px; margin:0 auto
}

.Style2{
font-size: 12px
}

.Style3{
font-size: 9px
}

a{
color:#333;
text-decoration:none
}

a:hover{
color:#CE341F;
text-decoration:none
}

body{
background:url(img/fond.png) no-repeat top center #FFFFFF;
padding: 0px 0px 20px 0px;
margin: 0px 0px 20px 0px;
font-family:Arial, Helvetica, sans-serif;
}

#logo{
background:url(img/logo.png) no-repeat top center;
width:188px;
height:234px;
float:left;
margin:-165px 0px 0px 50px;
padding:0
}

#labyrinthe{
background:url(img/laby.png) no-repeat top center;
width:167px;
height:355px;
float:left;
margin:90px 0px 0px -200px;
padding:0
}

#top-text{

font-size:12px;
color:#333;
width:400px;
line-height:150px;
text-align:right;
padding:0;
margin:0px 0px 0px 425px;
}

#conteneur{
width:889px;
margin:0px auto;
padding:0
}

#menu{
margin:0px;
padding:0
}

#menu ul li{
list-style:none;
float:left;
padding:0;
}

#menu ul li a{
display:block;
text-decoration:none;
text-align:center;
font-size:14px;
color:#333333;
line-height:47px;
}

#menu ul li a.bt1{
height:74px;
width:100px;
background:url(img/bt1.png) no-repeat top left;
}

#menu ul li a.bt2{
height:74px;
width:104px;
background:url(img/bt2.png) no-repeat top left;
}

#menu ul li a.bt3{
height:74px;
width:135px;
background:url(img/bt3.png) no-repeat top left;
}

#menu ul li a.bt4{
height:74px;
width:131px;
background:url(img/bt4.png) no-repeat top left;
}

#menu ul li a.bt5{
height:74px;
width:127px;
background:url(img/bt5.png)no-repeat top left;
}

#menu ul li a:hover{
background-position:bottom left;
}

.block {
max-width:545px;
margin:0px 0px 0px 250px;
padding:0;
}

.img {
float:right;
margin:10px 0px 5px 10px;
padding:0
}

p{
font-size:12px
}

.text{
text-align:justify;
color:#333;
font-size:1em
}

.titre h1{
font-weight:bold;
color:#CE341F;
font-size:12px;
padding:0;
margin:0px 0px 0px 0px
}

.bas{

margin:70px 0px 80px 290px;
padding:0px;
font-size:10px
}


#brel{
width:180px;
height:80px;
text-align:left;
font-size:10px;
float:left;
margin:455px 0px 0px -200px;
padding:0}

.jacques{
font-weight:bold;
width:180px;
height:80px;
text-align:right;
font-size:9px;
float:left;
margin:3px 0px 0px 0px;
padding:0}

Merci d'avance Smiley cligne

Modifié par michelmaguin (17 Oct 2010 - 10:34)

lkadiss

18 Oct 2010 à 11:38

t'as pas un lien où l'on peut voir la page, ce sera plus simple

michelmaguin

18 Oct 2010 à 17:00

Re,

depuis j'ai changer mon code mais le problème persiste, voici:

/*Style*/
 
.Style2{
font-size: 12px
}
 
.Style3{
font-size: 9px
}
 
a{
color:#333;
text-decoration:none
}
 
a:hover{
color:#CE341F;
text-decoration:none
}
 
p{
font-size:12px
}
 
.titre h1{
font-weight:bold;
color:#CE341F;
font-size:12px;
}
 
/*conteneur*/
 
#wrapper{
width:890px; margin:0 auto
}
 
body{
background:url(img/fond.png) no-repeat top center #FFFFFF;
padding: 0px 0px 20px 0px;
margin: 0px 0px 20px 0px;
font-family:Arial, Helvetica, sans-serif
}
 
#top-text{
 
font-size:12px;
color:#333;
width:400px;
line-height:150px;
text-align:right;
padding:0;
margin:0px 0px 0px 425px;
}
 
#conteneur{
width:889px;
margin:0px auto;
padding:0
}
 
/*Colonne de gauche*/
 
#colonne_gauche{
width:180px;
margin:-170px 0px 0px 35px;
float:left
}
 
#logo{
background:url(img/logo.png) no-repeat top center;
width:188px;
height:234px;
float:left;
margin:0px;
padding:10px
}
 
#labyrinthe{
background:url(img/laby.png) no-repeat top center;
width:167px;
height:355px;
float:left;
margin:0px;
padding:0px 0px 10px 0px
}
 
#brel{
width:180px;
height:80px;
text-align:left;
font-size:10px;
float:left;
margin:0px;
padding:0}
 
.jacques{
font-weight:bold;
width:180px;
height:80px;
text-align:right;
font-size:9px;
float:left;
margin:0px;
padding:0}
 
/*menu*/
 
#conteneur_menu{
height:80px;
width:890px;
margin:0px auto;
}
 
#menu ul li{
list-style:none;
float:left;
padding:0;
}
 
#menu ul li a{
display:block;
text-decoration:none;
text-align:center;
font-size:14px;
color:#333333;
line-height:47px;
}
 
#menu ul li a.bt1{
height:74px;
width:100px;
background:url(img/bt1.png) no-repeat top left;
}
 
#menu ul li a.bt2{
height:74px;
width:104px;
background:url(img/bt2.png) no-repeat top left;
}
 
#menu ul li a.bt3{
height:74px;
width:135px;
background:url(img/bt3.png) no-repeat top left;
}
 
#menu ul li a.bt4{
height:74px;
width:131px;
background:url(img/bt4.png) no-repeat top left;
}
 
#menu ul li a.bt5{
height:74px;
width:127px;
background:url(img/bt5.png) no-repeat top left;
}
 
#menu ul li a:hover{
background-position:bottom left;
}
 
 
#bloc_principal{
width:890px;
margin:0px auto
}
 
.block {
max-width:545px;
margin:0px 0px 0px 250px;
padding:0;
}
 
.img {
float:right;
margin:10px 0px 5px 10px;
padding:0
}
 
.text{
text-align:justify;
color:#333;
font-size:1em
}
 
/*bas de page*/
 
#footer{
width:890px;
margin:50px 0px 20px 0px
}
 
.bas{
line-height:50px;
margin:0px 0px 0px 290px;
padding:0px;
font-size:10px
}

Modifié par michelmaguin (22 Oct 2010 - 22:03)

lkadiss

18 Oct 2010 à 18:06

je viens d'essyaer rapidement sous ie 6, si tu enlevesss les deux conteneurs "conteneur_menu" et "bloc_principal" en bidouillant les margin tu devrais y arriver.

michelmaguin

22 Oct 2010 à 22:09

Tout va beaucoup mieux sur ie6, ie7, Firefox et aussi sur ie8 mais... Smiley ohwell

> sur ie8 le bas de page ne fais pas apparaitre le bas du fond de page. donc rien de vraiment grave mais c'est pour moi encore un fabuleux mystère...

Voici mon code

/*Style*/

.Style2{
font-size: 12px
}

.Style3{
font-size: 9px
}

a{
color:#333;
text-decoration:none
}

a:hover{
color:#CE341F;
text-decoration:none
}

p{
font-size:12px
}

.titre h1{
font-weight:bold;
color:#CE341F;
font-size:12px;
}

/*conteneur*/

#wrapper{
width:889px; margin:0 auto
}

body{
background:url(img/fond.png) no-repeat top center #FFFFFF;
padding: 0px 0px 20px 0px;
margin: 0px 0px 20px 0px;
font-family:Arial, Helvetica, sans-serif
}

#top-text{
font-size:12px;
color:#333;
width:400px;
line-height:150px;
text-align:right;
padding:0;
margin:0px 0px 0px 425px;
}

#conteneur{
margin:0px auto;
padding:0
}

/*Colonne de gauche*/

#colonne_gauche{
width:200px;
margin:-150px 0px 0px 30px;
float:left}

#logo{
background:url(img/logo.png) no-repeat top center;
width:188px;
height:234px;
margin:0px auto;
padding:0px 0px 40px 0px
}

#labyrinthe{
background:url(img/laby.png) no-repeat top center;
width:167px;
height:355px;
margin:0px auto;
padding:0px 0px 10px 0px
}

#brel{
width:188px;
height:80px;
text-align:left;
font-size:10px;
margin:0px auto;
padding:0}

.jacques{
font-weight:bold;
width:188px;
height:80px;
text-align:right;
font-size:9px;
float:left;
margin:0px;
padding:0}

/*menu*/

#menu ul li{
list-style:none;
float:left;
}

#menu ul li a{
display:block;
text-decoration:none;
text-align:center;
font-size:14px;
color:#333333;
line-height:47px;
}

#menu ul li a.bt1{
height:74px;
width:100px;
background:url(img/bt1.png) no-repeat top left;
}

#menu ul li a.bt2{
height:74px;
width:104px;
background:url(img/bt2.png) no-repeat top left;
}

#menu ul li a.bt3{
height:74px;
width:135px;
background:url(img/bt3.png) no-repeat top left;
}

#menu ul li a.bt4{
height:74px;
width:131px;
background:url(img/bt4.png) no-repeat top left;
}

#menu ul li a.bt5{
height:74px;
width:127px;
background:url(img/bt5.png) no-repeat top left;
}

#menu ul li a:hover{
background-position:bottom left;
}

.block {
width:545px;
margin:0px 0px 0px 265px;
}

.img {
float:right;
margin:10px 0px 5px 10px;
padding:0
}

.text{
text-align:justify;
color:#333;
font-size:1em
}

/*bas de page*/

#footer{
width:500px;
margin:50px 0px 20px 0px;
float:left
}

.bas{
text-align:center;
line-height:50px;
font-size:10px;
margin:0px
}

lkadiss

24 Oct 2010 à 23:42

salut,

désolé mais sur ton lien, j'ai exactement la même sous firefox 3 que sur ie 8.
As tu trouvé le problème ou le problème a disparu ?

michelmaguin

25 Oct 2010 à 10:37

Hello,
ben en fait sur FireFox3 tu peux voir le bas de la page (bord arrondis),
alors que sur ie8 la toute fin du bas de page (bord arrondis) est caché... mais sur ie7 il est visible, il manque vraiment quelques pixels...

Bien à toi.

Sujet clos

CSS et mise en forme, CSS3

Div problèmatique avec ie7