Problème firefox: différence windows et mac [UPDATE] IE7 catastrophe

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Problème firefox: différence windows et mac [UPDATE] IE7 catastrophe

    Bonjour,

    J'ai une div avec des onglets qui s'affichent bien sur firefox windows (10.0.2) et qui ne s'affiche pas correctement sur firefox mac (10.0.2).

    Voici le lien : http://www.cineaqua.com/refonte3/ind...el?layout=blog

    L'onglet "acheter mon pass annuel" passe à la ligne et se trouve sous "pass annuel".

    Comment faire pour le css pour différencier firefox windows et firefox mac?

    Merci par avance!

    Bonne journée

    Edit : Je retrouve le même problème sous chrome et safari : sur mac

    Merci par avance
    Dernière édition par bizerte77 à 14/03/2012, 16h36

  • #2
    Re : Problème firefox mac [update] : différence windows et mac

    Bonjour,


    Voici mon code, peut-être que vous connaissez une autre façon de coder sans poser de problème sur mac :

    Code HTML:
    L'Aquarium de Paris à volonté toute l'année !
    
    {source}
    <style>
    
    .mon_onglet{
    float: left;
    padding: 2px 10px;
    margin-right: 5px;
    color: #FFF;
    background: #F4702F;
    border: 1px solid #0566AA;
    cursor: pointer;
    margin-bottom: -1px;
    list-style: none;
            font-size:12px;
            font-weight:normal;
    
    
    }
    .mon_onglet:hover{
    background: #CD4829;
            font-size:12px;
            font-weight:normal;
    }
    
    .mon_onglet_selected{
    float: left;
    padding: 2px 10px;
    margin-right: 5px;
    color: #FFF;
    background: #CD4829;
    border-top: 1px solid #0566AA;
    border-right: 1px solid #0566AA;
    border-left: 1px solid #0566AA;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    margin-bottom: -1px;
    list-style: none;}
    
    .clear{
    clear: both;
           font-size:12px;
           font-weight:bold;
    }
    .mon_contenu{
    color: #000;
    background: #E8EFF4;
    border: 1px solid #0566AA;
    padding: 10px;
    line-height: normal;
    font-size: 12px;
           width:641px;
           border-radius : 0 0 10px 10px
    }
    
    
    #mes_contenus, #mes_onglets{
    width: 680px;
    }
    
    #o_1,#o_2,#o_3,#o_4{
    font-size:12px;
    font-weight:bold;
    
    }
    
    #co_3{
    
    font-weight:normal;
    
    }
    
    .pass a{
    color:#FFFFFF;
    text-decoration:none;
    }
    
    #main .pass a:hover{
    color:#FFFFFF;
    text-decoration:underline;
    }
    
    .reserver a{
    color:#FFFFFF;
    text-decoration:none;
    }
    
    #main .reserver a:hover{
    color:#FFFFFF;
    text-decoration:underline;
    }
    
    </style>
    
    
    <script language="javascript" type="text/javascript">
    function changeOnglet(_this){
    var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
    if(getOnglets[i].id){
    if(getOnglets[i].id == _this.id){
    getOnglets[i].className = 'mon_onglet_selected';
    document.getElementById('c' + _this.id).style.display = 'block';
    }
    else{
    getOnglets[i].className = 'mon_onglet';
    document.getElementById('c' + getOnglets[i].id).style.display = 'none';
    }
    }
    }
    }
    
    </script>
    
    <br/>
    <div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);" style="border-radius:10px 0 0 0;padding-left:12px;padding-right:12px;font-size:12px">PASS ANNUEL</li>
    <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"style="padding-left:12px;padding-right:12px;font-size:12px">OFFRE SPECIALE FAMILLE</li>
    <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"style="padding-left:12px;padding-right:12px;font-size:12px">CONDITIONS D'ABONNEMENT</li>
    <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"style="border-radius : 0 10px 0 0;padding-left:12px;padding-right:12px;font-size:12px">ACHETER MON PASS ANNUEL</li>
    
    
    <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu"><img src="images/pass-annuel-visu.jpg" border="0" alt="Pass annuel visu" style="float:left"/>
    
    <div style="float:left;margin-left:5px">
    <p style="font-size:14px;font-weight:bold">TARIFS :</p>
    <ul>
    <li>Adulte : 59€</li>
    <li>Jeune (13 à 17 ans)/ étudiant/ sénior / demandeur d'emploi : 46€</li>
    <li>Enfant (3 à 12 ans)/ personne en situation de handicap : 38€</li>
    </ul>
    </div>
    <div class="clear"></div>
    
    <p style="font-size:14px;font-weight:bold">VOS AVANTAGES :</p>
    
    <div style="background-image:url(images/etoile-de-mer.png);background-repeat:no-repeat;height:230px;width:165px;margin-left:auto;margin-right:auto;float:right;margin-right:30px" class="pass">
    </div>
    
    
    <div style"clear:right">
    <span style="font-weight:bold">Un accès illimité !</span><br/>
    
    <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">Pass valable 1 an à compter de sa date de création.</span>
    </div>
    
    <br/><br/>
    
    <div>
    <span style="font-weight:bold">Une vague de cadeau !</span><br/>
    
    <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">Un cadeau de bienvenue (d'une valeur de 14€)</span><br/>
    
    <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">Un cadeau d'anniversaire(d'une valeur de 18€)</span>
    </div>
    
    <br/><br/>
    
    <div>
    <span style="font-weight:bold">Des réductions à profusion !</span><br/>
    
    <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">15% de réduction sur les formules "déjeuner au ZEN CAFE" !</span><br/>
    
    <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">15% de réduction* sur la boutique ! (*hors corner grande récré)</span>
    </div>
    
     
    
    <br/><br/>
    
    <div>
    <span style="font-weight:bold">Parcequ'être VIP, ça n'attend pas ! !</span><br/>
    
    <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">N'attendez plus en caisse ! Allez directement à l'entrée de l'Aquarium !</span><br/>
    
    <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">Plus d'informations au : 01 40 69 23 23.</span>
    
    <div style="background-image:url(images/pass.png);background-repeat:no-repeat;height:55px;width:220px;margin-left:auto;margin-right:auto;" class="pass">
    <p style="padding-top:10px;padding-left:25px;font-size:16px"><a href="http://cineaqua.getaticket.com/Information.aspx" title="J'achète mon Pass">J'achète mon Pass</a></p>
    </div>
    
    </div>
    
    </div>
    
    
    <div id="co_2" class="mon_contenu" style="display: none;">
    
    <p>Pour l'achat simultané de <span style="font-weight:bold">4 pass annuel*</span> pour une même famille (même adresse) : </p>
    <p><span style="font-weight:bold">Bénéficiez de 10% de réduction</span> sur le montant total de l'achat.</p>
    
     
    
    <p>*Offre non cumulable, une pièce d'identité vous sera demandée lors de votre visite. En vente uniquement sur place.</p>
    
    </div>
    
    
    <div id="co_3" class="mon_contenu" style="display: none;">
    
    <p style="font-size:14px;;">CONDITIONS GENERALES DE VENTE PASS ANNUEL AQUARIUM DE PARIS – CINEAQUA</p>
    
    
     
    
    </div>
    
    
    <div id="co_4" class="mon_contenu" style="display: none;">
    
    <p style="font-weight:bold">Plusieurs possibilités s’offrent à vous :</p>
    
    <p style="font-weight:bold;font-size:15px;color:#d22a03">1. Sur place</p>
    <br/><br/>
    
    
    
    </p><br/>
    
    <p style="font-weight:bold;font-size:15px;color:#d22a03">2. Via internet*</p>
    
    <p>Votre e-billet devra être présenté en caisse le jour de votre visite pour la création de votre Pass Annuel.(Contremarque valable 3 mois à compter de la date d’achat, l’abonné bénéficie donc de 3 mois pour créer son Pass Annuel).</p>
    
    
    
    </div>
    
    
    </div></div></ul></div>
    
    
    {/source}

    Merci par avance!

    Bonne journée

    Commentaire


    • #3
      Re : Problème firefox mac [update] : différence windows et mac

      Bonjour,

      Finalement mon problème a été résolu. J'ai donné des tailles aux onglets et ça fonctionne sur MAC.

      Toutefois en testant sur IE7 c'est une catastrophe... Si quelqu'un a des pistes pour me guider?

      Voici le lien : http://www.cineaqua.com/refonte3/ind...ue/pass-annuel


      Voici le code que j'ai mis à mes onglets :

      Code HTML:
      <div id="mes_onglets">
      <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);" style="border-radius:10px 0 0 0;width:106px;text-align:center">PASS ANNUEL</li>
      <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"style="width:180px;text-align:center;">OFFRE SPECIALE FAMILLE</li>
      <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"style="width:185px;text-align:center">CONDITIONS D'ABONNEMENT</li>
      <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"style="border-radius : 0 10px 0 0;width:185px;text-align:center">ACHETER MON PASS ANNUEL</li>
      Et dans mon CSS, j'ai modifié la largeur de mon contenu : .mon_contenu => width:642px

      Merci par avance!

      Bonne journée

      Commentaire


      • #4
        Re : Problème firefox: différence windows et mac [UPDATE] IE7 catastrophe

        Bonjour,

        J'ai enfin résolu mon problème!

        J'ai rajouté un autre <li></li> à la fin et c'est bon. C'est bizarre quand même...

        Fin de mon monologue.

        Bonne journée

        Commentaire


        • #5
          Re : Problème firefox: différence windows et mac [UPDATE] IE7 catastrophe

          salut,
          je te l'avais déjà signalé dans un autre post mais ton <ul> n'est pas fermé (d'après le code que tu montres).
          La structure de base en HTML est toujours :
          <ul>
          <li></li>
          </ul>
          Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

          Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X