CSS - Bordures et contenant

WRInaute passionné
Je rencontree un probleme avec les largeurs de divs lorsqu'on leuir applique une bordure.

J'ai un contenant qui fait 760 Px et à une bordure de 1px
Je place un div de largeur 100%.
Si je mets une bordure de 10 px à ce div, voila ce qu'il se passe:

sous opera:
-A gauche la bordure se calle contre celle de mon contenant. Le contenu du div se retrouve decallé de 10 px sur la gauche (normal)
-A droite, Le div est donc plus large que le fond car il a été decalé de 10px et sa largeur reste egale a 100% soit 760px.
MAIS: le contenant reste à 760 px et ne se redimensionne aps automatiquement, donc le div deborde

Sous IE:
Pareil sauf que le contenant s'ajuste automatiquement.

Ce que je voudrais c'est eviter cette difference d'interprétation, dans un sens ou dans l'autre ca m'est égal!
Je précise que j'ai mis un doctype xhtml sans prologue xml donc pas de probleme de box model
 
WRInaute impliqué
C'est IE qui a tort : lorsque la largeur d'un élément est fixée, elle ne doit pas être modifiée.
En fait, je suppose que tu as du faire un contenant avec une règle du genre :
Code:
#contenant
{
  width : 760px;
}
chose qui devrait garantir la largeur de ton contenant, quoi qu'il arrive (contenu plus pletit ou plus grand), mais IE ne le voit pas de cette oreille (ben oui forcément avec ses oreilles il voit mal :roll: ) : il interprète ton width comme un min-width, et l'adapte donc si ça dépasse.
Si tu veux avoir une largeur adaptative avec IE ET avec les navigateur qui respectent les CSS, il te faudrait un hack du genre :
Code:
#contenant
{
  width : 760px;
}
body>#contenant
{
  min-width : 760px;
  width : auto;
}
IE n'interprète pas le symbole ">" et ne lira donc pas la 2ème rêgle.

Si tu veux une largeur qui ne dépasse pas de la fenêtre quel que soit le cas, il te faudra utiliser des unités relatives et vaincre les erreurs d'IE.
Je te conseille ce site.
 
Discussions similaires
Haut