Estoy usando Supersized no se si lo conocen. Este
El tema es que en Mozilla, Opera y Chrome si ve bien, pero en IE 6 y 7 no se ve nada. Dejo el codigo html que estoy usando:
Código :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Prueba</title> <link rel="stylesheet" href="estilo.css" type="text/css"> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script> <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script> <script type="text/javascript" src="supersized.2.0.js"></script> <script type="text/javascript"> $(function(){ $.fn.supersized.options = { startwidth: 640, startheight: 480, vertical_center: 1, slideshow: 1, navigation: 1, transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left pause_hover: 1, slide_counter: 1, slide_captions: 1, slide_interval: 3000 }; $('#supersize').supersized(); }); </script> <style type="text/css"> *{ margin:0; padding:0; } a{ color:#8FC2FF; text-decoration: none; outline: none; } a:hover{ text-decoration: underline; } img{ border:none; } body { overflow:hidden;/*Needed to eliminate scrollbars*/ background:#000; } #content{ margin:0px auto; height:100px; width:100%; bottom:5%; z-index: 3; position:absolute; } #contentframe{ overflow: hidden; border-top:solid 0px #4F4F4F; border-bottom:0px solid #000; height: 100%; text-align:left; z-index: 3; } #slidecounter{ float:left; color:#4F4F4F; font:50px "Helvetica Neue", Arial, sans-serif; font-weight:bold; margin:18px 20px; } #slidecaption{ overflow: hidden; float:left; color:#FFF; font:26px "Helvetica Neue", Arial, sans-serif; font-weight:bold; margin:33px 0; } /*Supersized Stamp*/ .stamp{ float: right; margin: 25px 20px 0 0; } /*Supersize Plugin Styles*/ #loading { position: absolute; top: 49.5%; left: 49.5%; z-index: 1000; width: 24px; height: 24px; text-indent: -999em; background-image: url(images/progress.gif); } #supersize{ position:fixed; } #supersize img, #supersize a{ height:100%; width:100%; position:absolute; z-index: 0; } #supersize .prevslide, #supersize .prevslide img{ z-index: 1; } #supersize .activeslide, #supersize .activeslide img{ z-index: 2; } </style> <style type="text/css"> <!-- .Estilo1 {color: #333333} --> </style> </head> <body> <div id="loading"> </div> <div id="supersize"> <a href=""><img src="imagenes/01/uno.jpg" title=""/></a> <a href=""><img src="imagenes/01/dos.jpg" title=""/></a> <a href=""><img src="imagenes/01/tres.jpg" title=""/></a></div> <div id=flechauno> <a href="#" id="prevslide"><img src="imagenes/back_dull.gif" width="90" height="66" /></a> </div> <div id=flechados> <a href="#" id="nextslide"><img src="imagenes/forward_dull.gif" width="90" height="66" /></a></div> </body> </html>
En ie no me muestra la img al 100% y me corre de lugar las flechas que les asigne como next y prev.
Dejo los archivos para bajar ACA!
Espero que alguien me de una ayuda. Gracias
Saludos.