diference entre IE et mozzila ainsi que probleme de validationRésolu/Fermé

Question

Bonjour, je suis débutant dans la création de site (commencé il y a 2 semaine) j'ai créer un site pour mon entreprise mais je me retrouve confronté a quelques petits soucis certainement du a des erreurs de débutant mes problèmes concernant IE: -mon 1er problème se situe sur IE en effet quand je vais sur mon site sur Mozilla aucun problème alors que sur IE les images qui ont un lien sont encadrer par un trait blanc qui disparait quand la souris est dessus -mon 2eme problème toujours concernant IE sur la page"nos métiers" les images qui sont en arrière plan des cellules du tableau n'apparaissent pas alors que sur Mozilla tout fonctionne ensuite mes problème concernant la validation: -lorsque je valide mes pages je n'ai pas d'erreur mais 3 avertissement (Result: Tentatively passed, 3 warning(s)) et il explique : No Character Encoding Found! Falling back to windows-1252. alors d'après ce que j'ai cru comprendre il ne trouve pas la bonne façon d'ouvrir ma page et il cherche quelque chose qui s'appel UTF-8 (encore une fois je suis novice donc vous allez peut être rire en voyant ça, mais j'ai bien envie de m'améliorer dans la création de site donc je suis prêt a recevoir tous les conseils) -2eme problème , sur la page "nos metiers" il me marque 1 erreur: Line 33, Column 34: there is no attribute "background" suivi de 4 erreur identiques: Error Line 59, Column 56: required attribute "alt" not specified

Error Line 65, Column 58: required attribute "alt" not specified ...

Error Line 70, Column 56: required attribute "alt" not specified

Error Line 75, Column 56: required attribute "alt" not specified

voila c'est tout je pense merci de votre aide voici l'adresse de mon site : http://spad-acces.fr voici avec quoi je valide mes pages : https://www.7-dragons.com/ si vous avez besoin d'autre renseignement je répondrais le + rapidement possible Configuration: Windows 8 / Firefox 24.0

Pitet · Accepted Answer

Salut, Premièrement il est extrêmement déconseillé de demander à l'utilisateur de changer de navigateur (sous quel droit d'ailleurs ?). C'est à toi d'adapter ton site aux visiteurs, pas l'inverse. IE est un navigateur très utilisé et performant (malgrès que beaucoup de "développeur web" croient l'inverse). Soit on fait avec, soit on ne fait pas. Ton premier problème avec l'encadrement des images sur IE peut être réglé avec un peu de css, par exemple : img { border: none; } (on enlève les bordures de toutes les balises img) Ton deuxième problème concernant les images provient d'une erreur de syntaxe (erreur de validation n°2). En effet l'attribut background n'existe pas en html, il s'agit d'une propriété css. Il faut donc corriger ton code comme ceci :

NanoPish · Answer

Je vous conseille de mettre une alerte "pop up" qui informe les gens que votre site est optimisé pour mozilla firefox et qui leur conseille de le télécharger car il y a  beaucoup de problème de c,e genre avec internet explorer. De plus mozilla firefox est un bien meilleurs logiciel, ça ne pourra qu'aider les gens. Sinon je trouve le design du site trés propre bien joué.
Sinon, l'UTF 8 est un format d'encodage super courant (la majorité des sites web l'utilisent) qui permet d'intégrer à peu près tous les caractères et caractères spéciaux dans le code de ton site (plus d'info ici https://fr.wikipedia.org/wiki/UTF-8
Sinon je ne sais pas tp pour les autres problèmes, je ne suis pas programmeur, je laisse un expert répondre par rapport au code en lui même :).

palpatine38 · Answer

merci de la réponse
pourrais tu me dire comment on fait pour mettre une alerte "pop up"

NanoPish · Answer

Je ne suis pas programmeur mais je pense qu'il faut pour cela développer ou utiliser un script approprié. 
On peut trouver ce genre de script en ligne :
Ici en javascript : http://www.destrucsaweb.com/ressources/phpmyannu/goto_36.php
Ou la pour un site en HTML5 ça devrait marcher: http://www.editeurjavascript.com/scripts/scripts_navigation_1_51.php

Bonne chance :)

palpatine38 · Answer

merci de ta réponse
alors avec img { border: none; } ça a marché merci bien
j'avais essayer des choses du genre mais sans succès

pour l'erreur 2 c'est corrigé

ensuite la dernière j'ai pas tout saisi
il faut que j'enlève : lang="fr" ?

me reste plus que le problème des image qui s'affiche pas dans la page "nos métiers" et seulement sur IE et se serra OK

une autre question au cas où
j'arrive a régler la vitesse de transition du diaporama grâce a :
* {transition-duration: 1.2s;} dans mon CSS mais j'arrive pas a trouver ce qu'il faut écrire pour régler la durée d'affichage des images

Pitet · Answer

Pour la dernière erreur, il s'agit des balises scripts. Il faut que tu corrige cette ligne : par celle-ci (on enlève l'attribut language) : Pour les images de la page Nos métiers, la solution est dans mon précédent message. Pour la transition du diaporama, tu peux essayer avec la propriété transition-delay. Par contre dans ton exemple tu appliques la propriété transition-duration sur le sélecteur * donc pour toutes les balises html. Il serait mieux de cibler précisement la balise html qui contient ton diaporama. J'avais oublié l'erreur sur l'encodage de ta page. Il faut que tu ajoute une balise meta au début de l'entête html de ton document : Si tu as des problèmes avec les caractères spéciaux (accents...) suite à l'ajout de cette meta, il faudra convertir ton fichier source en UTF-8 (avec Notepad++par exemple).

palpatine38 · Answer

re bonjour
dsl je m'étais absenté
encore merci pour ta réponse
alors language=javascript enlever ça marche

ensuite la balise meta effectivement si je la met j'ai un problème avec les accents
donc si j'ai bien compris il faut que je convertisse avec notepad++
j'ai notepad
je suppose que c'est dans l'onglet encodage (ANSI) il faut que je mette UTF-8

pour le diaporama effectivement je sélectionne car en fait j'ai trouver cette écriture en cherchant a droite et gauche sur des forum et quand j'ai vu que ça marchait j'ai pas insister +
par contre transition delay j'avais déjà essayer et je l'ai retenter et ça marche pas ... tans pis c'était un bonus au cas ou

pour les image d'arrière plan de mes cellule depuis que j'ai mis ton code ça ne marche plus ni sur IE ni sur Mozilla 
ai-je mal recopier ce que tu as écrit (pourtant j'ai fait copier coller)

palpatine38 · Answer

voila j'ai tout passé en utf-8

-j'ai valider les pages ça marche parfaitement 

-en ce qui concerne les arrières plan de mes cellules qui déconnent (page "metiers" ) est ce que ce ne serai pas plus simple que j'enlève ce tableau et qu'a la place je fasse 5 bloc séparés que je place a la bonne position ?

palpatine38 · Answer

bon j'ai craquer et j'ai fait 10 bloc différent dans ma page "metiers" au lieu de mon tableau avec cellule (5 bloc pour les 5 photo et 5 autre bloc pour les textes) et ça marche sur IE et mozilla par contre si tu peux me renseigner j'avais fait au départ 5 bloc avec l'image en lien vers la page desirer puis j'avais ecrit dedans mon texte avec

le + c'est que quand je metai ma souris n'importe ou sur l'image mon texte changeai de couleur car =lien mais le souci c'est que le texte etait au milieu de la photo et je n'arrivais pas a le décaler + a gauche du coup j'ai refait 5 autre bloc avec les textes je les ai positionner ou je voulai et j'ai aussi assigner les lien au texte par contre maintenant quand je balade la souris sur la photo il ne met pas mon texte d'une autre couleur je sais pas si je suis bien arriver a me faire comprendre en tout cas j'ai validé toutes mes pages et aucune erreur merci beaucoup pour ton aide

palpatine38 · Answer

merci encore une fois PITET tu m'as vraiment beaucoup aidé et tu m'as fait comprendre mes erreurs je t'en remercie pour mon menu j'avais fait quelque chose qui ressemble a ce que tu as écrit mais tu as mis le doigt sur mon problème qui était que tous les

était décaler a cause de p { margin-left: 400px; position: relative; bottom: 70px; } voila pourquoi je n'arrivai pas a mettre ou je voulai le texte j'ai écrit avec ton code qui est clairement plus lisible peux tu juste m'explique pourquoi le : style="display: inline-block; j'ai essayé de chercher a quoi ça sert mais j'ai pas tout compris niveau validation il n'accepte pas : Line 37, Column 62: document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag ..."margin-top: 14px; margin-left: 50px;">Maintenance Industrielle " or "

") inside an inline element (such as "", "", or ""). on dirai qu'il ne veux pas qu'on mette de

a l'interieur d'un Il faut que tu corriges ton css pour enlever le transition-duration sur toutes tes balises. Apparement tu utilises cette propriété pour le diaporama de la page Actualité. Si c'est le cas tu peux définir le transition-duration uniquement sur le diaporama comme ceci :.box_skitter1 { transition-duration: 1.2s; } j'utilise un diaporama sur "actualité" et également sur les pages: "métiers/maintenance industriel" "métiers/sécurité" "métiers/bâtiment" etc.. en fait j'ai 2 diaporama différent le box_skitter et le box_skiter1 il est vrai que je peux mettre la transition sur ces 2 éléments au lieu de le mettre a toutes les balises si c'est mieux

palpatine38 · Answer

merci pour l'explication block et inline --> très instructif
cela m'évitera des erreurs a l'avenir

en remplaçant le >div> par le padding nickel ça marche et c'est validé

pour le lien qui passait en jaune  avant de passer en noir c'est corriger également
(ne me demande pas comment car je sais pas)

donc normalement je devrait bientôt avoir fini de t'embêter ^^

reste tjrs cette histoire de :
* {transition-duration: 1.2s;}

si je l'écrit :
.box_skitter1 { transition-duration: 1.2s; } 
cela ne fonctionne plus

je ne te cache pas que j'ai du mal a comprendre ce système d'autant
que le diaporama fait référence a des script qu'on m'as passé
et pour le moment je t'avoue que je suis  encore au niveau de découverte des scripts

ElementW · Answer

Petit conseil de web design: pour la photo en page d'accueil, encode-la en JPEG progressif, ça rends mieux lors du chargement de la page (explication ici). Et pense ausi a créer une version plus petite du logo, qui fait quand même 4724x1500 pixels pour être affichée sur du 160x60 (qui plus est c'est pas la même proportion, ça devrait être 160x50): tu y perds 846 Kio par rapport à si c'était un PNG de la bonne taille.

palpatine38 · Answer

ok merci je regarde ça

Diference entre IE et mozzila ainsi que probleme de validation

13 réponses

Discussions similaires

Newsletters