IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[différence IE6 / FF] Layout


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2005
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Décembre 2005
    Messages : 75
    Par défaut [différence IE6 / FF] Layout
    Bonjour!

    Je cherche *pourquoi* il y a une telle (énorme!) différence de rendu entre IE 6 (pas encore testé sous IE 7) et Firefox... Pour le code xHTML / CSS suivant:

    http://barresi.ch/test-ie6/

    Qui a une idée / une piste?

    Autre chose qui me rendrait service. Voyez-vous un myen plus "fiable" de fixer la position de façon plus homogène mon bouton "> SUITE" dans les boxes? Car selon le navigateur sa position via float est assez aléatoire...

    D'avance merci!

    PS: ne tenez pas compte du design, ce n'est qu'une maquette vide...

  2. #2
    Membre Expert
    Avatar de trotters213
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    2 571
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Janvier 2005
    Messages : 2 571
    Par défaut

    Je ne vois de différence à première vue ente FF2 et IE7.
    Si tu me files une impression sous IE6 je pourrais peut-être te filer un coup de main.

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2005
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Décembre 2005
    Messages : 75
    Par défaut
    Bonjour, trotters213!

    Merci pour ta réponse.

    C'est déjà bon / rassurant de savoir que IE 7 rend bien la chose.

    Voici deux printscreen montrant le rendu sous Firefox (comme voulu) et sur IE 6...

    http://barresi.ch/test-ie6/printscreen-ff.png
    http://barresi.ch/test-ie6/printscreen-ie6.png

  4. #4
    Nouveau candidat au Club
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 2
    Par défaut
    Il y a une différence d'interprétation entre les 2 naviguateurs. Le mieux est d'optimiser ton site pour Firefox, puis ensuite de mettre des conditions pour le rendre compatible sous IE, car IE est bourré de bugs. Tout le monde pourra te confirmer cela. IE est une vrai merde pour les webmasters, impossible d'optimiser le site correctement. C'est pour cela qu'il faut priviligier FF à IE. Mais ne délaisse pas pour autant la facette IE, rend ton site compatible sous les 2 naviguateurs pour attirer un maximuim de visiteurs, vaut mieux qu'ils ne soirent pas effrayés par un défaut du site dut a leur naviguateur.


    Si tu veux utiliser des conditions, voici la démarche :

    Bien sur que si tu peux mettre une condition.

    <!--[if !IE]><-->
    <h1>Titre de la page</h1>
    <!--><![endif]-->

    Voila la commande qu'il faut introduire dans ton code.



    Tu peux bien sur le moduler comme bon te semble :

    <!--[if !IE]><-->
    Vaut mieux ne pas utiliser IE, il est truffé de Bugs !
    <!--><![endif]-->

    Ici, cette phrase s'affichera uniquement sur un navigateur autre que IE grace au tag " !IE " (signifie "différent" de IE).


    Aprés tu peux ossi introduire 2 css différents si le naviguateur est IE ou non :

    <!--[if IE]>
    <link href="style_ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <!--[if !IE]><-->
    <link href="style_ff.css" rel="stylesheet" type="text/css" />
    <!--><![endif]-->

    Ici, le naviguateur chargera "style_ie.css" si le naviguateur est IE (grace à [if IE] ), tandis qu'il chargera style_ff.css si votre naviguateur n'est pas IE (grace à [if !IE] ).


    Voila, je pense avoir traité toute cette partie de manière convenable.

  5. #5
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Si tu parles du gros qui s'étends sur le bas, ça ressemble furieusement à un pb de haslayout.

    Pour t'en assurer tu peux ajouter ceci dans ton css (donne le layout à tous les éléments)

    Si cela résoud ton problème il ne te reste plus qu'à identifier quel/s) élément doivent recevoir le layout pour que cela s'affiche correctement. Cela pourrait bien être ton #maincontent qui est doté de layout sur IE7 avec le min-height mais pas sur IE6. Donc tu pourrais essayé quelque chose du genre, après avoir viré le zomm:1:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    * html #maincontent {height:1%;}
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  6. #6
    Membre Expert
    Avatar de trotters213
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    2 571
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Janvier 2005
    Messages : 2 571
    Par défaut
    Citation Envoyé par IroShimO Voir le message
    Bien sur que si tu peux mettre une condition.
    <!--[if !IE]><-->
    <h1>Titre de la page</h1>
    <!--><![endif]-->

    Voila la commande qu'il faut introduire dans ton code.

    Tu peux bien sur le moduler comme bon te semble :

    <!--[if !IE]><-->
    Vaut mieux ne pas utiliser IE, il est truffé de Bugs !
    <!--><![endif]-->

    Ici, cette phrase s'affichera uniquement sur un navigateur autre que IE grace au tag " !IE " (signifie "différent" de IE).
    Je te conseille vraiment de ne pas commencer à faire ce genre de chose mais plutôt de faire en sorte d'avoir un code "cross-browser" mais en codant proprement.

Discussions similaires

  1. [Qt 5.1] Différence entre QtQuick Layouts et layouts
    Par gbdivers dans le forum Qt Quick
    Réponses: 2
    Dernier message: 15/05/2013, 20h21
  2. [Struts-Layout] suggest et bug IE6 select
    Par Frack94 dans le forum Struts 1
    Réponses: 1
    Dernier message: 26/01/2009, 10h52
  3. IE6 & IE7 -> différences
    Par damien.vinouze dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 12/09/2008, 14h08
  4. Différences d'affichage entre IE6 et IE7
    Par tamiii dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 11/12/2007, 14h12
  5. IE6 : Largeur de table défectueuse avec table-layout:fixed ou width:100%
    Par Sergejack dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 29/11/2007, 11h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo