Overflow: auto et scrollbar ie6

Overflow: auto et scrollbar ie6 - HTML/CSS - Programmation

Marsh Posté le 10-03-2009 à 00:59:26    

J'ai pas mal googler mais rien trouver ... j'ai un template XHTML et CSS avec du flash.
 
Dedans je voudrais une petite partie avec une scrollbar. sous ie7 et firefox pas de probleme. Sous ie6 pas moyen de trouver ...
 
Le CSS:
 

Code :
  1. html, body{
  2. margin:0;
  3. padding:0;
  4. width:100%;
  5. height:100%;
  6. border:none;
  7. background: #CCC;
  8. }
  9. * html{
  10. overflow-x: hidden;
  11. }
  12. #mainContent {
  13. background: #CCC;
  14. margin: 0px;
  15. padding: 0px;
  16. position: absolute;
  17. top: 0px;
  18. left: 350px;
  19. right: 0px;
  20. bottom: 0px;
  21. overflow: hidden;
  22. }
  23. #header {
  24. background: #FFF;
  25. margin: 0px;
  26. padding: 0px;
  27. width: 350px;
  28. height: 400px;
  29. clear: both;
  30. position: absolute;
  31. top: 0px;
  32. left: 0px;
  33. list-style-type: none;
  34. overflow: hidden;
  35. text-align: justify;
  36. }
  37. #header h1{
  38. font-family: Verdana, Geneva, sans-serif;
  39. font-size: 12px;
  40. color: #1B75CB;
  41. text-align: justify;
  42. font-weight: normal;
  43. }
  44. #newshead {
  45. width: 350px;
  46. height: 30px;
  47. clear: both;
  48. position: absolute;
  49. top: 400px;
  50. left: 0px;
  51. background: #F60;
  52. margin: 0px;
  53. padding: 0px;
  54. list-style-type: none;
  55. overflow: hidden;
  56. }
  57. #news {
  58. width: 350px;
  59. clear: both;
  60. position: absolute;
  61. top: 430px;
  62. bottom: 20px;
  63. left: 0px;
  64. background: #F60;
  65. margin: 0px;
  66. padding: 0px;
  67. list-style-type: none;
  68. overflow: auto;
  69. }
  70. #para {
  71. font-family: Verdana, Geneva, sans-serif;
  72. font-size: 10px;
  73. font-style: normal;
  74. color: #666;
  75. padding: 10px;
  76. background: #FFF;
  77. text-align: justify;
  78. border: 10px solid #F60;
  79. position:relative;
  80. }
  81. #footer {
  82. width: 100%;
  83. clear: both;
  84. position: absolute;
  85. bottom: 0;
  86. left: 0;
  87. background: #333 url(img/footer.jpg) repeat-x;
  88. margin: 0px;
  89. padding: 0px;
  90. height: 20px;
  91. }
  97. .bords{
  98. margin: 10px;
  99. }
  100. .copy{
  101. font-family: Verdana, Geneva, sans-serif;
  102. font-size: 10px;
  103. font-style: normal;
  104. color: #E1DDD0;
  105. text-align: center;
  106. margin: 4px;
  107. }
  108. .titre{
  109. background: url(img/news.jpg) repeat-x;
  110. height: 15px;
  111. margin: 7px 0px 8px;
  112. }


 
Le HTML :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>test</title>
  7. <style type="text/css">
  8. <!--
  9. @import url("layout.css" );
  10. -->
  11. </style>
  13. <script src="scripts/swfobject_modified.js" type="text/javascript"></script>
  14. </head>
  16. <body>
  17. <div id="header">
  18. <div class="bords">
  19. <img src="img/logo.gif" width="112" height="135" alt="logo" />
  20. <h1>
  21. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  22.     <br />
  23.     <br />
  24.   <br />
  25.   <img src="img/iso.jpg" width="330" height="43" alt="iso" /><br />
  26.   <img src="img/logos.jpg" width="330" height="38" alt="software" /><br />
  27. </h1>
  28. </div>
  29. </div>
  30. <div id="newshead">
  31. <div class="titre">
  32. </div>
  33. </div>
  34. <div id="news">
  35. <div id="para">
  36. What is Lorem Ipsum?
  37.    
  38. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  39. <br />
  40. <br />
  41. Why do we use it?
  42. <br />
  43. <br />
  44. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
  45. <br />
  46. <br />
  47. Where does it come from?
  48. <br />
  49. <br />
  50. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur
  51. <br />
  52. <br />
  53. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
  54. Where can I get some?
  55. <br />
  56. <br />
  57. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
  58. <br />
  59. <br />
  60. What is Lorem Ipsum?
  61.    
  62. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  63. <br />
  64. <br />
  65. Why do we use it?
  66. <br />
  67. <br />
  68. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
  69. <br />
  70. <br />
  71. Where does it come from?
  72. <br />
  73. <br />
  74. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur
  75. <br />
  76. <br />
  77. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
  78. Where can I get some?
  79. <br />
  80. <br />
  81. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
  82. </div>
  83. </div>
  84. <div id="mainContent">
  85.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlashID" title="Index">
  86.     <param name="movie" value="index.swf" />
  87.     <param name="quality" value="high" />
  88.     <param name="wmode" value="opaque" />
  89.     <param name="swfversion" value="6.0.65.0" />
  90.     <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  91.     <param name="expressinstall" value="scripts/expressInstall.swf" />
  92.     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  93.     <!--[if !IE]>-->
  94.     <object type="application/x-shockwave-flash" data="index.swf" width="100%" height="100%">
  95.       <!--<![endif]-->
  96.       <param name="quality" value="high" />
  97.       <param name="wmode" value="opaque" />
  98.       <param name="swfversion" value="6.0.65.0" />
  99.       <param name="expressinstall" value="scripts/expressInstall.swf" />
  100.       <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
  101.       <div>
  102.         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
  103.         <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
  104.       </div>
  105.       <!--[if !IE]>-->
  106.     </object>
  107.     <!--<![endif]-->
  108.   </object>
  109. </div>
  110. <div id="footer">
  111. <div class="copy">
  112. &copy;
  113. </div>
  114. </div>
  115. <script type="text/javascript">
  116. <!--
  117. swfobject.registerObject("FlashID" );
  118. //-->
  119. </script>
  120. </body>
  121. </html>


 
Je voudrais la scrollbar dans la div news.

Reply

Marsh Posté le 10-03-2009 à 00:59:26   

Reply

Marsh Posté le 10-03-2009 à 10:58:56    

Sous IE 6 pour une zone avec une barre de scrolling, on utilise souvent une IFRAME.
Sinon, il faudrait voir le codage des pages qui ont cette fonctionalité.

Reply

Marsh Posté le 10-03-2009 à 11:02:41    

Euh... Personnellement j'ai jamais eu de problème pour avoir des scrollbar sous IE6. Maintenant vu la quantité de code qui nous est donnée, ça me donne pas envi de chercher d'où peu venir le problème. Et une démo en ligne serait bien plus pratique.


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 10-03-2009 à 11:51:04    

ca me surprend que tu n'ai jamais eu de problemes avec les scrollbar sous ie6, apperement il y a bcp de bug avec ca ...
 
Pour le test en ligne :
 
www.33pixel.com/tmp/

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed