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.