Ciao a tutti,
ho un problema con la visualizzazione su Firefox (ed Explorer), del pulsante MiPiace di Facebook. Dopo aver fatto un milione di tentativi sono arrivata alla conclusione che la causa sia è display:none attribuito a un div da cui "fb-class", classe che contiene il pulsantino MiPiace, discente.
In sintesi ho creato una situazione in modo tale cha al passaggio del mouse sulla foto compare una "fascetta" grigia (ho applicato il metodo della transizione css) nella quale sono visibili una freccetta e un cuoricino.
Al passaggio del mouse sulla freccetta (qui ho integrato del javascript) compaiono i pulsantini social che sono Twitter, Pin it e MiPiace di facebook.
Il problema è che, mentre su google chrome e safari entrambi i bottoncini si vedono, con Firefox ed Explorer si vedono solo Twetter e Pin it e non il MiPiace.
Togliendo display:none dal div.testo, il pulsante MiPiace torna ad essere visivile ma aimè, succede un casino con la "fascetta" grigia che invece di esser visibile al passaggio del mouse (passando sopra a div.griglia) viene nascosta sotto il margine inferiore.
Spero di esser stata abbastanza "capibile"
Di seguito il css e l'html.
Grazie mille
/* share su scheda prodotto */
.product div.griglia {
width: 100%;
height: 100%;
position: relative;
}
div.testo {
width: 100%;
height: 10%;
position: absolute;
background: #f2eeed;
padding-top: 2px;
left: 0; bottom: 0;
display:none;
}
.product .box--Mask {overflow:hidden;margin-top:2px;}
.product .box--Share--Social {margin-left: -300px;}
.product .box--Share--Social:hover {margin-left: 0px;}
/*.product div.griglia:hover {cursor: pointer;}
.product div.griglia:hover div.testo {opacity: 0.9;left: 0; bottom: 0;}
*/
.product .ico-arrow-share {color: #D65F37; font-weight:bold;line-height: 21px; vertical-align:middle;clear: both;right: 0%;position: absolute;}
.product .spriteshare-icoheart { float:right; }
.product .sprite.share{background-image: url(../images/sprites/spriteshare.png); float: left; background-repeat: no-repeat; display: inline-block; margin:4px 2px 4px 4px;}
.product .spriteshare-ico-arrow-share {width: 23px; height: 15px; background-position: -5px -5px;}
.product .spriteshare-ico-arrow-share:hover, .product .spriteshare-ico-arrow-share.open {width: 23px;height: 15px;background-position: -5px -30px;}
.product .spriteshare-icoheart {width: 16px;height: 14px;background-position: -38px -5px}
.product .spriteshare-icoheart:hover, .product .fav.active .spriteshare-icoheart{width: 16px;height: 14px;background-position: -38px -29px;}
.product .spriteshare-icoheart:hover {cursor: pointer;}
.product .contatorePreferiti {padding-right: 5px;line-height: 20px;}
.product .griglia .testo img {padding-left:0px;}
.product .griglia .testo img .heart {padding-left:20px;}
.product .price.new {color: #333;font-size: 14px;font-weight: bold;}
.product .price em {color: #555;font-size: 12px;font-style: normal;text-decoration: line-through;}
<article class="desk-4 lap-6 palm-12 block product">
<div class="griglia">
<a href="" class="">
[img][/img]
</a>
<div class="testo">
<i class="sprite share spriteshare-ico-arrow-share">[/i]
<div class="box--Mask">
<span class="ico-arrow-share">
<i class="sprite share spriteshare-icoheart">[/i]<span class="contatorePreferiti">17</span>
</span>
</span>
<span class="box--Share--Social">
<span class="pin-it">[img][/img]
</span>
<span class="twitter">
</span>
</span>
<span class="fb-like"></span>
</div>
</div>
</div>
</article>
Rispondi quotando
