Bug IE/FF taille de div

**BnA** · 07/03/2007, 13h59

Bonjour!

J'ai un nouveau petit problème...

J'ai un DIV général, contenant un DIV pour le titre, et un DIV pour le contenu.

Voici les codes HTML et CSS pour que vous vous fassiez une idée, ainsi que 2 screenshots correspondants au bug dans FF et au bug dans IE (car aucun des deux n'affichent ce "tableau" à ma convenance).

HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="note">
 
   <div id="noteTitle">
      TITRE
   </div>
   <div id="noteContent">
      CONTENU
   </div>
</div>

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
 
#note{
width:60%;
margin:auto;
border:2px solid #FF9900;
background-color:#E7F0FF;
color:#3E6B92;
}
 
#noteTitle{
width:100%;
color:#3E6B92;
background-color:#FF9900;
font-weight:bold;
font-size:14pt;
font-style:italic;
padding:5px;
 
}
 
#noteContent{
width:100%;
padding:10px;
}

Image sous FireFox:

Image sous IExplorer (6):

Voilà.

Vous l'aurez compris, j'aimerais que la zone orange du titre se termine contre la bordure du cadre (ni avant, ni après

)

Seulement, je ne vois pas où j'aurais pu faire une erreur dans mon code CSS...

Mais peut-être suis-je simplement bigleux...

Merci d'avance pour vos réponses!!

Petite précision: j'ai enlever le padding:5px (#noteTitle), ça règle le problème sous FireFox uniquement. Le décalage est plus important encore sous IE.

**XtoX** · 07/03/2007, 14h48

Pour moi, l'exemple que tu donne fonctionne parfaitement sous IE et sous Firefox. De plus, il ne reproduit pas les copie d'écran que tu fournis. Donc difficile de résoudre le problème.

**BnA** · 07/03/2007, 14h57

Wow...

Voici le code complet, peut-être est-ce du à un conflit ou que sais-je...

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Maquette - Grammaire allemande</title>
<link href="maquette.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="container">
<h1>DECLINAISON DE L’ARTICLE AU NOMINATIF</h1>
 
<p>En allemand, on décline les articles selon leur fonction dans la phrase. </p>
 
<p>Il y a <strong>4 cas</strong>: </p>
<ul>
<li>le nominatif;</li>
<li>l’accusatif;</li>
<li>le datif;</li>
<li>le génitif.</li>
</ul>
 
<p>Nous étudierons le nominatif et l’accusatif.</p>
 
<p>Il y a <strong>3 genres</strong>:</p> 
<ul>
<li>masculin;</li>
<li>féminin;</li>
<li>neutre.</li>
</ul> 
<p>(le pluriel est le même pour les 3 genres).</p>
 
 
<p>Le nominatif  correspond aux fonctions  sujet / attribut</p>
 
<table width="100%">
  <tr>
    <th scope="row" rowspan="2" width="110px">Sujet</th>
    <td><strong>Der</strong> Tisch ist braun</td>
    <td><strong>Die</strong> Lampe ist schön</td>
    <td><strong>Das</strong> Bett ist neu</td>
  </tr>
  <tr>
    <td><strong>Ein</strong>  Wagen ist teuer</td>
    <td><strong>Eine</strong> Wohnung ist praktisch</td>
    <td><strong>Ein</strong> Haus ist bequem</td>
  </tr>
</table>
<br />
<table width="100%">
  <tr>
    <th rowspan="2" scope="row" width="110px">Attribut</th>
    <td>Das ist <strong>der</strong> Tisch</td>
    <td>Das ist <strong>die</strong> Lampe</td>
    <td>Das ist <strong>das</strong> Bett</td>
  </tr>
  <tr>
    <td>Das ist <strong>ein Tisch</strong></td>
    <td>Das ist <strong>eine Lampe</strong></td>
    <td>Das ist <strong>ein Bett</strong></td>
  </tr>
</table>
     <br />
 
 
<p>Déclinaison de l’article défini au nominatif [le, la, les]</p>
<table width="100%">
  <tr>
    <th scope="col" width="110px">&nbsp;</th>
    <th scope="col">Masculin</th>
    <th scope="col">Féminin</th>
    <th scope="col">Neutre</th>
    <th scope="col">Pluriel</th>
  </tr>
  <tr style="text-align:center;">
    <th scope="row">Nominatif</th>
    <td>der</td>
    <td>die</td>
    <td>das</td>
    <td>die</td>
  </tr>
</table>
 
<p>Déclinaison de l’article indéfini au nominatif [un, une, des]</p>
<table width="100%">
  <tr>
    <th scope="col" width="110px">&nbsp;</th>
    <th scope="col">Masculin</th>
    <th scope="col">Féminin</th>
    <th scope="col">Neutre</th>
    <th scope="col">Pluriel</th>
  </tr>
  <tr style="text-align:center;">
    <th scope="row">Nominatif</th>
    <td>ein</td>
    <td>eine</td>
    <td>ein</td>
    <td>-</td>
  </tr>
</table>
<br />
<br />
<div id="note">
 
	<div id="noteTitle">
		NB:
	</div>
	<div id="noteContent">
 
		<p>1. Ein n’a pas de forme au pluriel.</p>
		<ul>
			<li>Ich habe Kinder. <i>[J’ai des enfants]</i></li>
		</ul>
 
 
		<p>2. L’adjectif possessif (mein, dein, sein, ihr, unser, euer, Ihr) se décline comme l’article indéfini ein.</p>
		<ul>
			<li>Das ist mein Freund.  <i>[C’est mon ami]</i></li>
			<li>Das ist meine Freundin. <i>[C’est mon amie]</i></li>
			<li>Das ist mein Haus. <i>[C’est ma maison]</i></li>
			<li>Das sind meine Kinder. <i>[Ce sont mes enfants]</i> </li>
		</ul>
 
		<p>3. La négation kein se décline comme ein (sauf pluriel comme l’article défini (die))</p>
 
		<ul>
			<li>Ich habe keinen Freund. <i>[Je n’ai pas d’ami]</i></li>
			<li>Ich habe keine Freundin. <i>[Je n’ai pas d’amie]</i></li>
			<li>Ich habe kein Haus. <i>[Je n’ai pas de maison]</i></li>
			<li>Ich habe keine Kinder. <i>[Je n’ai pas d’enfants]</i></li
		></ul>
 
	</div>
</div>
 
</div>
</body>
</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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
/* CSS Document */
 
 
body{
color:white;
background-color:#3E6B92;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
}
 
#container{
}
 
 
#note{
width:60%;
margin:auto;
border:2px solid #FF9900;
background-color:#E7F0FF;
color:#3E6B92;
}
 
#noteTitle{
width:100%;
color:#3E6B92;
background-color:#FF9900;
font-weight:bold;
font-size:14pt;
font-style:italic;
/*padding:5px;*/
}
 
#noteContent{
width:100%;
padding:10px;
}
 
table{
border:1px solid #FF9900;
}
 
h1{
text-align:center;
}
 
strong{
color:#FF9900;
}
 
i{
font-size:9pt;
}

**XtoX** · 07/03/2007, 15h13

modifie ton fichier css comme cela :

Code :

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

1
2
3
4
#noteContent{
width:100%;
padding:0px;
}

**BnA** · 07/03/2007, 15h19

Ok merci, je vois où est le problème...

J'ai mis ceci, car le texte #noteContent était trop près de la bordure du cadre.

Code :

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

1
2
3
4
5
6
 
#noteContent{
width:95%;
margin:auto;
padding-top:5px;
}

En tous cas, merci!!

**Candygirl** · 07/03/2007, 15h25

Par défaut, un élément de type bloc occupe tout l'espace disponible.

En mettant le width de 100% + un padding, l'élément devient plus large que son conteneur et IE6 agrandit alors aussi le conteneur (#note à fond gris dans ton cas) alors que FF laisse dépasser l'élément.

Pour garder un padding il t'aurais juste suffi de supprimer le width de 100%:

Bug IE/FF taille de div

CSS

Vue hybride

Discussions similaires

Partager

Partager