[Html] Au pays des navigateurs boulay

Au pays des navigateurs boulay [Html] - HTML/CSS - Programmation

Marsh Posté le 31-07-2003 à 16:37:09    

C est bien marrant (enfin marrant question de point de vue :o ):
je teste une page html sur
- ie6
- opera 6
- netscape6
- opera7
 
opera 6 n'arrive a comprendre ceci : margin-top : 4%; alors que ca passe tres bien dans le validateur (css1)
il calcule les % d'une manière bien étrange, c le seul a me faire n importe quoi (cadre pas aligné dans un tablo alors que les colonnes des lignes se répartissent bien (sans parler du positionnement qui ma tellement soulé qu il est passé a la trappe... paske aucune correspondance sur les différents navigateurs... :pfff: )
 
netscape quand a lui ne comprend pas vertical-align : bottom; pas plus que text-align : right;
 
g pas eu trop de probleme avec ie6 (si si fo me croire...  :D ) et opera 7 non plus
 
mais bon ca devient navrant ce genre de différences, surtout que tout est validé par w3c...
 
je suis déçu...

Reply

Marsh Posté le 31-07-2003 à 16:37:09   

Reply

Marsh Posté le 31-07-2003 à 21:32:05    

Une page validée, n'empêche pas d'avoir un code illogique... donc interprêté différemment.
 
Opera (et les autres) calcule très bien les %... mais ça doit être le reste du code qui doit lui paraître illogique.
 
Url ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 31-07-2003 à 21:33:00    

wai je testarait bien avec mon moz

Reply

Marsh Posté le 01-08-2003 à 01:29:44    

Selon moi, faut ca passe avec IE6, Mozilla, et les ptits derniers si tu veux t'amuser c opera et IE 5.5 (encore beaucoup utilisé malheureusement) :D


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 01-08-2003 à 01:31:04    

opera tray bien [:mmmfff]
 
moz quand ca merde sur op, car il a un comportement proche de ie à mon gout :)

Reply

Marsh Posté le 01-08-2003 à 09:35:32    

pas d URL... g pas l'acces au serveur a mon boulot (je suis stagiaire...)
 
tout ce que je peux faire c mettre le code ici...
 
par contre il manquera les fichier images aussi...
 
page html :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3. <HTML>
  4. <!-- Date de création: 25/07/2003 -->
  5. <HEAD>
  6. <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <META http-equiv="Content-Style-Type" content="text/css">
  10. <TITLE>SADA Assurances</TITLE>
  11. <META name="description" content="">
  12. <META name="keywords" content="">
  13. <META name="author" content="SADA Assurances">
  14. <META name="generator" content="WebExpert 5">
  16. <LINK href="style.css" rel="stylesheet" type="text/css">
  17. </HEAD>
  19. <BODY>
  20. <DIV class="PageHaut">
  21. <TABLE class="haut" cellspacing="0" cellpadding="0">
  22.  <tr>
  23.   <td class="Z2">&nbsp;</td>
  24.   <td class="Z1">&nbsp;</td>
  25.   <td class="ImageBordure"><IMG src="logo_petit.gif" class="ImageBordure" alt="Presentation"></td>
  26.   <td class="Z1">&nbsp;</td>
  27.   <td class="ImageLien"><A href="../../www.sada.fr/vehicules_avec_index.htm"><IMG src="Images/Automobile.gif" alt="Automobile" class="ImageLien"></A></td>
  28.   <td class="Z1">&nbsp;</td>
  29.   <td class="ImageLien"><A href="../../www.sada.fr/personnes_avec_index.htm"><IMG src="Images/Personne.gif" alt="Personne" class="ImageLien"></A></td>
  30.   <td class="Z1">&nbsp;</td>
  31.   <td class="ImageLien"><A href="../../www.sada.fr/multirisque_artisans_commercants_avec_index.htm"><IMG src="Images/Professionnels.gif" alt="Professionnels" class="ImageLien"></A></td>
  32.   <td class="Z1">&nbsp;</td>
  33.   <td class="ImageLien"><A href="../../www.sada.fr/multirisque_habitation_avec_index.htm"><IMG src="Images/Habitation.gif" alt="Habitation" class="ImageLien"></A></td>
  34.   <td class="Z1">&nbsp;</td>
  35.   <td class="ImageLien"><A href="../../www.sada.fr/multirisque_immeuble_avec_index.htm"><IMG src="Images/Immeubles.gif" alt="Immeubles" class="ImageLien"></A></td>
  36.   <td class="Z2">&nbsp;</td>
  37.  </tr>
  38. </TABLE>
  39. </DIV>
  41. <DIV class="PageBas">
  42. <table class="bas" cellspacing="0" cellpadding="0">
  43.  <tr>
  44.   <td class="Z2">&nbsp;</td>
  45.   <td class="Z1" rowspan="2"><IMG src="carrevert2.gif" class="CarreVert" alt="Découvrez les avantages de la proximité"></td>
  46.   <td class="Texte">Découvrez</td>
  47.   <td class="Z1">&nbsp;</td>
  48.   <td class="TexteAuto">Automobile</td>
  49.   <td class="Z1">&nbsp;</td>
  50.   <td class="TextePers">Personne</td>
  51.   <td class="Z1">&nbsp;</td>
  52.   <td class="TextePro">Profesionnels</td>
  53.   <td class="Z1">&nbsp;</td>
  54.   <td class="TexteHab">Habitation</td>
  55.   <td class="Z1">&nbsp;</td>
  56.   <td class="TexteImm">Immeubles</td>
  57.   <td class="Z2">&nbsp;</td>
  58.  </tr>
  59.  <tr>
  60.   <td class="Z2">&nbsp;</td>
  61.   <td class="Texte2">les avantages<br/>de la proximité</td>
  62.   <td class="Z4" colspan="10">&nbsp;</td>
  63.  </tr>
  64. </table>
  65. <IMG class="Absolu" src="logo2.gif" alt="Logo">
  67. <DIV class="TexteAdresse">
  68.  <P><SPAN class="Gras">Nîmes</SPAN><BR/>
  69.   4, rue Scatisse <br/> 30934 NÎMES Cedex 9
  70.  <P> Tél. : 04 66 62 70 00<br/>Fax : 04 66 38 26 60 <br/>www.sada.fr
  72.  <P class="GroupeDevk"> Groupe <SPAN class="TexteVert"> DEVK </SPAN><DIV class="TexteRelatif">A chaque passion son assurance.</DIV>
  74. </DIV>
  76. </DIV>
  78. </BODY>
  79. </HTML>


 
et la feuille de style

Code :
  1. @charset "iso-8859-1";
  2. BODY {
  3.   margin-top: 2px;
  4.   margin-right: 2px;
  5.   margin-bottom: 2px;
  6.   margin-left: 2px;
  7.  
  8. }
  10. DIV.PageHaut {
  11. background : #c0e080;
  12. border : 1px solid green;
  13. }
  15. DIV.PageBas {
  16. border-bottom : 1px solid green;
  17. border-right : 1px solid green;
  18. border-left : 1px solid green;
  19. }
  22. TABLE.haut {
  23. width : 100%;
  24. }
  26. TABLE.bas {
  27. width : 100%;
  28. }
  30. TD.Z1 {
  31. width : 2.2%;
  32. }
  33. TD.Z2 {
  34. width : 4.4%;
  35. }
  36. TD.Z4 {
  37. width : 60%;
  38. }
  40. IMG.ImageLien {
  41. width : 100%;
  42. border : 0px;
  43. }
  45. TD.ImageLien {
  46. vertical-align : bottom;
  47. margin-bottom : 0px;
  48. width : 10.8%;
  49. }
  51. IMG.ImageBordure {
  52. width : 99%;
  53. border-top : 1px solid green;
  54. border-right : 1px solid green;
  55. border-left : 1px solid green;
  56. margin-top : 4%;
  57. }
  59. TD.ImageBordure {
  60. margin-bottom : 0px;
  61. width : 24%;
  62. }
  64. IMG.CarreVert {
  65. margin-right : 0px;
  66. width : 100%;
  67. }
  69. TD.Texte {
  70. font-weight : bold;
  71. font-size : 18pt;
  72. border-right : 1px solid green;
  73. border-left : 1px solid green;
  74. padding-left : 1em;
  75. padding-top : 5px;
  76. width : 24%;
  77. }
  79. TD.Texte2 {
  80. font-weight : bold;
  81. font-size : 18pt;
  82. border-right : 1px solid green;
  83. border-left : 1px solid green;
  84. border-bottom : 1px solid green;
  85. padding-left : 1em;
  86. padding-bottom : 10px;
  87. width : 24%;
  88. }
  90. TD.TexteAuto {
  91. font-weight : bold;
  92. font-size : 11pt;
  93. color : #ffffff;
  94. background : red;
  95. text-align : center;
  96. width : 10.8%;
  97. }
  99. TD.TextePers {
  100. font-weight : bold;
  101. font-size : 11pt;
  102. color : #ffffff;
  103. background : green;
  104. text-align : center;
  105. width : 10.8%;
  106. }
  108. TD.TextePro {
  109. font-weight : bold;
  110. font-size : 11pt;
  111. color : #ffffff;
  112. background : blue;
  113. text-align : center;
  114. width : 10.8%;
  115. }
  117. TD.TexteHab {
  118. font-weight : bold;
  119. font-size : 11pt;
  120. color : #ffffff;
  121. background : yellow;
  122. text-align : center;
  123. width : 10.8%;
  124. }
  126. TD.TexteImm {
  127. font-weight : bold;
  128. font-size : 11pt;
  129. color : #ffffff;
  130. background : orange;
  131. text-align : center;
  132. width : 10.8%;
  133. }
  135. DIV.TexteAdresse {
  136. font-size : 10pt;
  137. padding-left : 7em;
  138. }
  140. P.GroupeDevk {
  141. font-weight : bold;
  142. line-height : 16pt;
  143. }
  145. SPAN.Gras {
  146. font-weight : bold;
  147. }
  148. SPAN.TexteVert {
  149. font-weight : bold;
  150. color : green;
  151. }
  153. IMG.Absolu {
  154. float : right;
  155. width : 20%;
  156. margin-right : 20%;
  157. }
  159. DIV.TexteRelatif {
  160. text-align : right;
  161. font-weight : bold;
  162. font-size : 11pt;
  163. margin-right : 2em;
  164. margin-bottom : 1em;
  165. }


 
oui c un peu lourd a mettre le code comme ca mais je pe pas faire autrement...
 
petite question en passant :
j ai une image dans une cellule d'un tableau : g défini une taille pour la cellule (en % bien sur) et l'image a 100% dans la cellule ==> probleme, si l'image de base est plus grande que la taille définie en % de la page, l'image agrandie la cellule et donc agrandie la page par la meme occasion...
ya pas d autre solution que de redimensionner l'image (cela ne me pose aucun problème mais bon...)

Reply

Marsh Posté le 01-08-2003 à 09:59:19    

Bah : voir des balises en majuscule, ça me suffit déjà  :non:  
 
 

Citation :


La grammaire du XHTML répond à certaines règles :
· Les noms des balises et des attributs sont en minuscules.
On écrit : <p> et plus <P>.
· Les valeurs des attributs sont entre doubles quotes.
On écrit : <p align="center"> et plus <p align=center>.
· Tout attribut doit impérativement avoir une valeur.
On écrit : <table border="1"> et plus <table border>.
· Toute balise ouvrante doit être refermée.
On écrit : <p>blabla</p> et plus <p>blabla.
· Toutes les balises sont ouvrantes.
On écrit : <br /> et plus <br> ou encore : <hr width="50%" /> et plus < hr width="50%" >.
· Les balises doivent être correctement imbriquées.
On écrit : <p><i>blabla</i></p> et pas <p><i>blabla</p></i>.
Tout document qui se conforme strictement à ces règles sera dit bien formé.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 01-08-2003 à 10:11:53    

SIBELIUS a écrit :

Bah : voir des balises en majuscule, ça me suffit déjà  :non:  
 
 

Citation :


La grammaire du XHTML répond à certaines règles :
· Les noms des balises et des attributs sont en minuscules.
On écrit : <p> et plus <P>.
· Les valeurs des attributs sont entre doubles quotes.
On écrit : <p align="center"> et plus <p align=center>.
· Tout attribut doit impérativement avoir une valeur.
On écrit : <table border="1"> et plus <table border>.
· Toute balise ouvrante doit être refermée.
On écrit : <p>blabla</p> et plus <p>blabla.
· Toutes les balises sont ouvrantes.
On écrit : <br /> et plus <br> ou encore : <hr width="50%" /> et plus < hr width="50%" >.
· Les balises doivent être correctement imbriquées.
On écrit : <p><i>blabla</i></p> et pas <p><i>blabla</p></i>.
Tout document qui se conforme strictement à ces règles sera dit bien formé.

 


 
ou tu as vu que je faisais du Xhtml?
je fais juste du html
 

Les noms des éléments sont écrits en lettres majuscules (par exemple, BODY). Les noms des attributs sont écrits en lettres minuscules (par exemple, lang, onsubmit). Rappelez-vous que les éléments et les attributs HTML sont indifférents à la casse ; la convention d'écriture est élaborée dans un souci de plus grande lisibilité.


--> sur le site de w3c traduit en francais (vu sur la forum des liens ici)

Reply

Marsh Posté le 01-08-2003 à 10:21:31    

c'est quoi cette mise en page à base de tableaux?

Reply

Marsh Posté le 01-08-2003 à 10:25:09    

oui je sais c pas bo...
g bien essayé avec les positions mais je suis arrivé a rien pour l instant...
g juste fait toute la partie haute (avec le fond vert) comme ca dans une autre page mais j arrive pas a aligner les images avec les cadres de textes sinon...
en plus les navigateurs (oui encore eux) interpretent souvent différement les choses alors que je dois avoir qqchose de nickel au pixel pres...
 
je pense que peut etre que je ne devrais pas redimensionner les images mais je n ai aucune informations a ce sujet concernant la charte graphique...

Reply

Marsh Posté le 01-08-2003 à 10:25:09   

Reply

Marsh Posté le 01-08-2003 à 10:40:51    

Ce que je veux dire, c'est que tant que tu ne seras pas en XHTML (strict) tu t'exposes à des appréciations différentes selon les browsers...


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 01-08-2003 à 10:48:52    

SIBELIUS a écrit :

Ce que je veux dire, c'est que tant que tu ne seras pas en XHTML (strict) tu t'exposes à des appréciations différentes selon les browsers...


 
ah c con je savais pas...
je pensais que html strict suffirait (meme si il peut y avoir des différences quand mem)
je pourrais essayer d y passer...
ca m apporterait vraiment qqchose en plus? (du genre moins de différences entre les navigateurs?)

Reply

Marsh Posté le 01-08-2003 à 12:42:25    

c pas possiblede définir une taille pour une cellule de tablo contenant du texte?
avec ie6 ==>
 

Code :
  1. TD.Texte {
  2. font-weight : bold;
  3. font-size : 18pt;
  4. border-right : 1px solid green;
  5. border-left : 1px solid green;
  6. padding-left : 20px;
  7. padding-top : 5px;
  8. width : 200px;
  9. border : solid black;
  10. }


 
la largeur donnée ne correspond a rien
g essayé de passé a 300px ==> ca ajoute environ 10px
g essayé de passé a 1300px (dans le doute du bug) ==> ca a ajouté 10 autre px
11300 ==> 10 autres de plus...
 
incroyable  :pt1cable:  
 
pourtant avec les % ca marche a peu pres convenablement
décidement...
 
Edit : oui le border est redéfini mais c paske je fais plein de test... faites comme si il était pas la...


Message édité par hop le fou le 01-08-2003 à 12:43:17
Reply

Marsh Posté le 01-08-2003 à 14:38:34    

encore une question : ca ne marche pas de faire des border sur un élément tr?
il faut faire tous les éléments TD?

Reply

Marsh Posté le 01-08-2003 à 14:43:11    

si ca marche. mais tu peux le faire sur tout les TD, mais le résultat ne sera pas le même.

Reply

Marsh Posté le 01-08-2003 à 14:48:01    

gizmo a écrit :

si ca marche. mais tu peux le faire sur tout les TD, mais le résultat ne sera pas le même.


 
ie ma envoyé promené quand g voulu le faire sur les <TR>
par contre sur les td ca marche bien donc je garde ca...

Reply

Marsh Posté le 01-08-2003 à 15:53:29    

dans une cellule de tableau, j ai une image qui ressemble a un carré vert (tres interessant et primordial  :D )
 
je veux mettre cette image sur le bord droit de ma cellule (sans agrandir mon image)
==> je pense a mettre 0 en marge de l'image

Code :
  1. IMG.CarreVert {
  2. margin-right : 0px;
  3. }


sans résultat
 
alors je me dis je vais mettre le padding de la cellule a 0

Code :
  1. TD.CarreVert {
  2. padding-right : 0px;
  3. }


 
ca ne marche pas non plus...
j utilise ie6 ( :o ) et je ne comprend pas pkoi ce carré ne ve pas faire ce qu on lui demande...
 
de l'aide siouplé...
 
EDIT : g essayé float dans la cellule du tableau
ca fonctionne sous ie6 , je teste avec les autres...


Message édité par hop le fou le 01-08-2003 à 16:10:48
Reply

Marsh Posté le 01-08-2003 à 16:02:10    

SIBELIUS a écrit :

Ce que je veux dire, c'est que tant que tu ne seras pas en XHTML (strict) tu t'exposes à des appréciations différentes selon les browsers...


 
:heink: bah non, ce qui compte c'est que ce soit Strict (HTML 4, XHTML 1.0, XHTML 1.1)
Le fait que ce soit HTML ou XHTML ne doit pas influencer, sauf IE qui buggue si tu mets un en-tete XML a ta page XHTML (en-tete facultatif pour la validation en fait).

Reply

Marsh Posté le 01-08-2003 à 16:09:51    

THE REAL Antp a écrit :


 
:heink: bah non, ce qui compte c'est que ce soit Strict (HTML 4, XHTML 1.0, XHTML 1.1)
Le fait que ce soit HTML ou XHTML ne doit pas influencer, sauf IE qui buggue si tu mets un en-tete XML a ta page XHTML (en-tete facultatif pour la validation en fait).


 
de toute facon mem en strict il y a encore des différences entre les navigateurs (c sur que ca sert a aller vers un standard mais c pas encore ca...)

Reply

Marsh Posté le 01-08-2003 à 16:37:10    

je repose ma question qui est passé tout droit sans avoir de réponse en haut du topic
==> netscape ne reconnait pas text-align : right
 

Code :
  1. DIV.TexteDroite {
  2. text-align : right;
  3. font-weight : bold;
  4. font-size : 11pt;
  5. margin-right : 2em;
  6. padding-bottom : 12px;
  7. }


 
keske je peux faire pour remplacer?
je ne pe pas utiliser float:right paske c pas accepté non plus (ce que j avais au début je sais plus si c opera ou netscape qui ma refoulé...)

Reply

Marsh Posté le 01-08-2003 à 16:38:21    

comment ca il ne le reconnait pas? ton texte n'est pas aligné à droite?

Reply

Marsh Posté le 01-08-2003 à 16:47:06    

gizmo a écrit :

comment ca il ne le reconnait pas? ton texte n'est pas aligné à droite?


 
non il est en plein milieu...

Reply

Marsh Posté le 01-08-2003 à 16:50:37    

en plein milieu? :heink: Tu veux dire centré?

Reply

Marsh Posté le 01-08-2003 à 16:54:44    

gizmo a écrit :

en plein milieu? :heink: Tu veux dire centré?


 
oui (horizontalement je parle...)
c comme si y avais center au lieu de right mais non c bien right...
 
étrange...

Reply

Marsh Posté le 01-08-2003 à 17:06:00    

Et c'est utilisé où dans ton texte?

Reply

Marsh Posté le 01-08-2003 à 17:10:07    

comment ca utilisé ou?
c utilisé en bas de page
c marqué dans le code (6post fin de page html) mais g changé pâs mal de truc
ya que ce texte qui subit ce style...
 
marrant paske c le seul navigateur qui me fait ca...

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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