>[Problema] Mi pagina no se ve bien en Opera e IE... 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>
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;
}
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;
}
