Problème de div arrondi sous IE

**Sword'** · 31/10/2006, 09h02

Bonjour a tous.
Je suis en train de coder un site et je rencontre un serieux problème avec internet explorer

Voici tout d'abord le lien vers le test que j'ai créer: http://artsgamer.free.fr/

Vous voyez que sous firefox, tout marche mais sous IE, c'est la cata'

Voici mes codes:

XHTML:

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" >
   <head>
       <title>Test</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style_test.css" />
   </head>
   <body>
 
     <div id="gauche">
	 </div>
 
	 <div id="droite">
	 </div>
 
	<div id="milieu">
	    <p> Test </p>
	 </div>
 
 
   </body>
</html>

CSS:

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
23
24
25
26
27
28
29
30
31
32
33
34
35
 #gauche
{
   height: 30px;
   width: 34px;
 
   background-image: url("footer_01.gif");
 
   float: left; /* Pour bien mettre l'image a gauche */
}
 
#droite
{
   height: 30px;
   width: 34px;
 
   background-image: url("footer_03.gif");
 
   float: right; /* Pour bien mettre l'image a droite */
   margin-right: 47%;
}
 
#milieu
{
  margin-left: 0px; /* A modifier en fonction des marges */
 
   height: 30px;
   width: 50%;
 
   background-image: url("footer_02.gif");
}
 
p
{
  margin: 0px;
}

Merci d'avance pour votre aide.

. : Sword' : .

**Roromix** · 31/10/2006, 09h16

Correction :

XHTML :

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
<!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" >
   <head>
       <title>Test</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style_test.css" />
   </head>
   <body>
     <div id="gauche">
	 </div>
 
	<div id="milieu">
	    <p> Test </p>
	 </div>
 
	 <div id="droite">
	 </div>	 
   </body>
</html>

CSS :

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
23
24
25
26
27
28
29
30
31
32
33
34
#gauche
{
   height: 30px;
   width: 34px;
 
   background-image: url("footer_01.gif");
 
   float: left; /* Pour bien mettre l'image a gauche */
}
 
#droite
{
  float: left;
   height: 30px;
   width: 34px;
 
   background-image: url("footer_03.gif");
}
 
#milieu
{
  float: left;
  margin-left: 0px; /* A modifier en fonction des marges */
 
   height: 30px;
   width: 50%;
 
   background-image: url("footer_02.gif");
}
 
p
{
  margin: 0px;
}

Et si tu veut centrer le tout, met tes trois div dans un div avec proprietes : margin-left:auto;margin-right:auto;

**trotters213** · 31/10/2006, 09h19

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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" >
   <head>
       <title>Test</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style_test.css" />	  
   </head>
   <body>
     <div id="gauche"></div>	  
	 <div id="droite"></div>	 
	<div id="milieu"><p> Test </p></div>	 
   </body>
</html>

Code CSS :

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
23
24
25
* {
margin:0px;
padding:0px;
} 
 
#gauche {
height:30px;
width:34px;
background-image: url("footer_01.gif");
float:left;
}
 
#droite {
height: 30px;
width: 34px;		
background-image: url("footer_01.gif");
float:left;
}
 
#milieu {
height: 30px;
width: 50%;		
background-image: url("footer_01.gif");
float:left;
}

[edit]mince j'ai 3 minutes de retard

**Roromix** · 31/10/2006, 09h22

3 minutes de retard et un div 'milieu' mal placé je crois et la meme image dans tous les div !

**trotters213** · 31/10/2006, 09h30

Envoyé par Roromix

3 minutes de retard et un div 'milieu' mal placé je crois et la meme image dans tous les div !

pour le div milieu c'est ma faute, je fais jamais gaffe à ce genre de counaille mais pour les photo c'est parce que j'avais fait un test avec des couleurs donc j'avais la cagne de remettre chaque image mais t'as pas tort, j'ai pas été bon sur ce coup là