[CSS Newbie] : pourquoi cette différence ?

: pourquoi cette différence ? [CSS Newbie] - HTML/CSS - Programmation

Marsh Posté le 18-01-2003 à 23:48:44    

Salut,
 
je me suis mis au CSS aujourd'hui, et ya un truc que je comprends pas, pourquoi la différence d'affichage est aussi différente entre IE et Mozilla ?
 
Internet Explorer 6 :
http://www.ifrance.com/altus/img/altusie.png
 
Phoenix 0.5 (Mozilla 1.2)
http://www.ifrance.com/altus/img/altusphoenix.png
 
Un exemple de mon code CSS :
 
 

Code :
  1. td {
  2.   text-align:left;
  3.   font-family:arial;
  4.   font-size:x-small;
  5.   color:#5d17ab;
  6.   font-weight:normal;
  7. }
  8. .tdsoustitretabmat {
  9. border: thin solid black;
  10. border-color: inherit;
  11. border-top: none;
  12. border-right: none;
  13. border-bottom: inherit;
  14. border-left: none;
  15.    font-family:arial;
  16. font: bold;
  17. color:#5d17ab;
  18.    font-weight:normal;
  19. }

 
 
"tdsoustitretabmat" c'est le style de Généralités, Compression audio et Transcodage Audio.


---------------
Ganz kühl bleiben! JM. | Section Audio
Reply

Marsh Posté le 18-01-2003 à 23:48:44   

Reply

Marsh Posté le 19-01-2003 à 01:29:36    

Plusieurs choses :  
 
- Les bordures. D'abord tu définis une bordures pour les 4 cotés avec "border: thin solid black". Ensuite tu écrases les valeurs en redéfinissant les 4 cotés un par un :
border-color: inherit; -> c'est à dire que les 4 bordures prennent la couleur de la bordure de leur parent. Il est probable qu'elle ne soit pas définie.
border-top, left, right: none -> ça efface 3 bordures. Soit.
border-botom: inherit -> ça prend les valeurs de bordure du parent, qui n'a pas de bordure. La bordure du bas est donc effacée. Mozilla a donc raison.
 
Bref tout ton bazard :
 border: thin solid black;  
 border-color: inherit;  
 border-top: none;  
 border-right: none;  
 border-bottom: inherit;  
 border-left: none;  
 
Peut se résumer par un simple :
 border-bottom: thin solid black;
 
Bref, tu te compliques la vie pour rien.
 
 
- La taille de la police : x-small c'est bien, mais dans ce cas, c'est le navigateur qui décide de la taille. Si tu veux absoluement que la taille de la police soit la même d'un navigateur à l'autre, soit tu définis la taille en pixels, soit tu ajoutes un DOCTYPE Strict (HTML 4.01 Strict, XHTML 1.0 Strict ou XHTML 1.1) Dans ce cas IE 6 va passer en mode "compatibilité avec les standards" et va utiliser une taille de police plus petite pour x-small.
Cela dit il faut essayer de perdre cette mauvaise habitude de faire un site qui soit exactement le même d'un navigateur à un autre.
 
 
Un dernière chose, quand on définit une famille de police, il faut toujours mettre un nom de police générique (serif, sans-serif ou monotype) car tout le monde n'a pas Arial.  
 
Donc au lieu de :
 font-family: arial;
 
On écrit :
 font-family: Arial, Helvetica, sans-serif;


Message édité par gm_superstar le 19-01-2003 à 01:30:04

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 19-01-2003 à 03:10:41    

Merci pour tes remarques,
j'ai compris que j'étais pas cohérent dans les définitions de styles, alors IE et Moz en faisaient qu'à leur tête :p  
 
J'ai encore une question par rapport au pseudo-frames faites avec des <div> & CSS2 : c'est moi ou il faut réécrire la "frame" de gauche (table des matières) sur chaque page ?


Message édité par altus le 19-01-2003 à 03:11:02

---------------
Ganz kühl bleiben! JM. | Section Audio
Reply

Marsh Posté le 19-01-2003 à 03:12:34    

C'est php obligatoire alors ?
 
Altus.


---------------
Ganz kühl bleiben! JM. | Section Audio
Reply

Marsh Posté le 19-01-2003 à 17:40:27    

Bon j'ai bossé un peu, voilà le résultat http://altus.host.sk/
Mais j'ai encore gardé les frames  :ange:


---------------
Ganz kühl bleiben! JM. | Section Audio
Reply

Marsh Posté le 20-01-2003 à 17:50:24    

en passant, mon collègue qui fait la base de donnée de l'intranet en Java (je vais le mettre au php ce couillon :ange: ) m'a fait faire des frames pour mettre des portions dynamiques, disant qu'il y'a pas d'autres solutions, à moins de raffraichir toute la page. Comme à la base il est pas orienté web,   je me demande si Java ne permet pas également des includes sans qu'il le sache. Kkun connais Java ?

Reply

Marsh Posté le 21-01-2003 à 22:54:39    

tu peux, si tu veux être compatible moz1+ et ie5+, faire des requêtes synchrones XML via du javascript, des xmlrpc, ou du soap ... ce qui évite de recharger la page, et qui est innovant :)
 
regarde l'exemple à cette url là:
 
 
http://webfx.nu/dhtml/xmlextras/xmlextras.html
 
 
et mieux encore, l'exemple pour de vrai :) :
 
(fo cliquer sur load :D )
 
http://webfx.nu/dhtml/xmlextras/demo.html

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed