Pb différence d'affichage de code html
jnbailly
Messages postés
13
Date d'inscription
Statut
Membre
Dernière intervention
-
pyschopathe Messages postés 1974 Date d'inscription Statut Membre Dernière intervention -
pyschopathe Messages postés 1974 Date d'inscription Statut Membre Dernière intervention -
Salutatousse,
J'écris un site perso en html simplement.
Avant de passer en IE7 puis IE8 ou Mozilla Firefox, j'utilisais IE6 et l'affichage des liens hypertext de ce site se faisait correctement selon ce que j'entrais en code html. Par exemple :
<style>
body {background: black};
a:link {text-decoration:none; color:000000; font-family:verdana; font-size:12};
a:visited {text-decoration:none; color:#0000FF; font-family:verdana; font-size:12};
a:hover {text-decoration:none; color:#FFFFA0; font-family:verdana; font-size:12; font-weight:bold};
</style>
Mes liens étaient affichés en noir, passaient en jaune clair bold au passage du curseur et revenaient en noir.
Maintenant, les liens restent "bleu souligné" et ne changent pas d'aspect au survol de la souris. Ce pb se produit sur IE8 et Firefox, pas sous IE6 et IE7.
Hors un pb de compatibilité entre les versions de navigateur, je ne comprends pas ce qui se passe.
Quels paramètres utiliser pour que l'affichage désiré à l'origine redevienne correct malgré les différentes versions des navigateurs ?
Merci pour vos réponses, à votre disposition pour toute information complémentaire.
Dans cette attente, apluche,
JNB
J'écris un site perso en html simplement.
Avant de passer en IE7 puis IE8 ou Mozilla Firefox, j'utilisais IE6 et l'affichage des liens hypertext de ce site se faisait correctement selon ce que j'entrais en code html. Par exemple :
<style>
body {background: black};
a:link {text-decoration:none; color:000000; font-family:verdana; font-size:12};
a:visited {text-decoration:none; color:#0000FF; font-family:verdana; font-size:12};
a:hover {text-decoration:none; color:#FFFFA0; font-family:verdana; font-size:12; font-weight:bold};
</style>
Mes liens étaient affichés en noir, passaient en jaune clair bold au passage du curseur et revenaient en noir.
Maintenant, les liens restent "bleu souligné" et ne changent pas d'aspect au survol de la souris. Ce pb se produit sur IE8 et Firefox, pas sous IE6 et IE7.
Hors un pb de compatibilité entre les versions de navigateur, je ne comprends pas ce qui se passe.
Quels paramètres utiliser pour que l'affichage désiré à l'origine redevienne correct malgré les différentes versions des navigateurs ?
Merci pour vos réponses, à votre disposition pour toute information complémentaire.
Dans cette attente, apluche,
JNB
A voir également:
- Pb différence d'affichage de code html
- Code ascii - Guide
- Difference tcp udp - Guide
- Code de déverrouillage oublié - Guide
- Code puk bloqué - Guide
- Difference million milliard - Accueil - Technologies
11 réponses
Pour commencer, la casse.
HEAD != head
Ensuite, il ne doit pas y avoir de ; en dehors des accolades, les unités doivent-être précisées pour les valeurs numériques (10px, 10pt, 10em, 10%).
HEAD != head
Ensuite, il ne doit pas y avoir de ; en dehors des accolades, les unités doivent-être précisées pour les valeurs numériques (10px, 10pt, 10em, 10%).
C'est étrange, ces propriétés CSS sont standard donc Firefox et les dernières versions d'IE devraient les comprendre... Tu n'as pas d'autre style de défini ailleurs qui pourrait expliquer cette différence de comportement ? Ou des commentaires conditionnels ? Il y a quand même une erreur :
a:link {text-decoration:none; color:#000000; font-family:verdana; font-size:12};
Salut psychopathe,
D'abord, merci de t'intéresser à mon cas ;-)
Exact pour le dièse, je n'ai pas rectifié de mes essais mais çà ne change rien.
A part cela, mon code n'apparaît pas dans une feuille de style CSS mais directement dans le début de chaque page html. Hem... je ne maîtrise pas les feuilles CSS...
Je suis d'accord avec toi, c'est du standard, et pourtant...
J'ai aussi essayé de forcer avec <font ....>...</font> entre les <a href> mais que dalle...tout reste bleu...comprends pas...
Je peux t'envoyer une page complète en mail perso si tu veux la passer sur ta machine.
A+
JNB
D'abord, merci de t'intéresser à mon cas ;-)
Exact pour le dièse, je n'ai pas rectifié de mes essais mais çà ne change rien.
A part cela, mon code n'apparaît pas dans une feuille de style CSS mais directement dans le début de chaque page html. Hem... je ne maîtrise pas les feuilles CSS...
Je suis d'accord avec toi, c'est du standard, et pourtant...
J'ai aussi essayé de forcer avec <font ....>...</font> entre les <a href> mais que dalle...tout reste bleu...comprends pas...
Je peux t'envoyer une page complète en mail perso si tu veux la passer sur ta machine.
A+
JNB
essaye de rectifier le tir en faisant
ou tu crées un fichier externe que tu appelles entre <head> et </head> ainsi:
<style type="text/css">/*ton code*/</style>
ou tu crées un fichier externe que tu appelles entre <head> et </head> ainsi:
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Rebonjour,
Merci aussi pour ton aide Jules-Emile.
Premièrement, rectification : çà marche avec IE6/IE8 mais pas avec Firefox 3.0.9 (c'est celle que j'utilise)...
J'ai donc appliqué tes conseils sous Firefox bien sûr mais aussi sous IE8 :
- <style type="text/css">/*ton code*/</style> : pas d'influence, IE8 OK Firefox KO
- <link href="style.css" ... : pas d'influence non plus, IE8 OK Firefox KO
avec un fichier style.css généré comme suit :
BODY {background: #333333};
A:link {text-decoration:none; color:#000000; font-family:verdana; font-size:12};
A:visited {text-decoration:none; color:#000000; font-family:verdana; font-size:12};
A:hover {text-decoration:none; color:#FFFFA0; font-family:verdana; font-size:12; font-weight:bold};
Bref, c'est comme si Firefox ne comprenait pas ni le paragraphe <style> ni la ligne <link>
Je ne m'y connais pas assez pour avoir l'idée d'autres essais (pffff...).
Dans l'attente de futures propositions, merci d'avance.
JNB
Merci aussi pour ton aide Jules-Emile.
Premièrement, rectification : çà marche avec IE6/IE8 mais pas avec Firefox 3.0.9 (c'est celle que j'utilise)...
J'ai donc appliqué tes conseils sous Firefox bien sûr mais aussi sous IE8 :
- <style type="text/css">/*ton code*/</style> : pas d'influence, IE8 OK Firefox KO
- <link href="style.css" ... : pas d'influence non plus, IE8 OK Firefox KO
avec un fichier style.css généré comme suit :
BODY {background: #333333};
A:link {text-decoration:none; color:#000000; font-family:verdana; font-size:12};
A:visited {text-decoration:none; color:#000000; font-family:verdana; font-size:12};
A:hover {text-decoration:none; color:#FFFFA0; font-family:verdana; font-size:12; font-weight:bold};
Bref, c'est comme si Firefox ne comprenait pas ni le paragraphe <style> ni la ligne <link>
Je ne m'y connais pas assez pour avoir l'idée d'autres essais (pffff...).
Dans l'attente de futures propositions, merci d'avance.
JNB
T'es sûr que t'affiches la bonne page ?
As-tu vidé le cache de tes navigateurs ?
Vérifie aussi que ton navigateur n'est pas en mode hors-connexion.
As-tu vidé le cache de tes navigateurs ?
Vérifie aussi que ton navigateur n'est pas en mode hors-connexion.
bah écoute ce n'est pas le cas de firefox sous mac. quand je modifie une page sur un site, je teste et je vois direct la différence (pourtant le cache est activé).
Salutatousse,
Merci à tout le monde de vous pencher sur mon pb.
La version du site publiée n'a pas été mise à jour depuis 2 ans (quelle misère ...), j'ai un peu honte d'en passer l'URL, d'autant plus que c'est complètement foireux avec Firefox.
Pour sosex.fr : je suis un néanderthal du html :-( je dois paraître certainement un peu lourdingue mais je ne sais pas utiliser la balise div, comment appliquer dans mon cas ?
Ce que j'ai fait :
- j'ai généré un fichier style.css comme suit :
#HEAD BODY {background: #333333};
#HEAD A:link {text-decoration:none; color:#000000; font-family:verdana; font-size:12};
#HEAD A:visited {text-decoration:none; color:#000000; font-family:verdana; font-size:12};
#HEAD A:hover {text-decoration:none; color:#FFFFA0; font-family:verdana; font-size:12; font-weight:bold};
- j'ai encadré les liens avec la balise div :
<div id="head">
<table border=1 bordercolor=000000 cellpadding=0 cellspacing=2 width=1050px height=25px align=center>
<tr>
<td bgcolor=#808880 border=1 bordercolor=FFFF88 width=100px height=25px align=center valign=center>
<a href="societe.htm">La société</a>
</td>
<td bgcolor=#808880 border=1 bordercolor=FFFF88 width=100px height=25px align=center valign=center>
<a href="services.htm">Services</a>
</td>
...
...
<td bgcolor=#808880 border=1 bordercolor=FFFF88 width=100px height=25px align=center valign=center>
<a href="cgv.htm">C.G.V.</a>
</td>
</tr>
</table>
</div>
Je confirme : la mise à jour est active sous IE8 ou Firefox, c'est comme çà que je procède après chaque chgmt de mon code.
Mais là, aucun changement : IE8 OK sauf border bizarres, Firefox KO
Pffff ... c'est un peu décourageant c't'histoire ...
Comme beaucoup de navigants utilisent Firefox, j'aimerais quand même que mes pages soient correctes avec ce navigateur.
Si vous avez d'autres idées, n'hésitez pas à les communiquer.
Merci encore pour vos posts.
Dans l'attente, apluche,
JNB
Merci à tout le monde de vous pencher sur mon pb.
La version du site publiée n'a pas été mise à jour depuis 2 ans (quelle misère ...), j'ai un peu honte d'en passer l'URL, d'autant plus que c'est complètement foireux avec Firefox.
Pour sosex.fr : je suis un néanderthal du html :-( je dois paraître certainement un peu lourdingue mais je ne sais pas utiliser la balise div, comment appliquer dans mon cas ?
Ce que j'ai fait :
- j'ai généré un fichier style.css comme suit :
#HEAD BODY {background: #333333};
#HEAD A:link {text-decoration:none; color:#000000; font-family:verdana; font-size:12};
#HEAD A:visited {text-decoration:none; color:#000000; font-family:verdana; font-size:12};
#HEAD A:hover {text-decoration:none; color:#FFFFA0; font-family:verdana; font-size:12; font-weight:bold};
- j'ai encadré les liens avec la balise div :
<div id="head">
<table border=1 bordercolor=000000 cellpadding=0 cellspacing=2 width=1050px height=25px align=center>
<tr>
<td bgcolor=#808880 border=1 bordercolor=FFFF88 width=100px height=25px align=center valign=center>
<a href="societe.htm">La société</a>
</td>
<td bgcolor=#808880 border=1 bordercolor=FFFF88 width=100px height=25px align=center valign=center>
<a href="services.htm">Services</a>
</td>
...
...
<td bgcolor=#808880 border=1 bordercolor=FFFF88 width=100px height=25px align=center valign=center>
<a href="cgv.htm">C.G.V.</a>
</td>
</tr>
</table>
</div>
Je confirme : la mise à jour est active sous IE8 ou Firefox, c'est comme çà que je procède après chaque chgmt de mon code.
Mais là, aucun changement : IE8 OK sauf border bizarres, Firefox KO
Pffff ... c'est un peu décourageant c't'histoire ...
Comme beaucoup de navigants utilisent Firefox, j'aimerais quand même que mes pages soient correctes avec ce navigateur.
Si vous avez d'autres idées, n'hésitez pas à les communiquer.
Merci encore pour vos posts.
Dans l'attente, apluche,
JNB
YESSSSSS !!!!
P@t@ch0n, tu n'es qu'un demi-dieu ...
En effet, bonne nouvelle, les ";" qui apparaissaient à la fin des lignes de code entre les balises <style> étaient de trop. Je les ai supprimés, çà marche !!!
Mais le respect de la casse ( head ou bien HEAD ) n'y a rien fait, bien essayé mais HTML n'est pas case sensitive.
Donc, pour résumer :
- le contenu de mon fichier CSS style.css :
BODY {background: #333333}
A:link {text-decoration:none; color:#000000; font-family:verdana; font-size:12}
A:visited {text-decoration:none; color:#000000; font-family:verdana; font-size:12}
A:hover {text-decoration:none; color:#FFFFA0; font-family:verdana; font-size:12; font-weight:bold}
- la ligne d'appel dans le code HTML :
...
<head>
...
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</link>
</head>
...
Cette écriture fonctionne.
Reste une différence d'affichage en ce qui concerne les "border" et "bordercolor" qui ne sont pas respectées par Firefox et les pavés Google Ads qui s'affichent mal sous IE8 mais c'est beaucoup moins important.
Merci beaucoup à tout le monde pour vos idées, plus ou moins efficaces, mais l'essentiel c'est de participer.
Pour moi, sujet clos.
En route vers de nouvelles aventures !!!
JNB
P@t@ch0n, tu n'es qu'un demi-dieu ...
En effet, bonne nouvelle, les ";" qui apparaissaient à la fin des lignes de code entre les balises <style> étaient de trop. Je les ai supprimés, çà marche !!!
Mais le respect de la casse ( head ou bien HEAD ) n'y a rien fait, bien essayé mais HTML n'est pas case sensitive.
Donc, pour résumer :
- le contenu de mon fichier CSS style.css :
BODY {background: #333333}
A:link {text-decoration:none; color:#000000; font-family:verdana; font-size:12}
A:visited {text-decoration:none; color:#000000; font-family:verdana; font-size:12}
A:hover {text-decoration:none; color:#FFFFA0; font-family:verdana; font-size:12; font-weight:bold}
- la ligne d'appel dans le code HTML :
...
<head>
...
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</link>
</head>
...
Cette écriture fonctionne.
Reste une différence d'affichage en ce qui concerne les "border" et "bordercolor" qui ne sont pas respectées par Firefox et les pavés Google Ads qui s'affichent mal sous IE8 mais c'est beaucoup moins important.
Merci beaucoup à tout le monde pour vos idées, plus ou moins efficaces, mais l'essentiel c'est de participer.
Pour moi, sujet clos.
En route vers de nouvelles aventures !!!
JNB