Ciao a tutti!
Ho creato una pagina di prova con alcune immagini fisse ed altre a rotazione tramite javascript e visualizandola con Firefox (33.0) ottengo un quasi impercettibile ma fastidioso sfarfallio di 1px, in alto e in basso, nelle immagini a rotazione, ad ogni cambiamento di immagine. Il problema non si manifesta con Chrome e IE. Il codice javascript l'ho già utilizzato altre volte ed è perfettamente funzionante, tant'è vero che se elimino tutti gli altri componenti della pagina, lo sfarfallio sparisce... quindi dev'esserci un qualche tipo di conflitto con gli altri (pochi) elementi che ho lasciato...
Il codice è il seguente:
Codice PHP:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>I tarocchi di Priscilla</title>
<style type="text/css">
/*-------------INIZIO RESET-------------*/
html {color: #000;
background: #FFF; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {margin: 0;
padding: 0; }
table {border-collapse: collapse;
border-spacing: 0; }
fieldset, img {border: 0; }
del, ins {text-decoration: none; }
li {list-style: none; }
caption, th {text-align: left; }
q:before, q:after {content: ''; }
sup {vertical-align: baseline; }
sub {vertical-align: baseline; }
legend {color: #000; }
/*-------------FINE RESET--------------*/
html{
background-color:#000;
}
#main{
width:1000px;
margin:auto;
margin-top:20px;
text-align:center;
}
#conttitolo{
height:200px;
width:910px;
margin:auto;
}
.fiamma{
float:left;
}
#titolo{
float:left;
}
#galleria{
margin-left:42px;
width:500px;
height:300px;
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<script type='text/javascript' src='jquery-1.4.3.min.js'></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('div#galleria').innerfade({
speed: 3000,
timeout: 5000,
type: 'sequence',
containerheight: '300px'
});
});
</script>
<body>
<div id="main">
<div id="conttitolo">
<div class="fiamma"><img src="img/fiamma1.gif" /></div>
<div id="titolo"><img src="gimp/titolo1.png" /></div>
<div class="fiamma"><img src="img/fiamma1.gif" /></div>
<div class="clear"></div>
</div>
<div id="galleria">
<img src="img/imgindex/img1.png" />
<img src="img/imgindex/img2.png" />
<img src="img/imgindex/img3.png" />
<img src="img/imgindex/img4.png" />
<img src="img/imgindex/img5.png" />
<img src="img/imgindex/img6.png" />
</div>
</div>
</body>
</html>
La pagina online potete visualizza a questo indirizzo: http://www.medprova.altervista.org/priscilla/prova.html
Ho eliminato tutti gli elementi superflui per cercare di arrivare alla radice del problema e ho notato che lo sfarfallio sparisce se elimino il "float:left" al div galleria, oppure se elimino entrambi quelli presenti nel div contenitore titolo, ossia nella classe fiamma e nel div titolo...
Data la pochezza degli elementi non so proprio dove mettere mano... L'unica alternativa che mi viene in mente è eliminare quei float e iniziare a giocare con "position:relative"... ma vorrei evitare questa soluzione....
Grazie a chiunque mi darà una mano!
Rispondi quotando
