Bug mise en page css sous IE6+, les autre ok.

**yann123456** · 19/01/2009, 20h09

Bonjour,

Je rencontre un problème de positionnement avec ie6.

J'ai testé le design sur ie7, firefox, safari, chrome, c'est parfait et un petit test sur ie6, c'est la cata.

J'ai voulu laisser tomber, mais en regardant mes stats je constate qu'il y a prés de 20% de mes internautes qui sont encore avec ie6. Donc j'aimerais résoudre mon pb.

J'ai raccourci le code au minimum pour ne voir que le pb.

D'abord le problème en images (celle du haut c'est la bonne)

Le html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="en_tete">    
 
    <div id="ligne2">
        <div id="menu1"><img src="images/menu_header1.jpg"/></div>    
        <div id="menu2"><p><a href="index.html">Accueil</a><a href="index.html">Accueil</a><a href="index.html">Accueil</a><a href="index.html">Accueil</a><a href="index.html">Accueil</a></p></div>
        <div class="fin_flottant"></div>
    </div>   
 
</div>
 
</body>
</html>

et le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
body {width:906px; margin:auto; background-color:#ffffff; margin-top:10px; margin-bottom:20px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif, serif; font-size:0.9em;}
.fin_flottant {clear:both;}
 
/* Le header */
#en_tete {width:906px;}
#ligne2 {width:906px; height:42px;}
#menu1 {float:left; width:277px; height:42px;}
#menu2 {margin-left:277px; width:629px; height:42px; background-image:url(images/menu_header2.jpg); background-repeat:no-repeat;}
#menu2 p {margin:0px; padding:0px; padding-top:10px;}
#menu2 a {color: #FFFFFF; font-size:17px; padding-left:60px;}

Si quelqu'un peut m'aider, la je ne vois pas.

Merci d'avance [cligne]

**Macmillenium** · 19/01/2009, 21h20

Bonsoir,

Le width 629px est l'origine du problème comme tu as aussi un margin-left:277px ...
Pour que cela fonctionne correctement sous IE6, il faut que le width soit par défaut 100% de son conteneur parent or ce n'est pas ton cas.

Tu as 2 choix :
- Soit tu enlève le width:629px :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#menu2 { margin-left:277px; height:42px; background-image:url(images/menu_header2.jpg); background-repeat:no-repeat;}

- Soit tu enlève le margin-left:277px et tu ajoute un float:left

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#menu2 { float:left; width:629px; height:42px; background-image:url(images/menu_header2.jpg); background-repeat:no-repeat;}

A toi de voir

mais en regardant mes stats je constate qu'il y a prés de 20% de mes internautes qui sont encore avec ie6.

Oui malheureusement

**yann123456** · 19/01/2009, 22h36

La première solution n'a pas fonctionné, la deuxième impec

Merci à toi.

Bug mise en page css sous IE6+, les autre ok.

CSS

Discussions similaires

Partager

Partager