Code HTML / CSS : demande aide car différences sous IE et Firefox

super_newbie_pro · 22 Octobre 2008

Bonjour

Je suis en train de créer un site en HTML et j'ai un problème. Les pages en ligne, je n'arrive pas à obtenir le même résultat que ce soit sous IE ou Firefox.

Voici le code utilisé qui pose problème :

<head>
 (..... blabla .....)
<STYLE type=text/css>
BODY {
	SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; 
	SCROLLBAR-SHADOW-COLOR: #333333; SCROLLBAR-3DLIGHT-COLOR: #666666; 
	SCROLLBAR-ARROW-COLOR: #666666; SCROLLBAR-TRACK-COLOR: #000000; 
	SCROLLBAR-DARKSHADOW-COLOR: #000000; BACKGROUND-COLOR: #000000
}
A:link {
	COLOR: #FFFFFF; TEXT-DECORATION: none
}
A:active {
	COLOR: #FFFFFF; TEXT-DECORATION: none
}
A:visited {
	COLOR: #FFFFFF; TEXT-DECORATION: none
}
A:hover {
	COLOR:#FFFF00; TEXT-DECORATION: underline
}
</STYLE>
 (..... blabla .....)
</head>

Voila le résultat :

Sous IE 7.0.5730.11 la barre de menu prend le bon aspect :

{img}http://www.************.fr/webmaster/ie_navig_oui.jpg{/img}

Sous Firefox 3.0.3 la barre de menu ne prend pas le bon aspect :

{img}http://www.************.fr/webmaster/firefox_navig_non.jpg{/img}

===============

Changement couleur du cadre de l'image au survol de souris

Sous IE 7.0.5730.11 le passage de la souris sur l'image ne fait pas réagir son cadre :

{img}http://www.************.fr/webmaster/ie_image_non.jpg{/img}

Sous Firefox 3.0.3 le passage de la souris sur l'image fait réagir son cadre :

{img}http://www.************.fr/webmaster/firefox_image_oui2.jpg{/img} {img}http://www.************.fr/webmaster/firefox_image_oui1.jpg{/img}

================

Les marges dont voici le code : <body background="menu02_droite_c.jpg" style="background-attachment: fixed" topmargin="20" leftmargin="10" rightmargin="90" bottommargin="5">

Sous IE 7.0.5730.11 la marge n'est pas pris en compte :

{img}http://www.************.fr/webmaster/ie_marge_non.jpg{/img}

Sous Firefox 3.0.3 la marge est bien pris en compte :

{img}http://www.************.fr/webmaster/firefox_marge_oui.jpg{/img}

================

Le son en arrière plan dont voici le code :

<head>
(..... blabla .....)

<bgsound src="fond_entree.mp3" loop="1">

(..... blabla .....)

</head>

Sous IE 7.0.5730.11 le son est bien lu

Sous Firefox 3.0.3 le son n'est pas lu :

Voici l'adresse du site en travaux si besoin est : -http://www.************.fr

Que faire pour régler ces problèmes ? D'avance merci pour vos renseignements, infos, suggestions... (je ne fais pas de PHP).

:hello:

Modifié 26 Octobre 2008 par Dudu
Références au site supprimées à la demande de l'auteur

**Dadou** · 22 Octobre 2008

La possibilité de personnaliser les scrollbars n'est possible que sous IE, donc normal que tu n'es pas le même résultat sous IE et Firefox.

Quand à l'effet de survol sur l'image, l'ordre de déclaration des effets n'est pas le bon : l'ordre est Link - Visited - Hover - Active (LoVe HAte)

Quand a ton problème de marge utilises plutôt les styles, ce sera plus propre

PotatoesJunky · 22 Octobre 2008

Tout ça est parfaitement normal, IE et les navigateurs basés sur Mozilla n'interprètent pas certaines choses de la même manière (c'est évidemment IE le fautif...).

1) les scrollbars (ou barres de défilement) : c'est un code propriétaire Microsoft, les autres navigateurs ne peuvent donc l'utiliser.

2) le rollover sur les images : je ne sais pas s'il existe une solution, mais s'il y en a une, tu la trouveras sur les sites de références comme alsacreations.com ou openweb.eu.org

Solution alternative : créer une image réactive (l'image change d'aspect au rollover). Ca, ça fonctionne sur tous les navigateurs récents.

3) Pour les marges, explications ici.

4) Le son... Avis perso : ça ralentit le temps de chargement de la page, ça risque fortement d'ennuyer le visiteur qui surfe en écoutant sa propre musique et c'est inutile pour les visiteurs qui n'ont pas le son sur leur bécane (ou dont les baffles sont éteintes). Conclusion : le pourcentage de personnes qui trouveront ça intéressant est très réduit. A mon sens, aucun intérêt (et en plus, je n'ai pas étudié la question et ne peux donc proposer de solution^^).

super_newbie_pro · 22 Octobre 2008

La possibilité de personnaliser les scrollbars n'est possible que sous IE, donc normal que tu n'es pas le même résultat sous IE et Firefox.

Quand à l'effet de survol sur l'image, l'ordre de déclaration des effets n'est pas le bon : l'ordre est Link - Visited - Hover - Active (LoVe HAte)

Quand a ton problème de marge utilises plutôt les styles, ce sera plus propre

Tout ça est parfaitement normal, IE et les navigateurs basés sur Mozilla n'interprètent pas certaines choses de la même manière (c'est évidemment IE le fautif...).
1) les scrollbars (ou barres de défilement) : c'est un code propriétaire Microsoft, les autres navigateurs ne peuvent donc l'utiliser.

2) le rollover sur les images : je ne sais pas s'il existe une solution, mais s'il y en a une, tu la trouveras sur les sites de références comme alsacreations.com ou openweb.eu.org

Solution alternative : créer une image réactive (l'image change d'aspect au rollover). Ca, ça fonctionne sur tous les navigateurs récents.

3) Pour les marges, explications ici.

4) Le son... Avis perso : ça ralentit le temps de chargement de la page, ça risque fortement d'ennuyer le visiteur qui surfe en écoutant sa propre musique et c'est inutile pour les visiteurs qui n'ont pas le son sur leur bécane (ou dont les baffles sont éteintes). Conclusion : le pourcentage de personnes qui trouveront ça intéressant est très réduit. A mon sens, aucun intérêt (et en plus, je n'ai pas étudié la question et ne peux donc proposer de solution^^).

Merci à vous deux. J'ai modifié les pages du site. Sous IE c'est pas super joli mais j'ai changé les couleurs pour que les scrollbars ne fassent pas horrible. Sous Firefox, tout beigne.

Finalement, j'ai mis le logo "site web optimisé pour firefox" comme ça, les gens sont prévenus. Pour l'ordre de l'effet de survol, je l'ai refait et ça ne change rien ; sous firefox ça marche, sous IE ça ne marche pas.

Je vais donc suivre le conseil donné par PotatoesJunky et mettre des images réactives. Merci à vous

Modifié 22 Octobre 2008 par super_newbie_pro

super_newbie_pro · 23 Octobre 2008

Pour le redimensionnement des images de fond en fonction de la résolution de l'écran, j'ai décidé de mettre un tableau dont la dimension est limitée à 980 de côté. Ainsi, en 1024 ou plus, les images dans le tableau de 980 ne seront plus bougées décalant ainsi les textes par rapport aux images... Exemple du tableau comme ici ==> http://www.************.fr/essai.html

On vient de me filer cette astuce aussi pour que le changement de couleur soit compatible avec tous les navigateurs :

<STYLE type=text/css>
A:hover {

COLOR:#FFFF00;

border: 1px solid #FFFF00;

}

</STYLE>

De même pour les marges, pour que ça soit compatible firefox/IE, on m'a donné ça :

<STYLE type=text/css>
* {margin:0;}

</STYLE>

Par contre j'ai besoin de mettre du texte en demi arrondi sur mes images. J'utilise Frontpage et Dreamweaver d'une manière alternative en fonction de ce que je veux faire. Comment diable mettre un texte en demi arrondi, ou en biais, ou à l'envers, comme on peut le faire dans Publisher ? Et pour que ça soit compatible firefox/IE ?

Merci

Modifié 26 Octobre 2008 par Dudu
Références au site supprimées à la demande de l'auteur

super_newbie_pro · 23 Octobre 2008

Oubli d'une question très très importante mais je ne peux plus éditer :

Jusqu'à maintenant, je pensais que ça ne pouvait être fait qu'en flash. Mais peut être que non qui sait. Sur le site que je suis en train de faire -http://www.************.fr à deux reprises je voulais faire un effet de zoom sur un paysage avant qu'apparaisse les menus. C'est notamment le cas quand vous cliquez sur l'index, sur le drapeau FR, puis, quand le menu aura apparu, quand vous cliquerez sur association. Comme je ne maitrise pas le flash et que je ne savais pas comment faire cet effet de zoom, j'ai simplement agrandi la photo à coup de 20% et enregistré chaque image, mise chacune dans une page, qui se redirige automatiquement vers la suivante aprés 2 secondes... C'est vraiment du bricolage. Auriez-vous une solution plus simple, compatible firefox et IE, qui permettrait de se passer de la redirection automatique 6 fois de suites pour simuler un zoom, quitte à faire un vrai zoom ? Est-ce faisable en HTML/Javascript/css ?

Merci

Modifié 26 Octobre 2008 par Dudu
Références au site supprimées à la demande de l'auteur

PotatoesJunky · 23 Octobre 2008

Euh... Comment dire...

Bon, ça va être simple : il faudrait tout refaire.

Pas de grandes photos en arrière-plan (en 1680x1050, par exemple, ton arrière-plan se répète, c'est très moche et pas vraiment lisible.

Oublie la musique et les effets de zoom pour le moment et démarre sur quelque chose de simple et fonctionnel que tu pourras améliorer plus tard.

Le site alsacreations te fournit une quinzaine de gabarits basiques en CSS qui peuvent te servir pour construire ton site.

Dudu · 24 Octobre 2008

Salut

Finalement, j'ai mis le logo "site web optimisé pour firefox" comme ça, les gens sont prévenus.

super_newbie_pro,

comme ton pseudo semble l'indiquer, tu es débutant. Donc je vais essayer d'être diplomate avec toi.

Mais les logos "optimisé pour Untel" ou "optimisé pour UnAutre", il faut savoir leur dire non. Tout simplement non.

Aujourd'hui, il y a des dizaines de navigateurs différents.

Il y a 10 ans, il n'en existait que 2 (je schématise): Internet Explorer, et Netscape.

Je ne sais pas si tu as connu cette époque, moi si.

À cette époque, visiter un site Internet c'était un sport de haut niveau. Certains sites s'affichaient mal sur NS et bien sur IE. Certains autres s'affichaient mal sur IE et bien sur NS.

Et chaque site affichait fièrement son petit logo "site optimisé pour ...".

Et c'était la galère, tu passais d'un navigateur à l'autre pour afficher tel ou tel site.

Aujourd'hui, on est en 2008 et comme je le disais, il y a plein de navigateurs différents. Et on n'a pas envie de reproduire toutes ces erreurs du passé, on veut que chaque navigateur affiche la même chose, on veut que chaque internaute soit libre d'utiliser le navigateur qui lui plaît, on n'a plus envie de devoir changer de navigateur parce que tel ou tel site est "optimisé pour..."

D'ailleurs, en quoi ton site est optimisé pour Firefox ? En rien !

Tu as juste constaté que ton site s'affichait mieux sous Firefox que sous Explorer, donc tu dis "optimisé pour Firefox". Mais quelle optimisation concrète ?

Dernier point: je n'utilise ni Explorer ni Firefox. J'utilise un navigateur que je pense meilleur que ces deux-là.

Alors pour visiter ton site "optimisé pour Firefox", il faut que j'utilise quoi ?

Désolé pour ce petit coup de gueule, ne m'en veux pas, mais les sites "optimisés pour" je ne peux plus les voir :nonono:

Pour conclure: je rejoins l'avis donné ci-dessus par PotatoesJunky.

Avant de te lancer dans les sons, les Flash, les zooms, les redimensions d'images, les barres d'ascenceurs colorées, les gadgets qui clignotent, et les guirlandes qui font joli... revois d'abord les fondations de ton site, les bases.

Ton fond d'écran s'affiche mal sur de grandes résolutions d'écran.
Ta page d'accueil affiche un menu avec plusieurs langues. Moi je veux lire ton site en allemand. C'est pour quand la version allemande ?
Ton code HTML est plutôt mauvais. Tu es sûr de vouloir faire des effets de zoom AVANT de savoir écrire correctement en HTML ???
Ta page index2.html s'affiche TRÈS mal. Notamment à cause des nbsp partout et des balises HTML mal imbriquées. Par contre, j'ai un joli son de cor de chasse.. était-ce la chose la plus importante ? (ça m'a fait perdre un dixième à chaque oreille).
La page fr_menu_drapeau_sanguei.html s'affiche très mal également...
Sur la page essai.html, le texte jaune n'est PAS DU TOUT sur le visage du yogi chez moi.
etc etc..

super_newbie_pro · 24 Octobre 2008

Mouarrff... :smartass: Bien pris pour les critiques, je vais rectifier ça lundi.

Merci :thumbsup:

Connexion

Code HTML / CSS : demande aide car différences sous IE et Firefox

Sujets conseillés

super_newbie_pro

Dadou

PotatoesJunky

super_newbie_pro

super_newbie_pro

super_newbie_pro

PotatoesJunky

Dudu

super_newbie_pro

Veuillez vous connecter pour commenter

Parcourir

Activité