Salve, sono nuovo nel forum ed innanzitutto vorrei scusarmi con i moderatori se ho sbagliato sezione. Sto riaggiornando un sito per una ditta e nella index dovrei inserire uno slideshow con jquery che ho trovato e che devo modificare solamente sostituendo le foto e le miniature. Il sito in questione è www.devivo.it/sito. In poche parole lo slideshow viene visualizzato perfettamente con firefox e safari, mentre con internet explorer sia 8 che 9 no, dato che si vedono statiche le miniature delle slide che in realtà dovrebbero apparire al passaggio del mouse sulla barra delle thumb. Ho dato un'occhiata allo style.css che è:
.ei-slider{
position: relative;
width: 1024px;
height: 347px;
margin: 0 auto;
}
.ei-slider-loading{
width: 1024px;
height: 347px;
position: absolute;
top: 0px;
left: 0px;
z-index:999;
background: rgba(0,0,0,0.9);
color: #fff;
text-align: center;
line-height: 400px;
}
.ei-slider-large{
height: 347px;
width: 1024px;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 347px;
width: 1024px;
}
.ei-slider-large li img{
width: 1024px;
}
.ei-title{
position: absolute;
right: 50%;
margin-right: 13%;
top: 30%;
}
.ei-title h2, .ei-title h3{
text-align: right;
}
.ei-title h2{
font-size: 40px;
line-height: 50px;
font-family: 'Playfair Display', serif;
font-style: italic;
color: #b5b5b5;
}
.ei-title h3{
font-size: 70px;
line-height: 70px;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
color: #000;
}
.ei-slider-thumbs{
height: 13px;
margin: 0 auto;
position: relative;
}
.ei-slider-thumbs li{
position: relative;
float: left;
height: 100%;
}
.ei-slider-thumbs li.ei-slider-element{
top: 0px;
left: 0px;
position: absolute;
height: 100%;
z-index: 10;
text-indent: -9000px;
background: #000;
background: rgba(0,0,0,0.9);
}
.ei-slider-thumbs li a{
display: block;
text-indent: -9000px;
background: #666 ;
width: 100%;
height: 100%;
cursor: pointer;
-webkit-box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
-moz-box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
-webkit-transition: background 0.2s ease;
-moz-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
-ms-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.ei-slider-thumbs li a:hover{
background-color: #f0f0f0;
}
.ei-slider-thumbs li img{
position: absolute;
bottom: 50px;
opacity: 0;
z-index: 999;
max-width: 100%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-box-reflect:
below 0px -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%, transparent),
to(rgba(255,255,255,0.3))
);
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.ei-slider-thumbs li:hover img{
opacity: 1;
bottom: 13px;
-ms-filter: "progid
}
@media screen and (max-width: 830px) {
.ei-title{
position: absolute;
right: 0px;
margin-right: 0px;
width: 100%;
text-align: center;
top: auto;
bottom: 10px;
background: #fff;
background: rgba(255,255,255,0.9);
padding: 5px 0;
}
.ei-title h2, .ei-title h3{
text-align: center;
}
.ei-title h2{
font-size: 20px;
line-height: 24px;
}
.ei-title h3{
font-size: 30px;
line-height: 40px;
}
}
mentre il reset.css è:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,f orm,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
height: 347px;
width: 1024px;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
Pensavo fosse perchè lo slideshow è stato realizzato con CSS3 ed ho letto che ci sono problemi con ie per alcune proprietà, ma ho subito provato ad estrapolare lo slideshow dal sito e caricarlo in una pagina vuota e funziona perfettamente con internet explorer. Quindi sicuramente ci sarà un problema nel codice html che è questo:
<html>
<head>
<title>Sito Gruppo De Vivo</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="Azienda" />
<meta name="Keywords" content="arredo bagno" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Displa y:400italic' rel='stylesheet' type='text/css' />
<noscript>
<link rel="stylesheet" type="text/css" href="css/noscript.css" />
</noscript>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Tabella_01" width="1366" height="769" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="6">
[img]immagini/index_01.jpg[/img]</td>
<td colspan="6">
[img]immagini/index_02.jpg[/img]</td>
<td rowspan="6">
[img]immagini/index_03.jpg[/img]</td>
</tr>
<tr>
<td colspan="3">
[img]immagini/index_04.jpg[/img]</td>
<td colspan="3">
[img]immagini/index_05.jpg[/img]</td>
</tr>
<tr>
<td colspan="6">
<div class="container">
<div class="wrapper">
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
[*]
[img]images/large/6.jpg[/img]
<div class="ei-title">
<h2>Passionate</h2>
<h3>Seeker</h3>
</div>
[*]
[img]images/large/1.jpg[/img]
<div class="ei-title">
<h2>Creative</h2>
<h3>Geek</h3>
</div>
[*]
[img]images/large/2.jpg[/img]
<div class="ei-title">
<h2>Friendly</h2>
<h3>Devil</h3>
</div>
[*]
[img]images/large/3.jpg[/img]
<div class="ei-title">
<h2>Tranquilent</h2>
<h3>Compatriot</h3>
</div>
[*]
[img]images/large/4.jpg[/img]
<div class="ei-title">
<h2>Insecure</h2>
<h3>Hussler</h3>
</div>
[*]
[img]images/large/5.jpg[/img]
<div class="ei-title">
<h2>Loving</h2>
<h3>Rebel</h3>
</div>
[*]
[img]images/large/7.jpg[/img]
<div class="ei-title">
<h2>Photography by</h2>
<h3>Bartek Lurka</h3>
</div>
[/list]
<ul class="ei-slider-thumbs">
<li class="ei-slider-element">Current
[*]Slide 6[img]images/thumbs/6.jpg[/img][*]Slide 1[img]images/thumbs/1.jpg[/img][*]Slide 2[img]images/thumbs/2.jpg[/img][*]Slide 3[img]images/thumbs/3.jpg[/img][*]Slide 4[img]images/thumbs/4.jpg[/img][*]Slide 5[img]images/thumbs/5.jpg[/img][*]Slide 7[img]images/thumbs/7.jpg[/img][/list]
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 3000,
titlesFactor : 0
});
});
</script>
</td>
</tr>
<tr>
<td>
[img]immagini/index_07.jpg[/img]</td>
<td>
[img]immagini/index_08.jpg[/img]</td>
<td colspan="2">
[img]immagini/index_09.jpg[/img]</td>
<td>
[img]immagini/index_10.jpg[/img]</td>
<td>
[img]immagini/index_11.jpg[/img]</td>
</tr>
<tr>
<td colspan="6">
[img]immagini/index_12.jpg[/img]</td>
</tr>
<tr>
<td colspan="6">
[img]immagini/index_13.jpg[/img]</td>
</tr>
<tr>
<td>
[img]immagini/spaziatore.gif[/img]</td>
<td>
[img]immagini/spaziatore.gif[/img]</td>
<td>
[img]immagini/spaziatore.gif[/img]</td>
<td>
[img]immagini/spaziatore.gif[/img]</td>
<td>
[img]immagini/spaziatore.gif[/img]</td>
<td>
[img]immagini/spaziatore.gif[/img]</td>
<td>
[img]immagini/spaziatore.gif[/img]</td>
<td>
[img]immagini/spaziatore.gif[/img]</td>
</tr>
</table>
</body>
</html>
Scusatemi se mi sono dilungato ma vorrei tanto riuscire a completare questa prima pagina per poter proseguire allo sviluppo del sito interno, visto che da qualche tempo mi sono avvicinato a questo fantastico mondo e non vedo l'ora di apprendere nuove cose.
Ringrazio anticipatamente chiunque voglia darmi una mano
Rispondi quotando