probleme de css entre ie et firefox

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par snooper, 3 Janvier 2008.

  1. snooper
    snooper WRInaute passionné
    Inscrit:
    24 Août 2006
    Messages:
    1 297
    J'aime reçus:
    0
    Salut

    Je ne comprends pas pourquoi quand je met le code

    BODY {
    background-attachment: fixed; background-repeat: no-repeat; background-position: top center;


    width: 770px;
    margin: auto; /* Pour centrer notre page */
    margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
    margin-bottom: 10px; /* Idem pour le bas du navigateur */
    background-image: url("/images/blue_background.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */

    text-align: center;

    }




    #page
    {
    background-color: rgb(255,255,255);/*couleur de fond*/
    width: 764px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    }


    #menu-gauche
    {
    background-color: rgb(192,224,255);/*couleur de fond*/
    border: 0px solid rgb(254, 140, 16); /*la bordure*/
    border-top: none;/*pas de bordure en haut pour l'image*/
    float: left;
    width: 180px; /*on fixe une largeur, pareil que la largeur de l'image ^^*/
    margin-left: 2px;/*marge de gauche*/
    height: auto;/*hauteur automatique*/
    }



    #corps-de-page
    {
    height: auto;/*hauteur automatique*/
    float: left;
    width: 570px; /*largeur*/
    text-align: justify;
    text-indent: 25px;
    margin-left: 10px; /*marge a gauche*/
    margin-right: 2px; /*marge a gauche*/


    background-color: rgb(255,255,255);/*couleur de fond*/
    border: 0px solid rgb(254, 140, 16);/*la bordure*/
    }

    dans une page, le menu est repoussé en bas sous iexplore mais pas sous firefox, alors que le calcul est juste

    2 pixel de marge gauche + 180 pixel pour le menu gauche + 10 pixel de marge gauche de l'article + 570 pixels pour l'article + 2 pixels pour la marge droite = 764 pixels de large comme il l'est dit dans le body ou le div page

    cf:

    http://www.legypteantique.com/Test/index-marge8.php
    et
    http://www.legypteantique.com/Test/index-marge10.php

    Pour que l'article soit correctement lu sous iexplore, il faut que je mettre 8 px max de marge au lieu des 10. Pourquoi au dessus de 762 pixels dans un tableau de 764 de large, iexplore déconne???

    QUand aux colonnes factices, quand je mets dans mon body background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0; cela ne marche pas, et quand je mets ce meme code sur le menu gauche

    background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0; ou mon code couleur

    background: #ccc rgb(192,224,255) repeat-y 50% 0;

    cela ne fonctionne pas plus

    cf http://www.legypteantique.com/Test/index-marge8.php


    Bien Cordialement
     
  2. Koxin-L
    Koxin-L WRInaute passionné
    Inscrit:
    29 Mars 2007
    Messages:
    1 532
    J'aime reçus:
    1
    Y a d'autres méthodes pour tenter une approche avec une femme :mrgreen:
     
  3. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    parceque sous firefox un width de 500 avec 10px de padding fera 520px là ou il ne fera que 500 aevc ie
     
  4. webmasterdemonsite
    webmasterdemonsite WRInaute impliqué
    Inscrit:
    1 Septembre 2007
    Messages:
    988
    J'aime reçus:
    0
    comme le mp par exemple...
     
  5. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 677
    J'aime reçus:
    0
    coller ton css entier ne sert pas a grand chose suffit d'avoir le lien vers la page et c'est bon...
     
  6. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 728
    J'aime reçus:
    171
    En passant la page au validateur j'ai pas mal d'erreurs...
    http://validator.w3.org/check?verbose=1 ... arge10.php

    Tu doubles ta balise html, ce qui n'est pas nécessaire.

    Par ailleurs, c'est une bonne idée de faire un reset au début de ton CSS, ce qui évite les différences de comportement des feuilles par défaut.

    Pour les colonnes factices, c'est le div de la colonne la plus courte qui doit engliber celui de la colonne la plus longue
     
  7. Scots
    Scots Nouveau WRInaute
    Inscrit:
    17 Septembre 2007
    Messages:
    22
    J'aime reçus:
    0
    Tu peux différencier IE et Firefox dans ton code

    Place ce code et fais deux fichiers CSS.

    <link href="proditech.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="proditech_ie.css" />
    <![endif]-->

    Le CSS appelé par défaut est complet, celui de IE ne contient QUE les parties qui changent pour IE.

    J'espère avoir aidé.

    @+
     
  8. snooper
    snooper WRInaute passionné
    Inscrit:
    24 Août 2006
    Messages:
    1 297
    J'aime reçus:
    0
    Koxin-L et webmasterdemonsite: Lol


    bproductiv: tu veux le lien de mes feuilles css?

    Les voila:

    http://www.legypteantique.com/test/feui ... test-8.css et

    http://www.legypteantique.com/test/feui ... est-10.css

    e-kiwi

    Pourquoi alors quand je mets 10 px de large si ff considere ca comme 20 px, l'affichage se fait correctement et pas sous iexplorer?

    Marie-aude: par reset tu veux dire faire comme http://www.wikistuce.info/doku.php/css/reset???

    Donc il ne faut pas faire
    <div menu="menu-gauche>Menu gauche</div>
    <div menu="menu-central>Menu central</div>

    mais quoi a la place??? J'ai tout fait comme Alsa ou Siteduzero je bloque.


    scots: merci pour lt truc. Etant newbie, peut tu me dire vraiment ce qui differe entre ie et ff pour le css?

    Merci a toutes et a tous pour l'attention que vous m'avez consacré.

    Cordialement
     
  9. Scots
    Scots Nouveau WRInaute
    Inscrit:
    17 Septembre 2007
    Messages:
    22
    J'aime reçus:
    0
    Regarde mes deux fichiers css, tu verras tout de suite ce que j'ai eu besoin POUR MON SITE de préciser à IE.

    CSS Global :
    http://www.proditech.fr/proditech.css

    CSS IE :
    http://www.proditech.fr/proditech_ie.css

    A noter que dans la ligne [IE6], c'est à toi de choisir la version avec laquelle tu veux être compatible.

    C'est assez simple mais il faut piger le truc c'est vrai. :) En fait, tout doit être dans le global et compatible W3C (FF). Ensuite, dans le CSS IE, tu mets ce qui cloche avec IE. La ligne appelant le deuxième CSS fera que le navigateur (IE) remplacera par ce qu'il trouve dans ce deuxième fichier.

    Autre détail (apparement c'est ton problème) il faut bien faire la différence entre "margin" (marge externe) et "padding" (marge interne).

    Par exemple, si tu veux un div de 100 px de largeur, et que tu mets un margin de 10 px à gauche, le div sera décalé de 10 px vers la droite. Mais si tu mets un padding de 10 px à gauche, il sera positionné à 0 à gauche mais fera 110 px de largeur avec un espace de 10 px entre le bord gauche et le début du contenu.

    Pigé ? :)

    Bonne chance.
     
  10. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 728
    J'aime reçus:
    171
    Reset oui c'est un exemple, il y en a des plus simples aussi :)

    tu peux déjà commencer par * {margin:0; padding:0;}

    Pour la structure de tes divs

    1 Tu as un div dont l'image de fonds représente la fausse colonne, et qui englobe et le menu et la zone de texte
    2 Tu as le div du menu, avec un fonds transparent
    3 Tu as le div de la zone de texte, avec un fonds différent, sinon il n'y a pas de colonne.
    4 Tu as le div footer (et tu peux au dessus avoir le div du header)
    Il te manque donc le div "contenant"
     
  11. snooper
    snooper WRInaute passionné
    Inscrit:
    24 Août 2006
    Messages:
    1 297
    J'aime reçus:
    0
    Scots

    OK donc le body: ne rien mettre sous ie. Sinon merci a toi et a marie aude pour la difference entre padding et margin.

    marie-aude, mon div id="page" n'est-il pas le contenant???

    Ou tu veux me dire que je mets un div global qui englobe l'ensemble de la page, et dedans deux div, un pour le menu gauche et un pour le menu droit?

    Faire, au lieu de

    div page
    div menu haut /div
    div menu gauche /div
    div corps de page /div
    div menu bas /div
    /div

    Faire:

    div menu haut /div
    div contenant
    div menu gauche /div
    div article /div
    /div
    div menu-bas

    ???

    Sinon en gros si quelqu'un peut me faire, moyennant rémunération, lien retour, ... une structure css compatible css et iexplore du type

    http://www.legypteantique.com/structure_souhaitee.gif

    Si ce schéma n'est pas explicite en gros avoir le rendu de http://www.legypteantique.com/xhtml/.

    PS: Quand je dis structure, je veux dire uniquement la feuille css qui correspond a ce type de colonnes. Apres, pour les h1 les p ou encore les images de titres, je m'en occuperai.

    Cordialement

    n'hésitez pas à me contacter. Et excusez moi si je ne vous réponds pas d'ici demain mais je n'aurai peut etre pas acces a Internet

    Bonne journée à toutes et à tous
     
  12. Scots
    Scots Nouveau WRInaute
    Inscrit:
    17 Septembre 2007
    Messages:
    22
    J'aime reçus:
    0
    Moi je peux te faire ça sans problème si tu veux.
     
  13. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    que c est compliqué ces réponses :)

    tu fais un :
    width:500px
    -width:460px

    ou l inverse et cela sera réglé, fini ce probleme de padding qui pousse le calque
     
  14. Scots
    Scots Nouveau WRInaute
    Inscrit:
    17 Septembre 2007
    Messages:
    22
    J'aime reçus:
    0
    E-Kiwi, je ne comprend pas, si tu veux une marge intérieure, il te faut FORCEMENT un padding ...
     
  15. snooper
    snooper WRInaute passionné
    Inscrit:
    24 Août 2006
    Messages:
    1 297
    J'aime reçus:
    0
    Scots tu pourrais me faire ça???
     
  16. Scots
    Scots Nouveau WRInaute
    Inscrit:
    17 Septembre 2007
    Messages:
    22
    J'aime reçus:
    0
    tu as ma réponse en MP.
     
  17. snooper
    snooper WRInaute passionné
    Inscrit:
    24 Août 2006
    Messages:
    1 297
    J'aime reçus:
    0
    OK Merci beaucoup.
     
Chargement...
Similar Threads - probleme css firefox Forum Date
Probléme de CSS sur firefox et safari Administration d'un site Web 19 Mai 2010
probleme de mise en page css sous firefox , osus IE, tout est ok Développement d'un site Web ou d'une appli mobile 3 Janvier 2009
problème css IE != firefox Développement d'un site Web ou d'une appli mobile 30 Novembre 2008
Problème CSS : Firefox - Safari OK,Opéra - IE 7 KO Développement d'un site Web ou d'une appli mobile 16 Juin 2008
[CSS] petit problème DIV sous Firefox Développement d'un site Web ou d'une appli mobile 24 Janvier 2008
Problème css avec firefox Développement d'un site Web ou d'une appli mobile 30 Août 2007
[CSS] Problème d'alignement sous Firefox (OK avec IE) Développement d'un site Web ou d'une appli mobile 18 Octobre 2006
Probléme de CSS sur firefox Administration d'un site Web 12 Septembre 2006
Css probleme avec firefox Développement d'un site Web ou d'une appli mobile 25 Mars 2006
problème de css sous firefox Développement d'un site Web ou d'une appli mobile 14 Septembre 2005
Problème d'affichage CSS sous Firefox Problèmes de référencement spécifiques à vos sites 14 Janvier 2005
Problème de div et de css Développement d'un site Web ou d'une appli mobile 8 Juin 2017
Problème d'application d'un nouveau template Dreamweaver CSS Demandes d'avis et de conseils sur vos sites 21 Février 2017
J'ai un problème en css Développement d'un site Web ou d'une appli mobile 8 Septembre 2016
CSS en cache : un problème pour Google ? Problèmes de référencement spécifiques à vos sites 23 Octobre 2015
Problème largeur CSS avec banniere adaptable adsens Développement d'un site Web ou d'une appli mobile 2 Septembre 2015
Absence de CSS dans le cache Google -> problème ? Référencement Google 24 Juin 2015
Problème réduction du CSS, pas le même rendu. Débuter en référencement 14 Mai 2015
Problème d'affichage en CSS Demandes d'avis et de conseils sur vos sites 12 Décembre 2014
WordPress, Plugin Nexgen Gallery et Problème de bordure en CSS avec le Slideshow de NG Développement d'un site Web ou d'une appli mobile 9 Septembre 2014