Nouveau probleme de mise en page avec IE

**Death83** · 21/10/2005, 23h22

Salut a tous,

bon IE fait encors des sienne.

Voila mon petit bout de code concerné:

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
<div style="background-color:blue; height:autopx;width:772px; margin:auto;">
    <div style="background-color:red; width:100%; height: 131px">
 
    </div> 
    <div style="margin:0; padding:0; width:100%;[b] height:auto[/b]; background-color:orange; overflow:hidden;">
       <div style="margin: 0; padding: 0; width: 12px; height: 100%; background-color: yellow;float:left;overflow:hidden;">
       </div>
       <div style="margin: 0; padding: 0; background-color:cyan; width: 748px; height: auto;float:left; overflow:hidden;">
          <[content]>
       </div>
       <div style="margin: 0; padding: 0; width: 12px; height:100%; background-color: purple;float:left;overflow:hidden;">
       </div>
 
    </div>
    <div style="margin:0; padding:0; width:100%; height:22px; background-color:green;">
    </div><div style="clear: both; margin:0; padding:0;"></div>
 
 
</div>

Voila il se trouve que lorsque la partie en grasse en relative (% ou auto) le div concerné ne prend pas toute la hauteur. (ce qui se fait sur FF).

Regarder par vou même avec IE ici: http://formations.univ-lemans.fr:8001/emploi/

et normalement les cadre jaune et mauve devrait recouvrir le cadre orange.

Savez vous ce que je peut faire?

**Death83** · 21/10/2005, 23h25

le liens marche pas (normal c'est sous aegir) donc voici un petit screenshot:

http://manganime.0.free.fr/fichiermanganime.0/IE.jpg

**spirou** · 21/10/2005, 23h43

Salut,

Juste en changeant cette ligne :

Code :

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

1
2
3
4
5
6
 
<div style="margin:0; padding:0; width:100%;[b] height:auto[/b]; background-color:orange; overflow:hidden;"> 
 
EN
 
<div style="margin:0; padding:0; width:100%; height:100%; background-color:orange; overflow:hidden;">

Et cela fonctionne chez moi avec IE.

**Death83** · 21/10/2005, 23h55

c'est deja lalgine que j'avais
je voulais mettre le code en gras pour montrer le height qui dérangait.

Mais ca a laisser les balises.
Elle ne sont pas dans mon code

.
Tu as mis tout le code chez toi ou juste la ligne?

**spirou** · 22/10/2005, 00h04

J'ai mis tout le code avec ce doctype :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>
    </title>
  </head>
  <body>
    <div style="background-color:blue; height: 100%;width:772px; margin:auto;">
      <div style="background-color:red; width:100%; height: 131px">
 
      </div>
      <div style="margin:0; padding:0; width:100%; height:100%; background-color:orange; overflow:hidden;">
        <div style="margin: 0; padding: 0; width: 12px; height: 100%; background-color: yellow;float:left;overflow:hidden;"></div>
        <div style="margin: 0; padding: 0; background-color:cyan; width: 748px; height: auto;float:left; overflow:hidden;">
          <[content]>
        </div>
        <div style="margin: 0; padding: 0; width: 12px; height:100%; background-color: purple;float:left;overflow:hidden;">
        </div>
 
      </div>
      <div style="margin:0; padding:0; width:100%; height:22px; background-color:green;">
      </div>
      <div style="clear: both; margin:0; padding:0;">
      </div>
    </div>
  </body>
</html>

Et a première vu ça marche.

**Death83** · 22/10/2005, 11h24

De ja avec ton code le cadre principale de la page n'est plus centré au milieu avec internet explorer

.
Ca doit venir de ton doctype

**Death83** · 22/10/2005, 11h35

Comment que je dois faire.

IL commence sérieusement a m'énerver le IE, il me fait perdre beaucoup de temps a chaque fois.

**spirou** · 22/10/2005, 14h32

J'ai déjà essayé ce style de mise en page, et il y a qu'avec ce doctype que IE accepte de fonctionner.

Pour le centrage, la position absolute peut remédier au problème :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>
    </title>
  </head>
  <body>
    <div style="background-color:blue; width:772px; margin-left: -386px; left: 50%; position: absolute;">
      <div style="background-color:red; width:100%; height: 131px">
 
      </div>
      <div style="margin:0; padding:0; width:100%; height:100%; background-color:orange; overflow:hidden;">
        <div style="margin: 0; padding: 0; width: 12px; height: 100%; background-color: yellow;float:left;overflow:hidden;"></div>
        <div style="margin: 0; padding: 0; background-color:cyan; width: 748px; height: auto;float:left; overflow:hidden;">
          <[content]><br>
          <[content]><br>
          <[content]><br>
          <[content]><br>
          <[content]><br>
        </div>
        <div style="margin: 0; padding: 0; width: 12px; height:100%; background-color: purple;float:left;overflow:hidden;">
        </div>
 
      </div>
      <div style="margin:0; padding:0; width:100%; height:22px; background-color:green;">
      </div>
      <div style="clear: both; margin:0; padding:0;">
      </div>
    </div>
  </body>
</html>