Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] - problem z IE
Forum PHP.pl > Forum > Przedszkole
Yrr
Witam.

mam taki kod w css:

  1. #previewPane{
  2. border:0px solid #CCCCCC;
  3. margin-bottom:10px;
  4. text-align:center;
  5. vertical-align:middle;
  6. padding-top:0px;
  7. position: relative;
  8. /* CSS HACK */
  9. height: 280px; /* IE 5.x */
  10. height/* */:/**/280px; /* Other browsers */
  11. height: /**/280px;
  12. width: auto;
  13. left: 30px;



gdzie moze byc problem w kodzie ktory zle wyswietla w IE ? w firefox opera wszystko jest ok, a IE zle interpretuje.

Pozdr.
qba10
ale na pisz co ci sie zle wyswietla
Yrr
tak dobrze wyglada:




tak zle w IE



Pozdr.
drPayton
Daj jeszcze html z tym fragmentem. Choć na mój gust to ten margin-bottom w połączeniu z position (IE niepoprawnie obsługuje i jedno i drugie). Ale daj html na wsi wypadek.
Yrr
  1. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"><style type="text/css">
  2. <!--
  3. body {
  4. background-image: url(images/tlo.png);
  5. background-repeat: repeat;
  6. margin-left: 35px;
  7. margin-top: 0px;
  8. }
  9. -->
  10. </style></head>
  11. <div id="dhtmlgoodies_slideshow">
  12. <div id="previewPane">
  13. <table width="107%" border="0" cellpadding="2">
  14. <tr>
  15. <td width="73%"><div align="center"><img src="images/image1_big.jpg"></div></td>
  16. <td width="27%"><div id="largeImageCaption">ghfjhgfjhfgjhg</div></td>
  17. </tr>
  18. <span id="waitMessage">Ładowanie zdjęcia. Proszę czekać...</span></div>
  19. <div id="galleryContainer">
  20. <div id="arrow_left"><img src="images/arrow_left.gif" height="52"></div>
  21. <div id="arrow_right">
  22. <div align="right"><img src="images/arrow_right.gif" height="52"></div>
  23. </div>
  24. <div id="theImages">
  25. <!-- Thumbnails -->
  26. <a href="#" onclick="showPreview('images/image1_big.jpg','1');return false"><img src="images/image1.jpg"></a>
  27. <a href="#" onclick="showPreview('images/image2_big.jpg','2');return false"><img src="images/image2.jpg"></a>
  28. <a href="#" onclick="showPreview('images/image3_big.jpg','3');return false"><img src="images/image3.jpg"></a>
  29. <a href="#" onclick="showPreview('images/image4_big.jpg','4');return false"><img src="images/image4.jpg"></a>
  30. <a href="#" onclick="showPreview('images/image5_big.jpg','5');return false"><img src="images/image5.jpg"></a>
  31. <a href="#" onclick="showPreview('images/image6_big.jpg','6');return false"><img src="images/image6.jpg"></a>
  32. <a href="#" onclick="showPreview('images/image7_big.jpg','7');return false"><img src="images/image7.jpg"></a>
  33. <a href="#" onclick="showPreview('images/image8_big.jpg','8');return false"><img src="images/image8.jpg"></a>
  34. <a href="#" onclick="showPreview('images/image9_big.jpg','9');return false"><img src="images/image9.jpg"></a>
  35. <!-- End thumbnails -->
  36.  
  37. <!-- Image captions -->
  38. <div class="imageCaption">opis</div>
  39. <div class="imageCaption">opis1</div>
  40. <div class="imageCaption">opis199</div>
  41. <div class="imageCaption">Opis produktu 4</div>
  42. <div class="imageCaption">Opis produktu 5</div>
  43. <div class="imageCaption">Opis produktu 6</div>
  44. <div class="imageCaption">Opis produktu 7</div>
  45. <div class="imageCaption">Opis produktu 8</div>
  46. <div class="imageCaption">Opis produktu 9</div>
  47. <!-- End image captions -->
  48.  
  49. <div id="slideEnd"></div>
  50. </div>
  51. </div>
  52. </div>
  53. </body>
  54. </html>


to kod ktory wyswietla zawartosc.
drPayton
CSS do elementów użytych w tym kodzie też...
Yrr
  1. body{
  2. background-image:url('images/tlo.png');
  3. background-repeat:repeat;
  4. padding-top:0px;
  5. }
  6. #dhtmlgoodies_slideshow{
  7. width:720px; /* Total width of slideshow */
  8.  
  9.  
  10. }
  11.  
  12. #previewPane{
  13. border:0px solid #CCCCCC;
  14. margin-bottom:10px;
  15. text-align:center;
  16. vertical-align:middle;
  17. padding-top:0px;
  18. position: relative;
  19. /* CSS HACK */
  20. height: 280px; /* IE 5.x */
  21. height/* */:/**/280px; /* Other browsers */
  22. height: /**/280px;
  23. width: auto;
  24. left: 30px;
  25.  
  26. }
  27. #previewPane img{
  28. line-height:200px;
  29. }
  30. #previewPane #largeImageCaption{ /* CSS styling of image caption below large image */
  31. font-style:inherit;
  32. text-align:center;
  33. font-family: Verdana, Arial, Helvetica, sans-serif; /* Font to use */
  34. font-size:13px;
  35. background-color: #6B6C88;
  36. width: 180px;
  37. color: #FFFFFF;
  38. }
  39. #galleryContainer{
  40. height:68px; /* Height of the images + 2 */
  41. border:0px solid #CCCCCC;
  42. margin-bottom:10px;
  43. position:relative;
  44. overflow:hidden;
  45. padding:1px;
  46. /* CSS HACK */
  47. height: 68px; /* IE 5.x - Added 2 pixels for border left and right */
  48. height/* */:/**/68px; /* Other browsers */
  49. height: /**/68px;
  50. top: 20px;
  51.  
  52. }
  53. #arrow_left{
  54. position:absolute;
  55. left:0px;
  56. z-index:10;
  57. background-color: #6B6C88;
  58. padding:1px;
  59. width: 38px;
  60. top: 0px;
  61. }
  62. #arrow_right{
  63. position:absolute;
  64. right:-2px;
  65. z-index:10;
  66. background-color:#6B6C88;
  67. padding:1px;
  68. height: 52px;
  69. top: 0px;
  70. width: 46px;
  71. }
  72. #theImages{
  73. position:absolute;
  74. height:70px;
  75. left:30px;
  76. width:100000px;
  77. top: 0px;
  78.  
  79. }
  80. #theImages #slideEnd{
  81. float:left;
  82. }
  83. #theImages img{
  84. float:left;
  85. padding:1px;
  86. filter: alpha(opacity=50);
  87. opacity: 0.5;
  88. cursor:pointer;
  89. border:0px;
  90. }
  91.  
  92. #waitMessage{
  93. display:none;
  94. position:absolute;
  95. left:200px;
  96. top:200px;
  97. background-color:#6B6C88;
  98. border:1px double #000000;
  99. padding:4px;
  100. color:#ffffff;
  101. font-size:0.8em;
  102. font-family:arial;
  103. }
  104.  
  105. #theImages .imageCaption{
  106. display:none;
  107. }


Prosze bardzo smile.gif
drPayton
Poddaje się. U mnie identycznie to wygląda pod FF i IE choć zupełnie inaczej niż na Twoich rysunkach...
Yrr
a jaka masz wersje IE ? 6.0 ?

Pozdr.
drPayton
Yep, 6.0
Dodam jeszcze, że już pod Operą inaczej niż pod FF i IE
Ale jak już pisałem, gdybym miał strzelać, to w marginesy. IE zupełnie inaczej je traktuje, szczególnie przy pozycjonowaniu.
Yrr
Oki bede walczyl smile.gif Pozdrof i dzieki smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.