pbm css entre internet explorer et firefox

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par bunker, 7 Février 2007.

  1. bunker
    bunker Nouveau WRInaute
    Inscrit:
    23 Juillet 2006
    Messages:
    22
    J'aime reçus:
    0
    bonjour, ce post fait suite à ce fil de discussion :

    https://www.webrankinfo.com/forum/t/demande-davis.67553/

    vous pouvez vous rendre compte des problèmes sur mon site :

    http://www.laboiteasite.com


    J'ai 2 problèmes liés à ma feuille de style

    1°)
    background: #FFC600; donne un fond orange sous IE
    background: #FFC600; donne un fond transparent sous Firefox (1.0)
    background: #FFFFFF; donne un fond blanc sous firefox

    j'ai essayé en minuscule, avec background-color à la place de background,
    rien n'y fait....

    2°)
    le positionnement par float ne fonctionne apparement pas sous firefox (bug connu)

    Dans les blocs Annuaire & Communauté, la partie droite s'affiche en dessous de la partie gauche

    le code html :

    Code:
    <div class="left_side"> 
    texte gauche 
    </div> 
    <div class="right_side"> 
    texte droit 
    </div> 

    le code css :

    Code:
    .left_side { 
      float: left; 
      width: 50%; 
      padding: 0 0 0 10px; 
      margin: 10px 0; 
      background: #FFF; 
      clear: both; 
    } 
    
    .right_side { 
      float: right; 
      width: 50%; 
      background: #FFF url(images/dotted.gif) repeat-y; 
      padding: 0 0 0 40px; 
      margin: 10px 0; 
      clear: both; 
    } 

    j'ai essayé de mettre les 2 divs dans un conteneur afin d'utiliser overflow:

    Code:
    .conteneur { 
      width: 100%; 
      margin-left: auto; 
      margin-right: auto; 
      overflow: hidden; 
    } 

    mais ça ne fonctionne toujours pas...

    je ne veux pas utiliser de table, seulement du css...

    je suis ouvert à toutes solutions, j'ai effectué plusieurs recherches sur plusieurs sites et forums, aucune solution ne fonctionne...

    merci d'avance à tous ceux qui se pencheront sur mon problème!
     
  2. Seraph
    Seraph WRInaute occasionnel
    Inscrit:
    2 Avril 2006
    Messages:
    307
    J'aime reçus:
    0
    Passe le width de right_side et left_side a 49% pour voir... ;)
     
  3. bunker
    bunker Nouveau WRInaute
    Inscrit:
    23 Juillet 2006
    Messages:
    22
    J'aime reçus:
    0
    merci seraph, ça aurait été trop simple ;-) déjà fait, même problème...
     
  4. ptit_mousse
    ptit_mousse WRInaute discret
    Inscrit:
    19 Décembre 2006
    Messages:
    64
    J'aime reçus:
    0
    Salut,

    Perso je préferre toujours utiliser les fonctions spécifiques (padding-left....) que les groupes(padding). A priori ton décalage vient d'ailleurs du padding qui décale l'ensemble du premier bloc de 10px et le deuxième de 40px ce qui fait que tes 2 bloc font ensemble 50% + 50% + 10px + 40px soit plus que ne peut contenir une ligne.
    Je te conseillerai donc de mettre tes width en px et non en %
     
  5. Patrice A.
    Patrice A. WRInaute passionné
    Inscrit:
    11 Février 2005
    Messages:
    2 071
    J'aime reçus:
    0
    clear:both ça ne veut pas justement dire "on oublie tous les float au dessus, et on va à la ligne" ? -> la partie droite se place donc SOUS tous les autres float...
     
  6. bunker
    bunker Nouveau WRInaute
    Inscrit:
    23 Juillet 2006
    Messages:
    22
    J'aime reçus:
    0
    merci ptit-mousse, effectivement, les 2 blocs depassaient la taille maximale mais ce n'était pas suffisant...

    pour que ce la fonctionne, j'ai du modifier ma feuille de style :

    j'ai supprimé le float pour le bloc gauche :

    Code:
    .conteneur {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      overflow: hidden;
    }
    
    .right_side {
      float: right;
      padding: 0 0 0 40px;
      margin: 10px 0;
      width: 40%;
      background: #FFF url(images/dotted.gif) repeat-y;
      color: #414141;
      clear: both;
    }
    
    .left_side {
      padding: 0 0 0 40px;
      margin: 10px 0;
      width: 40%;
      background: #FFFFFF;
      color: #414141;
    }
    
    puis modifié mon code html afin d'afficher d'abord le bloc droit :

    Code:
    <div class="conteneur">
    <div class="right_side">
    texte droit
    </div>
    <div class="left_side">
    texte gauche
    </div>
    </div>
    
    cela s'affiche correctement sous IE7, firefox 2.0 et opera 9.10

    merci à tous!

    malheureusement, mes problèmes ne s'arrêtent pas là, sous firefox et opera, j'ai un problème de background-color...

    still searching!
     
  7. bunker
    bunker Nouveau WRInaute
    Inscrit:
    23 Juillet 2006
    Messages:
    22
    J'aime reçus:
    0
    effecitvement Dj_Apx, c'est ce que je m'étais dit, mais non, même en supprimant le clear: both à droite (ou à gauche ou les deux d'ailleurs), j'avais le même problème...
     
  8. fra_arf
    fra_arf WRInaute occasionnel
    Inscrit:
    22 Novembre 2005
    Messages:
    390
    J'aime reçus:
    0
    Premièrement arrête d'utiliser des margin et contente toi d'utiliser uniquement que des padding car il y a bcp trop de bug quand tu utilises des margin left et right...

    Ensuite tu crés un site pour créer des sites mais tu sais pas les crées tout seul...

    C'est hs mais ça me fait grandement sourir quand même
     
  9. bunker
    bunker Nouveau WRInaute
    Inscrit:
    23 Juillet 2006
    Messages:
    22
    J'aime reçus:
    0
    j'avais un problème de background-color sous firefox:

    Dans le cas d'un div qui englobe d'autres div, sous IE, pas de problème mais sous firefox, le fond reste transparent.

    Exemple :

    pour le html :

    Code:
    <body>
     <div id="content">
       <div id="left">
       texte gauche
       </div>
       <div id="right">
       texte droit
       texte droit
       texte droit
       texte droit
       </div>
     </div>
    </body>
    
    pour le css :

    Code:
    #body{
    background-color: #000000;
    }
    
    #content {
    background-color: #FFFFFF;
    }
    
    #left {
    display: block;
    float: left;
    clear: both;
    background-color: #FFFFFF;
    }
    
    #right {
    display: block;
    float: right;
    background-color: #FFFFFF;
    }
    
    le div content n'aura pas le fond blanc mais noir, cela se vera car le div left est plus court que le div right, pour que le fond soit blanc, il faut rajouter overflow:

    Code:
    #content{
    background-color: #FFFFFF;
    overflow: auto;
    }
    
    et voila!

    merci à tous ceux qui m'ont donné des infos...
     
Chargement...
Similar Threads - pbm css internet Forum Date
Pbm tres faible taux d'indexation... google Débuter en référencement 16 Juillet 2014
Pbm de réécriture qui ne s'effectue pas ! URL Rewriting et .htaccess 8 Septembre 2013
Délais apparition ds google actu et pbm sitemap Crawl et indexation Google, sitemaps 8 Août 2012
Pages non différenciées par google = pbm de référencement Débuter en référencement 4 Mars 2011
pbm d'url rewriting Débuter en référencement 20 Avril 2010
[PBM] Dossier virtuel URL Rewriting et .htaccess 9 Mars 2009
Pbm affichage flash firefox Développement d'un site Web ou d'une appli mobile 16 Août 2008
Pbm indexation avec site joomla= site: donne vieilles url Référencement Google 23 Octobre 2006
[Pbm] Déréferencement en règle par Google Problèmes de référencement spécifiques à vos sites 25 Mars 2006
[Pbm] Changer le repertoire d'installation de Google Desktop Google : l'entreprise, les sites web, les services 24 Mai 2005
Pbm de référencement Problèmes de référencement spécifiques à vos sites 6 Avril 2004
Pbm avec .htaccess, pouvez-vous m'aider ? URL Rewriting et .htaccess 25 Mai 2003
pb de CSS Développement d'un site Web ou d'une appli mobile 10 Mai 2022
Unused CSS et outils pour supprimer feuilles de style inutilisées Développement d'un site Web ou d'une appli mobile 27 Avril 2022
CSS / Attribuer 2 couleurs différentes aux H2 Développement d'un site Web ou d'une appli mobile 12 Mars 2022
Perplexité : pourquoi utiliser une classe CSS en dehors de <body> Développement d'un site Web ou d'une appli mobile 26 Décembre 2021
<noscript><link ...> du css après un <link rel="preload"... Débuter en référencement 1 Mai 2021
Utiliser une grille CSS peut-il nuire au référencement ? Débuter en référencement 17 Janvier 2021
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
WordPress Suppression élément avec Css Demandes d'avis et de conseils sur vos sites 16 Août 2020