Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1360 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Différence borders dans browsers - résolu

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Différence borders dans browsers - résolu

n°1487753
jeromeke
Posté le 07-12-2006 à 01:45:29  profilanswer
 

Bonjour, il semble que les borders sont gèrer d'une manière differente dans les browsers,
comment y remédier?  
 

Citation :


<html>
<header>
<title></title>
<link rel="stylesheet" type="text/css" href="border.css" />
</header>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
 
body
 {
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 }
 
#box1
 {
 position: absolute;
 top: 20px;
 left: 20px;
 width: 50px;
 height: 50px;
 background-color: blue;
 }
 
#box2
 {
 position: absolute;
 top: 20px;
 left: 100px;
 width: 50px;
 height: 50px;
 background-color: yellow;
 border: solid 10px black;
 }


 
Dans internet explorer il met un border à l'extérieur du box 2,
dans mozilla à l'intérieur.


Message édité par jeromeke le 07-12-2006 à 06:27:08
mood
Publicité
Posté le 07-12-2006 à 01:45:29  profilanswer
 

n°1487755
dwogsi
Défaillance cérébrale...
Posté le 07-12-2006 à 01:57:35  profilanswer
 

t'aurais pas un lien vers ta page à la place?
Et puis c'est pas "internet" mais "internet explorer"!

 

A mon avis ça doit certainement etre une petite différence de rendu qui te donne cette impression.
J'espère que ton code est simplement expérimental au moins?


Message édité par dwogsi le 07-12-2006 à 02:00:03
n°1487756
jeromeke
Posté le 07-12-2006 à 02:03:49  profilanswer
 

Voici mon problème (oui! C'est le même code!!!):
 
http://jerome.monprojet.info/border.jpg
 
Je cherche juste à éviter ce genre de problèmes pour de futurs projets.
 
(corrigé  :jap:)


Message édité par jeromeke le 07-12-2006 à 02:11:55
n°1487762
gatsu35
Blablaté par Harko
Posté le 07-12-2006 à 03:15:57  profilanswer
 

ceci est simple,

 

Tu as oublié de specifier un doctype sur ta page HTML.
Le doctype est le document qui va spécifier au navigateur, voila, j'ai fait mon site correctement, donc tu dois te conformer à ce document. En plus simple, le doctype est obligatoire pour un site en xHTML. Et il permet d'eviter bien des déboires.

 

Petite lecture sur le doctype : http://pompage.net/pompe/doctype/

 

Ensuite pourquoi IE se comporte différemment que firefox ?
Il y a deux modes de comportement pour les navigateurs :
-Le mode quirks qui est un mode de compatibilité
-Le mode strict qui est un mode conforme aux standards du W3C

 

En plus de ce mode de comportement, il y a une chose importante à savoir, c'est le modele de boite.
Imagine ton div comme une boite, sur cette boite tu peux lui indiquer des parametres de dimension et des marges et des bordures.
Dans l'ordre et partant de l'exterieure vers l'intérieur on a :
margin, border, padding, puis le contenu.
Il existe 2 modèles de boites : le modele microsoft et le modele W3C.

 

Le modele microsoft est différent du modele de boite du W3C.
Lorsque l'on spécifie une largeur sur un div, cette largeur est appliquée à l'exterieure des bordures.
si mon div a les parametres suivants :
border:10px; padding:10px; width:100px.
Mon div fera 100px de large.

 

Dans le modele de boite W3C, la largeur s'applique à l'intérieure du contenu.
si mon div a les parametres suivants :
border:10px; padding:10px; width:100px.
Mon div fera 140px de large (10+10+100+10+10).

 


Mais quel est le lien entre le modele de boite et le mode de rendu ?
En fait c'est simple, lorsque IE est en mode quirks (doctype manquant ou foireux) il applique le modele de boite microsoft sur les blocks (c'est ce qui t'arrive), mais en mode strict, il applique le modele de boite W3C.
Il faut savoir que tous les autres navigateurs (opera, konqueror, safari, firefox) opteront pour le modèle de boite W3C.

 

C'est exactement ce qui arrive dans ton exemple.

 


Donc il te faut absoluement commencer avec un bon doctype, prend du xHTML transitionnal ca suffira.

 


PS: IE a une autre particularité chiante (et c'est pareil pour IE7). Meme si un doctype est bon, (genre xHTML 1.0 transtiionnal....), SI on a quelque chose autre qu'un espace avant le doctype, IE repasse automatiquement en mode quirks.

 


PS2: Si une page est en mode quirks, IE7 se comporte exactement comme IE6, c'est une politique de microsoft et je les comprend car 90% des sites webs sur le net sont pourris et ne passeraient pas correctement sous IE7.


Message édité par gatsu35 le 07-12-2006 à 03:17:30
n°1487764
jeromeke
Posté le 07-12-2006 à 04:22:53  profilanswer
 

Merci beaucoup!!!!!!!!!!!!!
 
Tout est si clair maintenant :)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Différence borders dans browsers - résolu

 

Sujets relatifs
Différence de performance entre Access et SQL Server ?[Résolu] JDBC Taille memoire des resultset
détection javascript on [résolu][RESOLU] [AJAX] probleme d'envoi d'un "+" par POST
[Résolu] FPDF et image (de mauvaise qualité)[RESOLU]Erreur SQL : ORA-01008: Toutes les variables ne sont pas liées
[PHP/MySQL] [RESOLU] GRANT, Problèmes de droits[Résolu] Vérification en javascript d'un tableau dynamique en PHP
[résolu] Probleme avec les sessionsgros problème de décalage/alignement avec IE [résolu, nouveau prob...]
Plus de sujets relatifs à : Différence borders dans browsers - résolu


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR