CSS difference entre FireFow et IE6

Discussion dans 'Administration d'un site Web' créé par madx, 13 Février 2004.

  1. madx
    madx WRInaute occasionnel
    Inscrit:
    19 Juin 2003
    Messages:
    257
    J'aime reçus:
    0
    Bonjour,

    J'ai un problème que j'aimerai resoudre et surtout comprendre, je veux faire un menu avec un rollover, mon pb est que le positionnement des images est différente suivant le navigateur (IE ou firefow), si je centre pour IE en hauteur mes menu pour FireFox j'ai un léger decalage, mon code est :

    Code:
    #menu-fond {
    	float: left;
    	width: 146px;
    	height: 464px;
    	background-color:#FFFFFF;
    	background-image: url(images/menu.jpg);
    	background-repeat: no-repeat;
    	text-align : left;	
    }
    
    #menu a {
       position: absolute;
       width:141px; 
       height:18px; 
       text-decoration: none;
       background: #FF69B4;
    }
    
    #menu a i {
    	visibility: hidden;
    }
    
    a#societe{ 
       top:140px; 
    } 
    
    a#societe:hover{ 
       background: url(images/societe.gif)  no-repeat; 
    } 
    
    a#nouveaute{ 
       top:190px; 
    } 
    
    a#nouveaute:hover{ 
       background: url(images/nouveaute.gif)  no-repeat; 
    } 
    

    Le HTML

    Code:
    <div id="menu-fond">
      <div id="menu">
      <a href="#" id="societe"><i>Societe</i></a>
      <a href="#" id="nouveaute"><i>Nouveaute</i></a>
       </div>
    </div>
    
    Pour corriger ce pb je fait ;

    Code:
    a#societe{ 
    /*   top:140px; */
       margin-top:42px; 
    } 
    
    a#nouveaute{ 
    /*   top:190px; */
       margin-top:92px; 
    } 
    J'ai trouvé cette solution mais j'aimerai comprendre pourquoi ce décalage, la plus logique deconne.

    Merci de votre aide
     
  2. agabtehu
    agabtehu Nouveau WRInaute
    Inscrit:
    15 Janvier 2004
    Messages:
    4
    J'aime reçus:
    0
    dans l'absolute, abstiens-toi

    C'est peut-être la gestion de position:absolute qui est gérée différement par IE (vu qu'il a un moteur plus ancien).
    J'ai vérifié sur openWeb : http://openweb.eu.org/articles/initiation_absolue/

    Avec position:absolute, #menu n'utilise #menu-fond comme référent que si #menu-fond est déjà en position relative ou absolute. Dans le cas contraire, c'est la fenêtre (viewport) qui est utilisée comme base.

    Moi j'aurai viré le position:absolute et gardé un margin-top sur #nouveaute. Et forcé
    #menu a {display: block;} pour que le height soit bien en compte.
     
  3. madx
    madx WRInaute occasionnel
    Inscrit:
    19 Juin 2003
    Messages:
    257
    J'aime reçus:
    0
    Merci, j'ai utilisé le margin-top et retiré le <div id="menu"> qui ne sert pas a grand chose.
     
Chargement...
Similar Threads - CSS difference FireFow Forum Date
[CSS] Différence IE7 / FireFox Développement d'un site Web ou d'une appli mobile 22 Mai 2007
CSS : differences entre IE et Mozilla/Firefox Développement d'un site Web ou d'une appli mobile 20 Avril 2006
CSS - Listes imbriquées, différences entre IE, FF et OP Développement d'un site Web ou d'une appli mobile 8 Janvier 2006
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
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
CSS Google Shopping AdWords 23 Janvier 2020
style.css unique préférable avec link ou javascript ? Développement d'un site Web ou d'une appli mobile 25 Décembre 2019
Comment gérer le ALT d'une image en CSS background-image YouTube, Google Images et Google Maps 17 Décembre 2019
Contenu mixte vers http / css - réelle gravité ? Débuter en référencement 24 Septembre 2019
Extension Chrome utile pour afficher le code source HTML, JS, CSS Développement d'un site Web ou d'une appli mobile 5 Juillet 2019
css pour cookieconsent et apparence graphique. Développement d'un site Web ou d'une appli mobile 28 Avril 2019
Appliquer style CSS CMS GHOST Développement d'un site Web ou d'une appli mobile 21 Mars 2019