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

[bizerte77]

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

[bizerte77]

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 :

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

[bizerte77]

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 :

<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

[bizerte77]

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

[ghazal]

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>