28173 sujets

CSS et mise en forme, CSS3

[RESOLU]Pb de bordure entre IE & Mozilla

Bonjour à tous,
j'ai recherché mon pb mais aucun topic n'a pu m'aidé, espérons que vous pourrez le faire si il y a une solution.

j'utilise ce code :

border-width:1px;
border-style:solid;
border-color:#426E7E;

pour faire une bordure.
Sauf que sur IE la bordure se trouve a l'interieur alors que sous mozilla elle se trouve à l'exterieur.
Exemple:
un cadre de 100px sur 100px fera bien 100px sur 100px bordure incluse sous IE alors que sur Mozilla le cadre fera 102px sur 102px avec les bordures.
Alors y a t'il une propriété qui me permettra d'avoir le même résultats sous IE et Mozilla ?

Merci d'avance et un grand bravo à ce site et à ce forum.
Modifié par xtremdisc (15 Feb 2005 - 22:58)
Administrateur
Salut et bienvenue ici,

Puisque c'est ton premier message, je t'invite à lire les Règles du forum qui t'indiqueront qu'il est préférable de baliser correctement ton code, pour faciliter la lecture à tous Smiley smile

Bonne continuation Smiley cligne
Administrateur
Pour répondre à ta question, il s'agit du problème très classique du Modèle de boites : IE interprête les dimensions des éléments différemment des autres navigateurs lorsque des bordures ou marges internes (padding) sont spécifiés.

Une Recherche sur le forum t'aurait donné des pistes.

Tu trouveras des solutions sur ce lien :
http://www.alsacreations.com/articles/compatibilite/

EDIT : comme c'est une question fréquemment posées, tu la trouveras sur la FAQ du forum : http://forum.alsacreations.com/faq
Modifié par Raphael (15 Feb 2005 - 14:54)
Merci beaucoup et désolé, je n'avais pas fait le rapprochement avec ce pb.

J'ai trouvé une solution qui regle mon pb de dimension entre les 2 navigateurs en changeant mon DOCTYPE.
avant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

après :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Mon problème actuel est que ce nouveau DOCTYPE bloque mon javascript sur Mozilla, pb que j'ai eut et que j'ai résolu en mettant le 1er doctype...

Si quelqu'un a une solution pour que ma mise en page et mon javascript fonctionne bien, je l'en remercie beaucoup.
Administrateur
Hmm, changer de doctype n'est pas la solution, comme l'explique le lien que je t'ai donné vers Openweb Smiley ohwell
Merci Raphael,

J'ai bien compris le problème avec le lien openweb que tu m'a donné mais c'est au niveau solution que je bloque.
il ne parle que des doctype ou sinon il donne cette partie de code concernant IE 5.x :
.vert { 
  background-color: #00ff00;
  padding: 0 20px;
  border-left: 5px solid #00ff00;
  border-right: 5px solid #00ff00; 
  width: 300px;
  voice-family: "\"}\"";
  voice-family:inherit;
  width: 250px;
}
html>body .vert {
  width: 250px;
}

mais j'ai ce probleme pour IE 6 ... alors que faire ?
Administrateur
Si tu veux éviter tout hack et bidouille, je te recommande la solution de http://www.alsacreations.com/articles/compatibilite/ :

a écrit :
Il faut éviter de donner un "width" à un élément qui possède des padding latéraux (gauche/droite) ou des bordures latérales.

Si ton élément (avec bordures) est compris dans un autre bloc, il suffit de lui donner des marges plutôt qu'un width.
En fait, il faudrait en savoir un peu plus sur ton code.
Bonjour,

Un lien vers une page fournirait peut-être plus d'informations.

Une question toute bête: spécifier la largeur de tes boîtes en % ne pourrait-il résoudre le problème?
Modifié par thierry (15 Feb 2005 - 17:12)
Oui j'ai vu ce conseil mais je suis pas super habitué à l'utilisation des marges.
Voici ce que j'utilise comme code habituellement avec donc le doctype que j'avais au début.
css:

.cadre {
position:absolute;
width:400px;
height:400px;
top:50px;
left:50px;
background-color:#FFCEA6;
border-width:1px;
border-style:solid;
border-color:#000000;
}
.interieur {
position:absolute;
width:200px;
height:200px;
left:200px;
top:0px;
background-color:#FF0000;
}

HTML:
<div class="cadre"><div class="interieur"></div></div>


Précisions par rapport à ce que tu m'a dis précedement, c'est le conteneur qui a la bordure et je veux que mon interieur se positionne collé a droite sans mordre sur la bordure.

J'ai essayer avec les marges mais je doit pas les utilisé comme il faut:
CSS version marges:
.cadre {
position:absolute;
width:400px;
height:400px;
top:50px;
left:50px;
background-color:#FFCEA6;
border-width:1px;
border-style:solid;
border-color:#000000;
}
.interieur {
position:absolute;
margin-left:200px;
margin-right:0px;
height:200px;
top:0px;
background-color:#FF0000;
}


avec la version marge l'interieur rouge ne s'affiche pas ...

Encore merci !
Administrateur
xtremdisc a écrit :
désolé le lien revois sur le le topic ... pourtant je l'ai mis entre les balise url ...
je suis vraiment pas un habitué !

Hello, pour les liens, c'est expliqué dans les Règles et la FAQ... donc si tu n'es pas habitué, il serait préférable de passer par là d'abord.

D'ailleurs il est très simple d'éditer un message plutôt que d'en poster un nouveau pour dire que l'autre n'était pas bon Smiley cligne
Merci à tous ....

J'ai trouvé une solution qui permet d'avoir la même chose sous Mozilla et IE

En fait a l'interieur des cadre à bordure je fait en sorte que le contenu force IE a mettre la vrai taille voulu (la même qui ressort sous FF) c'est a dire que les bordure se retrouve a l'exterieur, du moins horizontalement.
Sujet clos
Aller à