28172 sujets

CSS et mise en forme, CSS3

Où trouver une solution pour les affichages selon le navigateur

Bonjour, le problème est bien connu : Lorsque l'on développe un site web, le rendu est différent selon le navigateur que l'on utilise.
J'aimerais donc trouver un site, un article, un livre ou autre qui traite le problème. L'idéal serait que tous les navigateurs affiche la même chose si le site respecte les normes du w3c.

Pouvez-vous me diriger vers une solution ? J'ai pensé détecter le navigateur à l'affichage, mais il me semble qu'il faille utiliser le javascrip...que je ne maitrise pas.

Merci d'avance
Bonjour,

Reilesor a écrit :
Bonjour, le problème est bien connu : Lorsque l'on développe un site web, le rendu est différent selon le navigateur que l'on utilise.
Ceci est une affirmation bien trop tranchée. Et qui est loin d'être juste. Un site bien développé, a bien souvent un rendu similaire sur les différents navigateurs du marché.

Reilesor a écrit :
J'aimerais donc trouver un site, un article, un livre ou autre qui traite le problème. L'idéal serait que tous les navigateurs affiche la même chose si le site respecte les normes du w3c.
C'est en général ce sui se passe.

Reilesor a écrit :
J'ai pensé détecter le navigateur à l'affichage, mais il me semble qu'il faille utiliser le javascrip...que je ne maitrise pas.
Et ce serait une mauvaise idée, puisqu'il est facile de changer cette information (agent-utilisateur) dans les paramètres du navigateur.

Les seuls névigateurs ayant parfois besoin d'adaptation sous IE6, 7 et 8. Dans leur cas, le plus simple est de s'assurer que le code du site est valide et qu'il comporte un doctype en bonne et due forme. En cas de problèmes, il sera alors possible d'utiliser des commentaires conditionnels (qu'IE est le seul a reconnaite, les autres navigateur les considérant comme de simples commentaires) pour appeller une feuille de style corrective destinée à une, ou plusieurs, version(s) d'IE.
Hello Reilesor et bienvenue, Smiley smile

il n'est surtout pas question de détecter le navigateur ! L'idée est de coder correctement ton site en respectant les standards et tu auras un rendu correct sur tous les navigateurs modernes. Il est bien sûr impossible d'avoir le même rendu au pixel près... donc il faut lâcher prise. Smiley cligne

A lire en complément : Compatibilité navigateur et prise de tête.
Merci pour vos réponses si rapides !
Effectivement, j'ai des erreurs trouvées par W3C validator. Je suis en train de les corriger.

Je devrais pouvoir m'en sortir, mais le temps m'est compté !

Laurie-Anne, qu'appelles-tu un "un doctype en bonne et due forme" ?

Voici mon entête : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Temporaire</title>
        <link href="css/index.css" rel="stylesheet" type="text/css">
        <link rel="icon" type="image/png" href="pictures/pictograms/favicon.png">
    </head>
    <body>
Reilesor a écrit :
Laurie-Anne, qu'appelles-tu un "un doctype en bonne et due forme" ?
Comme elle n'est plus là je vais me permettre de répondre à sa place. Smiley langue

Celui que tu utilises est tronqué et donc invalide. Pour tout comprendre tu peux lire cet article et utiliser ensuite le Squelettor.

D'une manière générale tu trouveras plein de réponses en effectuant directement une recherche sur http://www.alsacreations.com/
J'ai changé le doctype qui était tronqué, et ça a radicalement modifié ce que j'avais sur IE, impressiant !!
Merci beaucoup.

Maintenant, j'ai un autre petit soucis que je n'arrive pas à régler :
Avec les balises <li> sous certains navigateurs les puces s'écartent du texte pour utiliser toute la largeur du div. (Chrome et safari). J'ai essayé de fixer l'écart avec un span. Rien
J'ai aussi essayé de fixer l'écart à gauche. Ca a pour effet de décaler à gauche sur les autres navigateurs.
Sous opéra, la puce est surélevée par rapport au texte.

Vous avez une idée ?


<div id="formulaire">
                        <form method="post" action="Authentication">
                            <ul class="ul">
                                <li>Code soci&eacute;t&eacute;<span class="margeChamps"><input type="text" name="login" id="codeSociete"></span></li>
                                <li>Mot de passe<span class="margeChamps"><input type="password" name="password" id="password"></span></li>
                            </ul>
                            <br>
                            <br>
                            <span class="margeBoutonsL"><a href="index.jsp" class="picture" > <img src="pictures/buttons/backToWebSite.png" alt= "Retour accueil"></a> <span class="margeBoutons"> <input type="image" src="./pictures/buttons/connect.png"></span></span>
                        </form>
                    </div>
Sujet clos
Aller à