Mi pagina solo se ve bien en Firefox.
Podrian decirme porque?
Os dejo el codigo de la pagina y sus CSS
Haver si alguien me dice el porque :S
Pagina HTML Código HTML:
<html>
<head>
<title>Scrollable view</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/scrollable-view.css"/>
<script src="js/jquery.pack.js"></script>
<script src="js/flashembed.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.scrollable.min.js"></script>
<script src="js/flow.embed.js"></script>
<script>
$(function() {
$("a.flowplayer").flowembed("../FlowPlayerDark.swf", {
initialScale:'scale',
hideControls:true
});
$("div.scrollable").scrollable({
horizontal:true,
size:1,
onSeek:onClipDone
});
});
</script>
</head>
<body>
<div id="page">
<div class="scrollable">
<ul class="navi">
<li><a>First video</a></li>
<li><a>Second video</a></li>
<li><a>Third video</a></li>
<li><a>Fourth video</a></li>
<li><a>Fifth video</a></li>
</ul>
<br clear="all"/>
<a class="prev"></a>
<div class="items">
<div>
<a class="flowplayer" a href="videos/ATAQUE MOCO.flv">
<img src="img/bo.jpg" />
</a>
<h2>First video</h2>
<p>
Sed ut magna. Duis condimentum purus non nisi. Praesent justo.
Suspendisse urna mi, malesuada vitae, molestie ut, sodales eu, sem.
</p>
</div>
<div>
<a class="flowplayer" href="videos/caida.mov">
<img src="img/3m.jpg" />
</a>
<h2>Second video</h2>
<p>
Vivamus vulputate. Vestibulum eget eros sit amet ligula
vestibulum tincidunt. Vivamus id orci nec metus pretium rhoncus.
Donec tortor nisi, viverra id, fringilla sed, euismod feugiat, pede.
</p>
</div>
<div>
<a class="flowplayer" href="videos/Alien.mpeg">
<img src="img/2m.jpg" />
</a>
<h2>Third video</h2>
<p>
Nullam dui. Vestibulum diam neque, vehicula non, dapibus non, lacinia in, neque.
</p>
<p>
Tellus mi aliquet diam, eu semper tellus ante a massa. Cras leo massa, blandit vitae, pharetra ve.
</p>
</div>
<div>
<a class="flowplayer" href="http://blip.tv/file/get/KimAronson-TwentySeconds58192.flv">
<img src="img/3m.jpg" />
</a>
<h2>Fourth video</h2>
<p>
Nullam sit amet arcu vel mi commodo sodales. Donec a augue. In semper magna sit amet tortor. Aenean id ligula. Nulla facilisi.
</p>
</div>
<div>
<a class="flowplayer" href="http://blip.tv/file/get/Behappy-clouds106.flv">
<img src="img/bo.jpg" />
</a>
<h2>Fifth video</h2>
<p>
Sed ut magna. Duis condimentum purus non nisi. Praesent justo.
Suspendisse urna mi, malesuada vitae, molestie ut, sodales eu, sem.
</p>
</div>
</div>
<a class="next"></a>
</div>
<br clear="all" />
<br />
</div>
</body>
</html> common.css Código HTML:
body {
background-color:#777;
font-family:"trebuchet ms", verdana, "bitstream vera sans";
padding:0;
margin:0;
text-align:center;
}
#page {
width:600px;
background-color:#fff;
margin:0px auto;
padding:20px 150px 20px 50px;
min-height:600px;
border:1px solid #000;
border-width:0 1px 1px 1px;
text-align:left;
}
h1 {
font-size:22px;
letter-spacing:-1px;
color:#0d7b7a;
font-weight:normal;
}
h1 em {
font-style:normal;
color:darkorange;
}
h2 {
font-size:18px;
font-weight:normal;
}
.less {
color:#999;
font-size:12px;
}
scrollable-view.css Código HTML:
/* player dimensions */
a.flowplayer, a.flowplayer img {
display:block;
border:0;
width:250px;
height:180px;
margin-right:15px;
float:left;
}
/* play button on top of splash image */
div.playButton {
background:url(../img/play.png) no-repeat;
width:45px !important;
height:45px;
position:relative;
top:-115px;
left:105px;
margin-bottom:-50px;
opacity:0.9;
}
div.playButton:hover {
opacity:1.0;
}
/* items */
div.scrollable {
margin-left:-30px;
}
div.items {
height:180px;
float:left;
width:470px;
background-color:#efefef;
border:1px solid #ddd;
}
div.items div {
width:470px;
}
div.scrollable div {
float:left;
}
div.scrollable h2 {
margin-top:15px;
}
div.scrollable p {
color:#444;
font-size:11px;
margin-right:15px;
}
/* next / prev buttons */
a.prev, a.next {
display:block;
width:30px;
height:30px;
float:left;
background-repeat:no-repeat;
margin-top:70px;
}
a.prev {
background:url(../img/button-left.gif);
margin-right:10px;
}
a.prev:hover {
background:url(../img/button-left-over.gif);
}
a.next {
background:url(../img/button-right.gif);
margin-left:10px;
}
a.next:hover {
background:url(../img/button-right-over.gif);
}
/* tabs */
ul.navi {
margin:20px 0 0 0 ;
padding:0px;
height:1.45em;
position:relative;
top:10px;
left:39px;
width:470px;
}
ul.navi li {
background:url(../img/tab-left.gif) left top no-repeat;
padding-left:4px;
float:left;
margin:0;
list-style-type:none;
}
ul.navi a {
background:url(../img/tab-right.gif) right top no-repeat;
padding:3px 12px;
border-bottom:1px solid #D2D2D2;
text-decoration:none;
display:block;
color:#333;
font-size:13px;
}
ul.navi li.active a, ul.navi a:hover {
background-position:100% -150px;
border-bottom:1px solid #fff;
}
ul.navi li.active {
background-position:0 -150px;
}