CSS pas backward compatible de IE5 à IE6 ??

CSS pas backward compatible de IE5 à IE6 ?? - Divers - Programmation

Marsh Posté le 24-10-2003 à 20:23:29    

Bonjour, cela fait logtemps que je n'ai plus posté sur ce forum.. :hello:  
Bon, je viens de faire un site pour un ami d'enfance.
 
sur cette page :  http://www.patrickfaure.net/links.htm  ..les liens font appel à un style CSS issue d'une feuille de style.
 
sous IE 5 et 5.5 les hovers apparaissent bien sur les liens (donc texte blanc gras et liens bleus) mais sous cette merdasse de IE6, plus rien !! pas de hovers.
 
De ce que je comprends, IE6 semblent gérer les CSS differemment en fonction des "DIV" ..
mais que ce soit avec DIV ou SPAN j'ai le même problème..
 
 
 
voici le code pour essayer de comprendre comment faire fonctionner le CSS sous IE6 :
 
l'appel à la feuille de style:
 

Code :
  1. <link rel="stylesheet" href="styleCA.css" type="text/css">


 
le style CSS à l'interieur:
 
.Lien {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #FFFFFF; font-weight: 700; font-style: normal; a: link {color: #A698FB}; a:hover {color: #FFFFFF}; text-align: center}
 
 
 
dans la page HTML :
 

Code :
  1. <td valign="top" class="Soustitre">
  2.       <p class="Soustitre"><font color="#FFFFFF"><a href="http://www.spinaudio.com" target="_blank"><span class="Lien">www.spinaudio.com</span></a>
  3.         professional</font> audio equipment


 
 
le même problème apparaît pour cette page d'un site pour une association (les menus du haut ) avec Div:  
 
http://lechoeur.levillage.org/
 
l'appel à la feuille de style:
 

Code :
  1. <link rel="stylesheet" href="styleCA.css" type="text/css">


 
le style CSS à l'interieur:
 
.Comicss {  font-family: "Comic Sans MS", FranklinGothic; font-size: 11pt; color: #5E4717; font-weight: 700; font-style: normal; a: link {color: #5E4717}; a:hover {color: #E79D03}; text-align: center}
 
 
dans la page HTML :
 

Code :
  1. <div id="menuHaut" style="position:absolute; width:580px; height:20px; z-index:2; left: 250" class="Comicss">
  2.   <table width="580" border="0" cellspacing="0" cellpadding="0">
  3.     <tr>
  4.       <td class="Comicss">
  5.         <div align="center"><a href="01A01Present.htm" class="Comicss">Presentation</a></div>
  6.       </td>
  7.       <td class="Comicss">
  8.         <div align="center"><a href="02A01Agenda.htm" class="Comicss">Spectacles</a></div>
  9.       </td>
  10.       <td class="Comicss">
  11.         <div align="center"><a href="03A01FicheSig.htm" class="Comicss">Dossier
  12.           de Presse</a></div>
  13.       </td>
  14.       <td>
  15.         <div align="center"><a href="04A00Login.htm" class="Comicss">Membres</a></div>
  16.       </td>
  17.  <td>
  18.         <div align="center"> &&<a href="05A01Sites.htm" class="Comicss">Liens</a><font color="#6666FF">&&</font></div>
  19.       </td>       
  20.     </tr>
  21.   </table>
  22. </div>


 
 
Si qqun pouvait m'expliquer ce qu'il faut corriger pour que le CSS fonctionne souos IE6.. :jap:  
 

Reply

Marsh Posté le 24-10-2003 à 20:23:29   

Reply

Marsh Posté le 24-10-2003 à 20:29:53    

Heu... ton CSS est très bizarre... Y a des trucs louches avec tes accolades, des blocs dans des blocs, etc.
http://jigsaw.w3.org/css-validator [...] medium=all


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 24-10-2003 à 20:35:55    

Serveur a écrit :


 
le style CSS à l'interieur:
 
.Comicss {  font-family: "Comic Sans MS", FranklinGothic; font-size: 11pt; color: #5E4717; font-weight: 700; font-style: normal; a: link {color: #5E4717}; a:hover {color: #E79D03}; text-align: center}
 
 


 
C'est quoi ce truc franchement ??  :heink:  
 
C'est trop dur d'écrire les choses comme il faut :
 

Code :
  1. .Comics {
  2. font-family: couleur;
  3. font-weight: ...
  4. font-style: ...
  5. .
  6. .
  7. .
  8. }


 

Reply

Marsh Posté le 25-10-2003 à 11:54:44    

Hermes le Messager a écrit :


 
C'est quoi ce truc franchement ??  :heink:  
 
C'est trop dur d'écrire les choses comme il faut :
 

Code :
  1. .Comics {
  2. font-family: couleur;
  3. font-weight: ...
  4. font-style: ...
  5. .
  6. .
  7. .
  8. }


 
 


 
Ta mise en forme est plus propre (pour la lecture) mais en code c'est identique (condensé)...    
 .Comics { font-family: couleur;font-weight: ...; font-style: ... }
chacun sa manière de voir le code plus facilement.. en attendant cela ne répond pas au probleme qu'IE6 ne voit pas le CSS à l'inverse de IE5 et 5.5 qui le voit , même si je le mets dans ta mise en forme.. :)
 
par contre ANTP, merci je remarque que la balise font pose problème (qqun d'autre pense que le problème vient de là aussi).
 
je ferai un test en séparant le style de la font et celui du hover.. :jap:


Message édité par serveur le 25-10-2003 à 11:58:41
Reply

Marsh Posté le 25-10-2003 à 12:05:11    

Serveur a écrit :

mais en code c'est identique (condensé)...    


 
non, car quand on l'écrit proprement on se rend plus vite compte que c'est bizarre de mettre des classes dans des classes :D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 25-10-2003 à 12:10:28    

antp a écrit :


 
non, car quand on l'écrit proprement on se rend plus vite compte que c'est bizarre de mettre des classes dans des classes :D


 
c'était accepté sous IE5.xx  .. et cela permettait d'avoir un seul style avec plusieurs attributs. Je ne sais pas pourquoi IE6 ne l'accepte plus.
 
et si tu retires l'inclusion d'une classe à l'interieur d'une autre , l'ecriture de :
 
.Comicss {  font-family:  FranklinGothic; font-size: 11pt; color: #5E4717 }
 
ou  
 
.Comicss {
font-family:  FranklinGothic;
font-size: 11pt;
color: #5E4717 ;
}
en code c'est identique.
 
 


Message édité par serveur le 25-10-2003 à 12:15:11
Reply

Marsh Posté le 25-10-2003 à 12:44:23    

Serveur a écrit :


 
.Comicss {  font-family:  FranklinGothic; font-size: 11pt; color: #5E4717 }
 
ou  
 
.Comicss {
font-family:  FranklinGothic;
font-size: 11pt;
color: #5E4717 ;
}
en code c'est identique.
 


 
oui, mais ici c'est :
 
.Comicss {
font-family:  FranklinGothic;
font-size: 11pt;
color: #5E4717 ;
  a:hover {
    autres trucs
  }
}
 
Ça n'existe pas en CSS, et si ça passe c'est à mon avis par hasard...


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 25-10-2003 à 13:24:58    

:hello:
oui j'avais bien compris, mais si on ne peut inclure les hovers dans un style avec des fonts , comment faites vous pour affecter deux styles à un ensemble de texte ? c'est à dire un qui determine la couleur et taille de la police et l'autre l'attribut d'un hover ?
 
a moins que hover et link soient des styles a part et qu'on ne les affectent pas dans un nom de style ?
 


Message édité par serveur le 25-10-2003 à 13:29:43
Reply

Marsh Posté le 25-10-2003 à 13:26:14    

a.comicss:hover{
...
}
a.comicss {
...
}


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 25-10-2003 à 13:26:44    

FranklinGothic c'est pas super standard comme police ça :/
précise au moins une alternative


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 25-10-2003 à 13:26:44   

Reply

Marsh Posté le 25-10-2003 à 13:31:06    

the real moins moins a écrit :

a.comicss:hover{
...
}
a.comicss {
...
}


 
rahhhh merci .. voilà la réponse.  
 
Merci, merci à tous d'avoir répondu.
 :jap:  :jap:
 
franklin gothic comme standard tu as raison je croyais qu'il était dans les fontes par défaut de Win.. :D


Message édité par serveur le 25-10-2003 à 13:33:00
Reply

Marsh Posté le 25-10-2003 à 13:32:58    

the real moins moins a écrit :

a.comicss:hover{
...
}
a.comicss {
...
}


 
Faut plustot les préciser dans l'autre sens sinon les propriétés de a.comicss risquent d'écraser les réglages fait pour :hover

Reply

Marsh Posté le 25-10-2003 à 13:34:43    

Kristoph a écrit :


 
Faut plustot les préciser dans l'autre sens sinon les propriétés de a.comicss risquent d'écraser les réglages fait pour :hover


 
merci ,  :jap:  :jap:  , car tu viens de répondre à un autre problème secondaire que j'avais...

Reply

Marsh Posté le 25-10-2003 à 13:38:14    

Et aussi, à l'avenir, utilise un véritable éditeur pour l'HTML/CSS/JS/PHP etc... et non dreamweaver... (JEdit au hasard)

Reply

Marsh Posté le 25-10-2003 à 16:35:22    

Hermes le Messager a écrit :

Et aussi, à l'avenir, utilise un véritable éditeur pour l'HTML/CSS/JS/PHP etc... et non dreamweaver... (JEdit au hasard)
 


 
Je ne connais pas JEdit .. et excuse moi de ne pas avoir utilisé ni eu la connaissance pour corriger ce problème de CSS ..
quant à dreamweaver, il ne sort peut-être pas le code propre à rêver, mais je ne me plains pas pour l'instant de ce qu'il me fait vu la rapidité à la quelle je peux monter des sites, après c'est qu'une histoire d'optimisation (je repasse derrière, et là je n'ai pas eu le temps vu que c'est moi qui fait la traduction du site également).
De plus l'éditeur HTML ne pourra rien faire face aux évolutions propriétaire de IE si MS décide d'interpréter le CSS de telle manière..
 
enfin bon , merci à ANTP pour avoir passer du temps sur l'analyse du problème et Real pour le code exact.
 
 :jap:  :jap:  
 
cependant j'ai mis comme ceci (a moins que cela ne soit pas correct) et je n'ai pas les hovers , ni dans IE5xx ni IE6 .. :??:  :
 

Code :
  1. <link rel="stylesheet" href="styleCA.css" type="text/css">


 
 
dans le fichier styleCA.css
 
 
.Comicss {  
font-family: "Comic Sans MS", FranklinGothic;  
font-size: 11pt;  
color: #5E4717;  
font-weight: 700;  
font-style: normal;  
text-align: center
}
a.Comicss :  hover {
color: #E79D03
}
 
 
dans la page
 

Code :
  1. <a href="01A01Present.htm" class="Comicss">Presentation</a>


 
 
et je n'ai pas les hovers , ni dans IE5xx ni IE6 .. :??:  


Message édité par serveur le 25-10-2003 à 17:18:25
Reply

Marsh Posté le 25-10-2003 à 20:43:35    

je viens de regarder JEdit, ç'est sympa comme tout.
 
je vais tester avec le code plus haut voir ce que cela donne..

Reply

Marsh Posté le 25-10-2003 à 21:29:21    

Je pense qu'il ne fait pas d'espace avant et après le ":" qui précède "hover", ça doit avoir son importance


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 25-10-2003 à 21:33:32    

Serveur a écrit :

je viens de regarder JEdit, ç'est sympa comme tout.
 
je vais tester avec le code plus haut voir ce que cela donne..


 
N'oublies pas d'aller sur le topic consacré à JEdit, il y a un tuto de dispo ;)

Reply

Marsh Posté le 25-10-2003 à 22:00:03    

Serveur a écrit :


(...)
dans le fichier styleCA.css
 
 
.Comicss {  
font-family: "Comic Sans MS", FranklinGothic;  
font-size: 11pt;  
color: #5E4717;  
font-weight: 700;  
font-style: normal;  
text-align: center
}
a.Comicss :  hover {
color: #E79D03
}
 
 
dans la page
 

Code :
  1. <a href="01A01Present.htm" class="Comicss">Presentation</a>


 
 
et je n'ai pas les hovers , ni dans IE5xx ni IE6 .. :??:  

Essaye comme cela :
 

Code :
  1. .Comicss { 
  2. font-family: "Comic Sans MS", FranklinGothic; 
  3. font-size: 11pt; 
  4. color: #5E4717; 
  5. font-weight: 700; 
  6. font-style: normal; 
  7. text-align: center
  8. }
  9. .Comicss a:hover {
  10. color: #E79D03
  11. }


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 25-10-2003 à 22:52:59    

C'est pas plustot :

Code :
  1. a:hover.comicss {
  2. color: #E79D03
  3. }


Reply

Marsh Posté le 25-10-2003 à 22:58:32    

Non, a.Comicss:hover
:D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 25-10-2003 à 23:14:57    

PLutot ça :
 
.Comicss a:hover {
color: #E79D03
}
 
Au moins, tu es sur que cela marche (testé et utilisé par mes soins).


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 25-10-2003 à 23:18:59    

Par exemple (utilisé dans un DIV unique d'ou le "#" à la place du "." au début de ligne) :
 
#menu ul li a:hover {
 border-bottom: 1px solid #ccc;
}


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 25-10-2003 à 23:36:08    

Gilbert Gosseyn a écrit :

PLutot ça :
 
.Comicss a:hover {
color: #E79D03
}
 
Au moins, tu es sur que cela marche (testé et utilisé par mes soins).


 
Je ne suis pas d'accord : ça ne devrais affecter que les balises A placées à l'interrieur d'une balise de classe Comicss

Reply

Marsh Posté le 25-10-2003 à 23:39:22    

C'est pas ce que tu veux ?
 
Edit : vu ton code de page, tu devrais affecter le style aux balises DIV à l'intérieur du tableau. Comme cela, ça sera déjà mieux.


Message édité par Gilbert Gosseyn le 25-10-2003 à 23:41:10

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 25-10-2003 à 23:59:47    

En regardant bien, ça a l'air d'être exactement ce qu'il voulait faire en effet :)
 
Par contre, j'ai de gros doutes sur la compatibilité de cette notation "avancée" avec les divers versions d'IE.

Reply

Marsh Posté le 26-10-2003 à 00:01:19    

le truc « classe balise { ... } » ? non ça fonctionne pas mal dans IE 5.0/6.0, je l'utilise sur mon site pour mon menu (à gauche) qui est un <ul> customisé :)


Message édité par antp le 26-10-2003 à 00:01:45

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 26-10-2003 à 10:29:20    

Kristoph a écrit :

En regardant bien, ça a l'air d'être exactement ce qu'il voulait faire en effet :)
 
Par contre, j'ai de gros doutes sur la compatibilité de cette notation "avancée" avec les divers versions d'IE.

Cette notation avancée marche avec IE 5.0+ (testé par mes soins). D'ailleurs, les versions 5.X sont plus tolérentes que la version 6.0 de IE. Plus propres aussi quelquepart, même si elles ne supportent pas autant de choses ...


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 26-10-2003 à 10:29:45    

antp a écrit :

le truc « classe balise { ... } » ? non ça fonctionne pas mal dans IE 5.0/6.0, je l'utilise sur mon site pour mon menu (à gauche) qui est un <ul> customisé :)

Idem ;).


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 26-10-2003 à 10:44:22    

Et la notation :
 
div > p > a
{ }
 
Elle marche dans quelles versions d'IE ?

Reply

Marsh Posté le 26-10-2003 à 10:56:21    

Aucune je pense :D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 26-10-2003 à 11:07:17    

je confirme

Reply

Marsh Posté le 26-10-2003 à 11:09:15    

antp a écrit :

Aucune je pense :D


 
Alors je le note dans ma liste de trucs à utiliser à tout prix :D

Reply

Marsh Posté le 26-10-2003 à 11:13:11    

Kristoph a écrit :


 
Alors je le note dans ma liste de trucs à utiliser à tout prix :D

[:rofl]


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 27-10-2003 à 10:03:41    

merci beaucoup gilbert. :jap:  :jap:  
 
cela fonctionne effectivement , et à ma surprise il ne faut pas d'espace entre le a le ":" et le hover..(merci encore antp)
 
je voulais effectivement affecter ces hovers uniquement à cette classe..(le site n'est fini qu'au 2/3 , et je vais pouvoir le finir grâce à vous..merci pour l'association soit dit en passant  :)  )
 
 :hello:

Reply

Marsh Posté le 27-10-2003 à 11:11:37    

Pour une fois que je peux être utile ...


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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