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

mam taki kod w css:

[HTML] pobierz, plaintext 
  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;
[HTML] pobierz, plaintext



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

Pozdr.
qba10
27.08.2007, 21:10:45
ale na pisz co ci sie zle wyswietla
Yrr
28.08.2007, 06:41:12
tak dobrze wyglada:




tak zle w IE



Pozdr.
drPayton
28.08.2007, 10:12:43
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
28.08.2007, 16:44:16 
[HTML] pobierz, plaintext 
  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. <body>
  12. <div id="dhtmlgoodies_slideshow">
  13. <div id="previewPane">
  14. <table width="107%" border="0" cellpadding="2">
  15. <tr>
  16. <td width="73%"><div align="center"><img src="images/image1_big.jpg"></div></td>
  17. <td width="27%"><div id="largeImageCaption">ghfjhgfjhfgjhg</div></td>
  18. </tr>
  19. </table>
  20. <span id="waitMessage">Ładowanie zdjęcia. Proszę czekać...</span></div>
  21. <div id="galleryContainer">
  22. <div id="arrow_left"><img src="images/arrow_left.gif" height="52"></div>
  23. <div id="arrow_right">
  24. <div align="right"><img src="images/arrow_right.gif" height="52"></div>
  25. </div>
  26. <div id="theImages">
  27. <!-- Thumbnails -->
  28. <a href="#" onclick="showPreview('images/image1_big.jpg','1');return false"><img src="images/image1.jpg"></a>		
  29. <a href="#" onclick="showPreview('images/image2_big.jpg','2');return false"><img src="images/image2.jpg"></a>		
  30. <a href="#" onclick="showPreview('images/image3_big.jpg','3');return false"><img src="images/image3.jpg"></a>		
  31. <a href="#" onclick="showPreview('images/image4_big.jpg','4');return false"><img src="images/image4.jpg"></a>		
  32. <a href="#" onclick="showPreview('images/image5_big.jpg','5');return false"><img src="images/image5.jpg"></a>		
  33. <a href="#" onclick="showPreview('images/image6_big.jpg','6');return false"><img src="images/image6.jpg"></a>		
  34. <a href="#" onclick="showPreview('images/image7_big.jpg','7');return false"><img src="images/image7.jpg"></a>		
  35. <a href="#" onclick="showPreview('images/image8_big.jpg','8');return false"><img src="images/image8.jpg"></a>
  36. <a href="#" onclick="showPreview('images/image9_big.jpg','9');return false"><img src="images/image9.jpg"></a>	
  37. <!-- End thumbnails -->
  38.  
  39. <!-- Image captions -->	
  40. <div class="imageCaption">opis</div>
  41. <div class="imageCaption">opis1</div>
  42. <div class="imageCaption">opis199</div>
  43. <div class="imageCaption">Opis produktu 4</div>
  44. <div class="imageCaption">Opis produktu 5</div>
  45. <div class="imageCaption">Opis produktu 6</div>
  46. <div class="imageCaption">Opis produktu 7</div>
  47. <div class="imageCaption">Opis produktu 8</div>
  48. <div class="imageCaption">Opis produktu 9</div>
  49. <!-- End image captions -->
  50.  
  51. <div id="slideEnd"></div>
  52. </div>
  53. </div>
  54. </div>
  55. </body>
  56. </html>
[HTML] pobierz, plaintext


to kod ktory wyswietla zawartosc.
drPayton
29.08.2007, 08:56:33
CSS do elementów użytych w tym kodzie też...
Yrr
29.08.2007, 22:28:32 
[HTML] pobierz, plaintext 
  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. 	}
[HTML] pobierz, plaintext


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

Pozdr.
drPayton
30.08.2007, 15:03:37
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
30.08.2007, 19:03:16
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.