Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Lista punktowana w IE
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
malolat_ps
26.01.2011, 03:06:42
Witam!
Mam problem z menu na stronie. Tworzę je przez listę punktowaną, wszystkie przeglądarki interpretują kod dobrze, nawet, o dziwo, IE 8. Jednak w IE 6 i 7 strona jest rozjechana.
Linki do screenów:
IE6
IE7

A tutaj kod:
[HTML] pobierz, plaintext 
  1. <div class="column_left">
  2. 				<div class="menu_header_background">
  3. 					<div class="menu_header_txt">Menu główne</div>
  4. 				</div>
  5. 				<ul>
  6. 					<li><a href="#" class="menu_link">coś</a></li>
  7. 					<li class="menu_break"></li>
  8. 					<li><a href="#" class="menu_link">coś</a></li>
  9. 					<li class="menu_break"></li>
  10. 					<li><a href="#" class="menu_link">coś</a></li>
  11. 				</ul>
  12. 			</div>
[HTML] pobierz, plaintext


CSS:
[HTML] pobierz, plaintext 
  1. .column_left
  2. {
  3.   	float: left;
  4.   	width: 170px;
  5. }
  6.  
  7. .menu_header_background
  8. {
  9.   	background: url('../images/menu_header_background.jpg') no-repeat;
  10.   	width: 170px;
  11.   	height: 73px;
  12. }
  13.  
  14. .menu_header_txt
  15. {
  16.   	text-align: center;
  17.   	font-family: impact, tahoma;
  18. 	font-style: italic;
  19.   	font-size: 15px;
  20.   	color: #ffd602;
  21.   	padding-top: 25px;
  22. }
  23.  
  24. ul
  25. {
  26.   	display: block;
  27.   	margin: 0;
  28.   	margin-top: -5px;
  29.   	padding: 0;
  30. }
  31.  
  32. li
  33. {
  34.   	width: 170px;
  35.   	height: 29px;
  36.   	list-style-type: none;
  37.   	background: url('../images/menu_tile_left.png') no-repeat;
  38.   	background-position: left;
  39.   	display: block;
  40. }
  41.  
  42. li a
  43. {
  44.   	font-family: tahoma;
  45.   	font-size: 11px;
  46.   	text-decoration: none;
  47.   	padding-top: 8px;
  48.   	padding-left: 10px;
  49.   	color: #ffd602;
  50. }
  51.  
  52. li a:hover
  53. {
  54.   	color: #ffffff;
  55. }
  56.  
  57. .menu_link
  58. {
  59.   	background: url('../images/menu_tile_background.png') no-repeat;
  60.   	width: 146px;
  61.   	height: 29px;
  62.   	margin-left: 24px;
  63.   	display: block;
  64. }
  65.  
  66. li.menu_break
  67. {
  68.   	background: url('../images/menu_break.png') no-repeat;
  69.   	width: 170px;
  70.   	height: 1px;
  71.   	display: block;
  72. }
[HTML] pobierz, plaintext


Próbowałem już masy różnych rzeczy, jednak nic nie pomaga. Będę szczerze wdzięczny za jakiekolwiek sugestie, co zrobić, żeby było dobrze winksmiley.jpg
Pzdr
Rewil
26.01.2011, 18:42:25
Rozwiązanie 1.
<head>
<!--[if IE]>
<style>
//piszesz poprawki do styli w IE
</style>
<![endif]-->
</head>

Rozwiązanie 2.
:Before w CSS

Rozwiązanie 3.
dla tego wylistowienia i contentu dajesz dwa float:left; Zwinie ci sie w to cala dluga liste w poziomie. Ale dodajesz do wylistowienia clear:both; i działa smile.gif
malolat_ps
26.01.2011, 19:41:11
Potrafię wstawić style tylko dla IE, ale nie mam pomysłu jak napisać kod dla tej IE żeby nie rozjeżdżała strony. Twoje rozwiązanie trzecie niestety nie zdało egzaminu.
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.