28172 sujets

CSS et mise en forme, CSS3

Compatibilité IE-FF -- Panorama (délimitation de la zone image)

Bonjour à tous,

Je vous présente mon problème. Je crée un panorama, que j'intègre ensuite dans ma page web gràce à jQuery :

[URL=http://imageshack.us][IMG]http://img179.imageshack.us/img179/7420/fffa3.png[/IMG][/URL]
[URL=http://g.imageshack.us/g.php?h=179&i=fffa3.png][IMG]http://img179.imageshack.us/img179/7420/fffa3.385aa3a0a1.jpg[/IMG][/URL]

Le problème apparaît lorsque je passe sous IE :

[URL=http://imageshack.us][IMG]http://img165.imageshack.us/img165/5613/ielk9.png[/IMG][/URL]


La zone de visionnage du panorama n'est pas délimitée et l'image sort de la zone de Firefox.

Voici mon code html :


<!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" xml:lang="fr" >
      <head>
	<title>Pano</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery.js"></script>  
    <script type="text/javascript"
      src="js/jquery.panorama.js"></script>  
    <link rel="stylesheet" type="text/css"
      href="styles/jquery.panorama.css" media="screen"
      title="Xavier"/>
    <script type="text/javascript">
      <!--
      $(document).ready(function(){  
      $("img#panorama").panorama();  
      });  
      // --> 
    </script>


  </head>

  
  <body>
    <h1>Pano</h1>
    
    
      
    <img src="images/pano2.jpg" id="panorama" width="4815"
    height="500"  usemap="testmap" alt='Panorama' />  
      <map id="testmap" name="testmap">
	<area shape="rect" coords="4008,104,4298,367" href="./index.php" alt="Entrée"/>
      </map>  
      
      
      
      
      
  </body>
</html>


Et mon CSS :


*{
margin:0;
padding:0;
border:0;
width:auto;
}


.panorama {
  border: 20px solid #414141;
  margin-left: auto;
  margin-right: auto;
  position:relative;
  text-align:center;
  padding-top:50px;
  padding-bottom:50px;
  background-color:pink;
}




.panorama .title {
  margin-top:-20px;
}


/*.panorama .leftbtn {
  position:absolute;
  bottom:-3px;
  margin:-15px;
  cursor:pointer;
  height:600px;
  line-height:600px;
  width:200px;
  padding-right:100px;
}

.panorama  .rightbtn {
  position:absolute;
  bottom:-3px;
  margin:-15px;
  cursor:pointer;
  height:600px;
  line-height:600px;
  width:200px;
}
*/


.panorama .leftbtn{ 
  position:absolute;
  width:150px;
  height:600px;
  top:0px;
  left:0;
}

.panorama .rightbtn{ 
  position:absolute;
  width:150px;
  height:600px;
  top:0px;
  right:0;
}




.panorama .scroller{
  overflow:hidden;
  height:500px;
  width:666px;
  
}

.panorama .image-holder {
  overflow:hidden;
  position:relative;
  display:block;
}

.panorama a.panormaarea{
  border:3px solid #f00;
  display:block;
  background:#fff;
  opacity:.3;
  text-decoration:none;
  color:#000;
}
.panorama .panormaarea span{
  display:none;
}




Est-ce que quelqu'un a une idée ?? Bonne soirée à tous Smiley biggrin
Sujet clos
Aller à