Hauteur de ligne tableau + IE

Hauteur de ligne tableau + IE - HTML/CSS - Programmation

Marsh Posté le 13-07-2007 à 14:03:07    

Bonjour,  
 
voila encore un soucis avec IE (7).
J'ai le code suivant :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
  3. <head>
  4. <style type="text/css">
  5. <!--
  6. table { margin-left: 0px; border-collapse: collapse; }
  7. table td { border: 1px red solid; width: 100px; height: 50px; }
  8. //-->
  9. </style>
  10. </head>
  11. <body>
  12. <table>
  13. <tr>
  14.  <td></td>
  15.  <td></td>
  16. </tr>
  17. <tr>
  18.  <td></td>
  19.  <td></td>
  20. </tr>
  21. <tr>
  22.  <td></td>
  23.  <td></td>
  24. </tr>
  25. <tr>
  26.  <td></td>
  27.  <td></td>
  28. </tr>
  29. </table>
  30. </body>
  31. </html>


 
Avec Firefox, aucun soucis,
mais avec IE, la derniere ligne fait 49px et non 50px !
Est-ce un bug connu ?
 
Merci.


Message édité par $man le 13-07-2007 à 14:03:23
Reply

Marsh Posté le 13-07-2007 à 14:03:07   

Reply

Marsh Posté le 13-07-2007 à 15:09:51    

J'en sais rien, mais c'est IE, on a pas encore fait le tour de tous ses bugs :)


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 13-07-2007 à 19:46:10    

Salut,
 
Oui le problème est connu.Enfait je t'invite à lire ce billet.
Je ne chacherais pas que c'est mon blog, mais bon ça te concerne...
 
Essay de mettre border: 0px, et regarde la taille de ta dernière ligne.
 
 :hello:  

Reply

Marsh Posté le 13-07-2007 à 21:23:47    

moreno911 a écrit :

Je ne chacherais pas que c'est mon blog, mais bon ça te concerne...


 
Bon alors si c'est ton blog tu vas pouvoir faire rechercher/remplacer "Internet Exploreur" en "Internet Explorer". Ca fera un peu plus serieux.
 
J'aime beaucoup la concordance des temps et la conjugaison de "créer" dans ton dernier commentaire aussi...   :lol:  
 

Citation :

Rassure moi, bien que tu es "PRO IE" tu as remarqué la différence d'affichage selon les sites que tu crais / visites ?!



---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 13-07-2007 à 21:40:46    

moreno911 a écrit :

Salut,
 
Oui le problème est connu.Enfait je t'invite à lire ce billet.
Je ne chacherais pas que c'est mon blog, mais bon ça te concerne...
 
Essay de mettre border: 0px, et regarde la taille de ta dernière ligne.
 
 :hello:


Ce que tu dis c'est juste de la merde.
 
Je t'invite à lire les différences qui existent entre le mode quirks et le mode strict de IE
 
Le mode quirks est le mode que tu décris, c'est un mode de compatibilité pour les anciens navigateurs et là, le navigateur passera en Modele de Boite de Microsoft comme tu l'as d'écris (genre la largeur s'applique l'extérieure des bordures).
 
Maintenant le mode strict est un mode sous IE qui permet à IE d'avoir un comportement correct. (Modele de boite du W3C).
 
Pour avoir le mode strict il faut juste avec un doctype avec une URI vers une DTD. et c'est tout.
 
Mais ATTENTION : Si quelque chose est placé avant le doctype, IE par en couille et il retombe en mode quirks, et c'est aussi valable pour le prologue XML, donc tu vires le prologue XML et c'est bon.
 
et autre chose, le mode quirsk, est présent s'il n'y a pas de doctype et/ou si le doctype n'a pas d'URI.
 
Et le coup de parler de détection de Navigateur et de rediriger vers un site fait pour un navigateur particulier, c'est de la merde.

Reply

Marsh Posté le 14-07-2007 à 12:47:40    

salut,
 
Gatsu35 => Merci pour les précisions, je ne connaissais pas du tout ces différents modes.
 
J'ai essayé d'appliquer le mode strict mais bizarement je ne remarque aucune différence, est-ce-que je l'ai bien écrit ?
 

Code :
  1. <!DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">


 
Aussi, pourquoi "la détection de navigateur et de rediriger vers un site fait pour un navigateur particulier c'est de la merde" ?
 
 :??:  
 
 
 
cgo2 => corriger  :whistle:

Reply

Marsh Posté le 14-07-2007 à 13:17:13    

moreno911 a écrit :

cgo2 => corriger  :whistle:


 
"Bien que" est une locution conjonctive toujours suivie du subjonctif. Donc on dit : "bien que tu sois nul en grammaire" et surement pas "bien que tu es nul en grammaire"  [:aloy]  
 
Ca me pique les yeux de voir des trucs pareils (et encore je m'attarde pas sur tout le reste).


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 14-07-2007 à 13:22:22    

moreno911 a écrit :

Aussi, pourquoi "la détection de navigateur et de rediriger vers un site fait pour un navigateur particulier c'est de la merde" ?


 
Peut-être parceque ça te fait faire au minimum 5 versions différentes de ton site (IE6, IE7, FF, Opera, Safari), ce qui est simplement impossible à maintenir. Ou alors parceque la détection du navigateur par le serveur n'est absolument pas fiable (le navigateur peut envoyer ce qu'il veut comme user agent). Ou encore parceque si on fait des normes c'est justement pour que tout le monde fonctionne pareil, et pas retourner dans la jungle du début du web.
 
La plupart des hacks doivent être fait pour IE6, quelques un pour IE7, et pratiquement aucun pour les autres. Pour faire les hacks proprement on utilise une feuille de style à part, inclue avec des commentaires conditionnels :
 

Code :
  1. <!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="/css/fix_ie.css" /><![endif]-->
  2. <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/css/fix_ie7.css" /><![endif]-->


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 14-07-2007 à 13:36:48    

Okay, merci pour les précisions  :hello:  
 
 

Reply

Marsh Posté le 14-07-2007 à 19:20:10    

cgo2 a écrit :


 
Peut-être parceque ça te fait faire au minimum 5 versions différentes de ton site (IE6, IE7, FF, Opera, Safari), ce qui est simplement impossible à maintenir. Ou alors parceque la détection du navigateur par le serveur n'est absolument pas fiable (le navigateur peut envoyer ce qu'il veut comme user agent). Ou encore parceque si on fait des normes c'est justement pour que tout le monde fonctionne pareil, et pas retourner dans la jungle du début du web.
 
La plupart des hacks doivent être fait pour IE6, quelques un pour IE7, et pratiquement aucun pour les autres. Pour faire les hacks proprement on utilise une feuille de style à part, inclue avec des commentaires conditionnels :
 

Code :
  1. <!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="/css/fix_ie.css" /><![endif]-->
  2. <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/css/fix_ie7.css" /><![endif]-->



 
Il est temps pour toi de sortir du monde des bisounours et d'entrer dans le monde réel. Et tu te rendras compte qu'il est 100x plus facile de maintenir 1 feuille de style que 2 ou 3 (qui contiennent des styles pour d'autres navigateurs).
D'où le fait que les hacks sont là pour ça

Reply

Marsh Posté le 14-07-2007 à 19:20:10   

Reply

Marsh Posté le 14-07-2007 à 19:31:33    

C'est pas la peine d'être aussi désagréables hien.

Reply

Marsh Posté le 14-07-2007 à 22:03:56    

gatsu35 a écrit :

Il est temps pour toi de sortir du monde des bisounours et d'entrer dans le monde réel. Et tu te rendras compte qu'il est 100x plus facile de maintenir 1 feuille de style que 2 ou 3 (qui contiennent des styles pour d'autres navigateurs).
D'où le fait que les hacks sont là pour ça


 
Et tu t'adresses à qui en parlant sur ce ton ?


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 14-07-2007 à 22:24:40    

Reply

Marsh Posté le 14-07-2007 à 22:32:33    


 
Bon alors espèce d'idiot tu pourrais peut-être lire ce que j'ai écrit. Au lieu de foutre des hacks css illisibles (genre * > truc et j'en passe) dans la feuille de style principale, tu mets les règles spécifiques (et uniquement celles là, évidemment) dans des feuilles de style à part, nommées, par exemple, "fix_ie.css" et "fix_ie7.css". Le nom me semble suffisamment explicite pour comprendre du premier coup pourtant.
 
Ca permet une lisibilité et une maintenabilité bien meilleure, et surtout ça évite les syntaxes à ralonge du genre :
 

Code :
  1. .monbloc {
  2. background : #fff;
  3. opacity : .2;
  4. filter : alpha(opacity=20);
  5. /* pour IE 6 */
  6. height : 1px;
  7. }
  8. /* pour les autres navigateurs */
  9. * > .monbloc {
  10. height: auto;
  11. }
  12. /* pour IE 7 */
  13. *+html .monbloc {
  14. min-height : 1px;
  15. }


 
Au lieu de ça, la feuille de style principale contient toutes les règles standards qui fonctionne partout. "fix_ie.css" contient uniquement la règle pour IE 6. "fix_ie7.css" contient uniquement la règle pour IE7. Et plus besoin de hacks, puisque les feuilles ne sont inclues que sur IE grace à l'utilisation des commentaires conditionnels.
 
Qui va faire un tour chez les bisounours maintenant ?
 
EDIT : pour être sûr que ça rentre bien dans ta petite tête, voici la version du code ci-dessus sans hacks, mais avec des feuilles de style conditionnelles.
 
 
style.css : inclue par tout le monde

Code :
  1. /* ... (tous les styles génériques) */
  2. .monbloc {
  3.     background : #fff;
  4.     opacity : .2;
  5. }


fix_ie.css : inclue uniquement par IE version <= 6

Code :
  1. .monbloc {
  2.     filter : alpha(opacity=20);
  3.     height : 1px; /* force has_layout, agit comme min_height sur IE <= 6 */
  4. }


fix_ie7.css : inclue uniquement par IE 7

Code :
  1. .monbloc {
  2. filter : alpha(opacity=20);
  3.     min-height : 1px; /* force has_layout */
  4. }


Message édité par cgo2 le 14-07-2007 à 23:01:46

---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 15-07-2007 à 10:21:27    

Maintenant tu sors du monde des bisounours et tu te mets dans le cas d'un site énorme (+1000 pages) avec 1M visiteurs par mois. et tu te renseigne sur ce qu'on appel un "hit" sur un serveur.

 

Ensuite tu me mets tes hacks à la poubelle et tu ecris comme cela :

 
Code :
  1. .monbloc {
  2.        background : #fff;
  3.        opacity : .2;
  4.        filter:alpha(opacity=20); /*ne genera aucun autre navigateur.*/
  5.        zoom:1; /*remplace ton height:1px allègrement pour le haslayout*/
  6.     }
 

et pour les propriétés à hacker. les hacks les plus utilisés sont :

Code :
  1. .truc {
  2.     *height:101px; /* IE6 + IE7 */
  3.     _height:100px; /* IE6 only ou IE7 mode quirks */
  4.     //height:102px; /* IE7 */
  5. }

Message cité 1 fois
Message édité par gatsu35 le 15-07-2007 à 10:21:55
Reply

Marsh Posté le 15-07-2007 à 10:52:17    

gatsu35 a écrit :

Maintenant tu sors du monde des bisounours et tu te mets dans le cas d'un site énorme (+1000 pages) avec 1M visiteurs par mois. et tu te renseigne sur ce qu'on appel un "hit" sur un serveur.


 
Ah mais tu persistes et signe toi :lol:
 
J'ai bossé pendant 2 an sur OM.net et OLWeb.fr, c'est assez énorme pour toi ? En règle général pour les gros sites, les css (comme les images) sont servis par des frontaux dédiés aux fichiers statiques, donc laisse moi te dire que ces hit supplémentaires (qui sont très faibles, puisque tout de suite mis en cache par le navigateur) représentent à peut pret l'équivalent d'un pipi de chat dans l'océan atlantique.
 
Et puisque tu parles des sites "énormes", sache que, comme je l'ai dit plus haut, les hacks spécifiques qui viennent surcharger la feuille de style principale nuisent vraiment à la visibilité et la maintenabilité quand on est plusieurs à bosser dessus. Les mettre dans des feuilles à part, c'est bien plus facile à maintenir pour tout le monde que des syntaxes esotériques.
 
Dernière chose : les hacks que tu proposes rendent la feuille de style non valide.


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 15-07-2007 à 12:10:33    

Oui, et enfin, rien ne te dis que les hack (qui ne sont conforme a aucune norme) seront toujours interperté de la meme facon, apres le prochain patch de chez bilou.
 
Alors que les commentaires conditionnels, c'est propre (enfin, presque), conforme aux normes, et ie est content. Le tout combiné a une feuille de style "globale", ce qui permet de ne pas avoir 10 feuilles de styles, mais une.
 
Les autres ne contiendront que les fameux hacks ;)

Reply

Marsh Posté le 15-07-2007 à 15:04:07    

cgo2 a écrit :

 

Ah mais tu persistes et signe toi :lol:

 

J'ai bossé pendant 2 an sur OM.net et OLWeb.fr, c'est assez énorme pour toi ? En règle général pour les gros sites, les css (comme les images) sont servis par des frontaux dédiés aux fichiers statiques, donc laisse moi te dire que ces hit supplémentaires (qui sont très faibles, puisque tout de suite mis en cache par le navigateur) représentent à peut pret l'équivalent d'un pipi de chat dans l'océan atlantique.

 

Et puisque tu parles des sites "énormes", sache que, comme je l'ai dit plus haut, les hacks spécifiques qui viennent surcharger la feuille de style principale nuisent vraiment à la visibilité et la maintenabilité quand on est plusieurs à bosser dessus. Les mettre dans des feuilles à part, c'est bien plus facile à maintenir pour tout le monde que des syntaxes esotériques.

 

Dernière chose : les hacks que tu proposes rendent la feuille de style non valide.


Je travaille sur des sites SNCF, SFR et d'autres gros clients comme cela et le fait que tout est delesté sur des frontaux, je connais.
Et j'ai bossé avec des feuilles de styles de 1800 lignes (100 ko de CSS déjà optimisées et pensées).
Mon taf  consiste à developper des sortes de KIT CSS pour après n'importe qui peut monter des pages en jouant aux légos avec les blocs qu"on leur a fourni.

 

Et personnellement il est 100x plus simple d'avoir tout dans une seule CSS que dans 50.

 

Et valider une feuille de style c'est de la connerie. Car jamais une feuille de style ne sera ok au validateur, du au simple fait que tous les navigateurs ont leurs propriétés persos.
ex : display:inline-block, display:-moz-inline-box
et quand on sait faire de la CSS, on a pas besoin de hack, sauf pour IE6 (contexte de formatage, haslayout, font-size en EM).

Message cité 1 fois
Message édité par gatsu35 le 15-07-2007 à 15:05:15
Reply

Marsh Posté le 15-07-2007 à 15:17:06    

Et pour ie7 . . .
 
Mais a prioris, comme tu as l'air de tout savoir, pourquoi perd tu ton temps avec nous ?
 
Pour revenir a ton propos quand meme, on voit clairement que tu n'es pas dans la meme optique que ce a quoi on repond nous : tu devellope un kit css sur lequel le devellopeur du site doit travailler en boite noire.
 
Pour les proprité perso des navigateurs, ou tu as un probleme de conception, ou le navigateur a un probleme de conception ou bien tu en as pas besoin.

Reply

Marsh Posté le 15-07-2007 à 16:39:59    

gatsu35 a écrit :

Je travaille sur des sites SNCF, SFR et d'autres gros clients comme cela et le fait que tout est delesté sur des frontaux, je connais.
Et j'ai bossé avec des feuilles de styles de 1800 lignes (100 ko de CSS déjà optimisées et pensées).
Mon taf  consiste à developper des sortes de KIT CSS pour après n'importe qui peut monter des pages en jouant aux légos avec les blocs qu"on leur a fourni.
 
Et personnellement il est 100x plus simple d'avoir tout dans une seule CSS que dans 50.


 
Mais c'est supair ! Je rejoins ce que répond deadalnix : tu es dans un cas de figure très particulier, avec des contraintes particulières. Si tu preferes avoir une seule feuille de style au lieu de 3 (une générique, une pour IE 6 et une pour IE 7 ; je ne connais pas 50 versions de Internet Explorer différentes), aucun problème, c'est ton droit. Mais remballe tes bisounours et ton ton péremptoire, puisque là tu parles de ton cas perso.
 

gatsu35 a écrit :

Et valider une feuille de style c'est de la connerie. Car jamais une feuille de style ne sera ok au validateur, du au simple fait que tous les navigateurs ont leurs propriétés persos.
ex : display:inline-block, display:-moz-inline-box
et quand on sait faire de la CSS, on a pas besoin de hack, sauf pour IE6 (contexte de formatage, haslayout, font-size en EM).


 
Mais oui, mais oui, tu as raison, les normes c'est de la connerie, ça sert à rien, je me demande pourquoi on se casse le cul a les respecter d'ailleurs.
Et "quand on sait faire de la CSS", on sait que la syntaxe -moz-inline-box *est* valide : http://www.w3.org/TR/CSS21/syndata.html#q4   :o  
 
 


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 15-07-2007 à 17:41:26    

Je respecte les normes :o mais passer une feuille de style au validateur n'a pas vraiment de sens :o

Reply

Marsh Posté le 15-07-2007 à 18:34:38    

gatsu35 a écrit :

Je respecte les normes :o mais passer une feuille de style au validateur n'a pas vraiment de sens :o


 
Oui, tu as raison, ça n'a pas vraiment de sens. Il vaut beaucoup mieux se persuader que tout ce qu'on fait est parfait plutôt que de risquer devoir se remettre en question à cause d'un stupide validateur qui n'y connait rien au monde réel de Gatsu "bisounours" 35, pas vrai ?


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 16-07-2007 à 01:58:10    

Un site de taille modeste les commentaires conditionnels sont très bien, etant donné qu'en général on modifie rarement les styles, c'est surement même plus clair que les hacks en dur dans la feuille.
 
Mais pour un site de la taille de SFR, non seulement ils changent de style tous les 6 mois, mais en plus le traffic sur le site empêche de faire plusieurs feuille de style.
 
Tu dois surement utiliser Firebug, aussi je t'invite à deployer l'onglet Net et à regarder combien de fois les css sont "from cache", c'est très rare en fait. C'est une croyance trop souvent ancrées dans l'esprit des gens, mais le cache à une durée de vie...
 
Ensuite copier 1000 fichiers de 1ko est beaucoup plus lourd et lent que de copier un fichier d'1go, à cause notamment de la gestion des transactions. Du coup on prèfere maximiser la taille des fichiers et minimiser le nombre des hits, c'est un choix strategique en terme de loading.
 
D'ailleurs en codant bien on aurait au pire un hack commun à IE 6 et IE 7. Je n'ai que IE 6 et Firefox d'ouvert lorsque je code, et je valide sous FF, Opera, Safari, IE 7 et 6 sans soucis...
 
Je finirais en disant que les validateurs ne font pas tout, tu peux très bien valider une page Xhtml avec une sémantique déplorable...
Et c'est la même chose en css, j'imagine que la propriété zoom doit poser problème alors qu'elle est très utile pour donner le layout à IE.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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