[CSS] (Résolu) Pourriez-vous tester mon site avec IE6?

Pourriez-vous tester mon site avec IE6? [CSS] (Résolu) - HTML/CSS - Programmation

Marsh Posté le 13-02-2007 à 22:36:26    

Bonsoir à tous,
 
Je me permet de me tourner vers vous concernant une question sur les stylesheet utilisées avec Joomla car je n'ai pas trouvé de réponses à mes questions sur les sites dédiés à Joomla. La question ne porte pas sur Joomla en soit, mais plus sur la compatibilité de IE7 avec les CSS.
 
J'ai un GROS problème d'affichage avec IE7.
Comme d'hab, pas de problème sous FireFox 2.0 (qui est mon browser principal).
Juste avant d'aller me coucher hier soir je me suis dit que j'allais tester mon site avec IE7... grozz surprizz, la mise en page est complétement kaput!  :fou:  
 
Avec IE7
Avec FF2.0
 
Je suis un gros noob en PHP et CSS, ou du moins je bricole sans vraiment m'y connaitre, donc là je ne sais pas par où je dois commencer à résoudre le problème. L'adresse du site est http://www.airlibre.eu.
 
J'ai ouvert ma CSS avec Dreamweaver et j'ai tourné le "browser checker", je n'ai eu que 3 erreurs, donc je pense pas que cela justifie la mise en page complètement foutue de IE7. Mais DW ne test que jusqu'à IE6.
 

Citation :

\Core\templates\rhuk_solarflare_ii\css\template_css.css             359     CSS property border-spacing is not supported [Microsoft Internet Explorer 6.0]
\Core\templates\rhuk_solarflare_ii\css\template_css.css             377     CSS property border-spacing is not supported [Microsoft Internet Explorer 6.0]
\Core\templates\rhuk_solarflare_ii\css\template_css.css             467     CSS property border-spacing is not supported [Microsoft Internet Explorer 6.0]


 
Je n'ai plus IE6 sur mon PC, et j'aimerais être certain que le problème est avec IE7 et pas avec ma CSS. Pourriez-vous tester mon site et poster un screen de ce que cela donne? Si vous auriez aussi quelques pistes pour m'aider à résoudre ce problem ce serait cool.
 
merci et bonne soirée
 
Tom


Message édité par tomilou le 14-02-2007 à 00:10:01
Reply

Marsh Posté le 13-02-2007 à 22:36:26   

Reply

Marsh Posté le 13-02-2007 à 22:42:10    

Ah tient, salutations à toi qui a choisit de m'écouter pour le nom de ton site ;-)
 
je le teste

Reply

Marsh Posté le 13-02-2007 à 22:43:11    

effectivement, c'est très laid sous IE7 :D

Reply

Marsh Posté le 13-02-2007 à 22:49:01    

salut Mxtrem ;-)
oui je sais mais peux-tu tester sous IE6
(essaye avec FF2.0 ca donne bcp mieux)
des idées pour m'aider?

Reply

Marsh Posté le 13-02-2007 à 22:53:46    

je n'ai plus IE6 et j'ai testé avec FF c'est vrai que ça rend mieux :)
 
concernant ton problème je ne vois pas ce qui peut provoquer une telle différence, enfin là je ne vois plus grand chose ça fait 48H que je suis dans des lignes et je viens de passer 3h à chercher un bug alors qu'en faite je ne rechargeais pas la bonne page :fou:
 
enfin voilà, j'essaierais de voir demain mais d'ici là je pense qu'on te sera venu en aide ;-)

Reply

Marsh Posté le 13-02-2007 à 22:59:37    

plz dite moi que qqn a encore IE6...
y'a pas un CSS master qui maîtrise IE7?

Reply

Marsh Posté le 13-02-2007 à 23:21:43    

Y'a une erreur dans le lien que tu donnes (un point en trop à la fin). ;)
 
Avec IE6 ça donne ça :
 
http://img463.imageshack.us/img463/5359/screenie601gb7.th.png
 
http://img515.imageshack.us/img515/1975/screenie602zh9.th.png
 
Autrement dit, ça merde. :/
 
Bonne chance pour la suite !  ;)

Reply

Marsh Posté le 13-02-2007 à 23:39:08    

bon,... merci juju2k :-)
shit pour le site :-/ va falloir que je commence à chercher encore plus loin...

Reply

Marsh Posté le 13-02-2007 à 23:39:24    

template_css.css :  
ligne 58 :

Code :
  1. background-image: url(../images/button_bg_green_v3.png) repeat-x;
  2. ==> background: url(../images/button_bg_green_v3.png) repeat-x;


 
 
ligne 94 :

Code :
  1. background: url(../images/button_bg_green_v3.png) repeat-x;
  2. 'background: transparent; <== erreur ici


\/ \/

Code :
  1. background: transparent url(../images/button_bg_green_v3.png) repeat-x;


 
 
 
 
ligne 103 :  

Code :
  1. background: url(../images/button_bg_green_flip_v3.png) repeat-x;
  2.         'background: #ccff66; <== meme erreur


\/ \/

Code :
  1. background: #ccff66 url(../images/button_bg_green_flip_v3.png) repeat-x;


 
 
idem ligne 151 :  
        'background: url(../images/header_short.jpg) no-repeat;
tu vires cet simple quote devant la ligne.
 
PS : les commentaires en CSS c'est  
/*commentaire */
 
okay pas un simple quote devant une ligne.
 
sinon le font-weight c'est bold pas strong

Reply

Marsh Posté le 13-02-2007 à 23:57:13    

Juste le fait de corriger ces points merdiques, et automatiquement ton site  est nickel.
 
Sinon petite parenthèse et c'est là que je dis que les mecs qui font les templates font de la merde.
 
Dans le web il y a 2 comportements dans les navigateurs.
Le mode quirks et le mode strict. Ces deux modes de rendu sont très visible dans IE6.
en mode quirks IE6 adopte le modele de boite de Microsoft alors qu'en mode strict IE6 adopte le modèle de boite du W3C (comme firefox)
en gros : si je mets des paddings a ma boite et une largeur, en modele de boite W3C ma boite aura pour largeur finale : largeur + paddings gauche/droite.
 
Comment s'obtient le mode quirk ou strict ?
Et bien tout simplement en mettant un bon doctype.
A partir du moment ou le doctype à une url (vers une dtd), alors le mode de rendu du navigateur sera le mode strict (donc bonne base de travail).
Là ou il y a un problème c'est que IE est CON, et oui, car à partir du moment où vous mettez quelque chose avant le doctype (commentaire ou prologue XML) IE repasse systématiquement en mode quirks.
ex :  

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


Ici on est en mode strict
 
 
 

Code :
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>


et là en mode quirks à cause de la crotte devant.
 
 
Là ou je voulais en venir au final, c'est que IE7 à un comportement totalement différent qu'on soit en mode quirks ou en mode strict.
C'est ce qu'on décidé les développeurs de IE7, en gros, quand un site est en mode quirks, IE7 se comportera exactement comme IE6 (mêmes problèmes, bugs, etc...), alors qu'en mode strict aucun soucis. IE7 reste IE7.
 
Tout ca pour dire que tes problèmes seront les mêmes sous IE7 et IE6
 
Petite lecture :  
http://en.wikipedia.org/wiki/Quirks_mode
http://edu.ca.edu/article258.html <== modele de boite
 

Reply

Marsh Posté le 13-02-2007 à 23:57:13   

Reply

Marsh Posté le 13-02-2007 à 23:59:56    

Sinon les enfants, pour tester avec IE6, il y a les multiples IE :  
http://tredosoft.com/Multiple_IE

Reply

Marsh Posté le 14-02-2007 à 00:08:06    

heu ... Gatsu35 merci 1000x!
Comme j'ai dit plus haut je suis un bleu en CSS, donc je pensais que le ' fonctionnait comme commentaire.
Bref j'ai corrigé tout ce que tu as mentionné et ... le résultat est nickel avec IE7   [:athome]  
 
merci encore pour ton aide !
 
yeaaah je suis content  :bounce:

Reply

Marsh Posté le 14-02-2007 à 00:09:37    

je t'invite à lire tout mon speech

Reply

Marsh Posté le 14-02-2007 à 00:11:10    

j'ai lu j'ai lu ... et je prend bonne note de tes liens. c'est la bonne occasion pour se documenter un peu.

Reply

Marsh Posté le 14-02-2007 à 00:15:54    

Sur mon site j'ai:
 

Code :
  1. <?php defined( '_VALID_MOS' ) or die( 'Restricted access' );
  2. // needed to seperate the ISO number from the language file constant _ISO
  3. $iso = explode( '=', _ISO );
  4. // xml prolog
  5. echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml">


 
tu recommenderais donc de garder ceci ? ou dois-je mettre le doctype en toute première ligne de ma page (je suppose pas au-dessus de ma balise <?php....) sorry pr les questions de noob
 

Code :
  1. <?php defined( '_VALID_MOS' ) or die( 'Restricted access' );
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. // needed to seperate the ISO number from the language file constant _ISO
  4. $iso = explode( '=', _ISO );
  5. // xml prolog
  6. echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
  7. <html xmlns="http://www.w3.org/1999/xhtml">


 
Tom


Message édité par tomilou le 14-02-2007 à 00:16:26
Reply

Marsh Posté le 14-02-2007 à 00:18:27    

nan touche a rien dans le meilleur des cas  tu as juste a supprimer le prologue xml. mais ne touche a rien tu vas peter ton site

Reply

Marsh Posté le 14-02-2007 à 00:27:15    

t'en fait pas je n'ai encore touché à rien à ce niveau là.
enfin encore merci pour ton aide précieuse !!

Reply

Marsh Posté le 14-02-2007 à 10:02:29    

Bonjour ,
 
je me trouve dans la même problématique concernant l'interprétation des CSS et IE 7.
Mon site a la mise en page que je désire sous IE 6 et FF mais lorsque j'ai fait le test sous IE 7 c'était l'horreur..
 
donc j'ai changer les background-image => background
j'ai remplacé mes tailles en % par des tailles fixes.
 
Cependant j'ai des sections qui s'affichent en centré sur IE7 alors qu'elle devrait être aligné à gauche. Je parle par exemple d'une zone d'identification.
 
Merci pour vos réponses

Reply

Marsh Posté le 14-02-2007 à 14:56:16    

Après avoir passé un peu de temps dessus j'ai trouvé quelques solutions.. Je vous les expose au cas où ça interesserait quelqu'un :
 
Je rappelle le problème auquel j'étais confronté :
 
Certain de mes menus ne s'affichaient pas avec le bon alignement.
 
J'ai regardé le code source de la page. Et j'ai noté le nom de la classe utilisée pour la partie n'ayant plus la même mise en page.
La classe était moduletable. J'ai donc regardé dans la CSS à l'endroit de la définition de moduletable et voici ce que j'avais :
 

Code :
  1. table.moduletable {
  2. margin: 0px 0px 0px 0px;
  3. width: 150px;
  4. border-left: solid 0px #000000;
  5. border-right: solid 0px #000000;
  6. border-top: solid 0px #000000;
  7. border-bottom: solid 0px #000000;
  8. background-color: #Ffffff;
  9. text-align: left ; // ce que j'ai rajouté
  10. }


 
Par contre un second problème, et là peut être que quelqu'un pourra m'éclairer.
J'avais des puces qui s'affichaient dans un des menu de mon site (sous FireFox et sous IE 6..) mais sous IE 7 rien. Voici la partie de la css qui correspond :
 

Code :
  1. li {
  2. margin: 0px 0px 0px 0px;
  3. list-style: inside url(../images/arrow.gif) 3px;
  4. list-style-image: url(../images/arrow.gif);
  5. }


 
Et pour finir en beauté, voici un dernier soucis. Les parties soumises à la classe contentheading de ma CSS ne s'affiche pas du tout correctement (carré coloré remplaçant les caractères). Voici la partie de la CSS associée :
 
[cpp]

Reply

Marsh Posté le 14-02-2007 à 14:57:20    

Désolé.. erreur de manipulation. Le dernier problème est réglé. J'ai mis en commentaire une puce qui ne m'était pas vraiment utile.

Reply

Marsh Posté le 14-02-2007 à 22:17:46    

merci pour les infos en tout cas

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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