Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Szerokość diva
Forum PHP.pl > Forum > Przedszkole
sslackware
25.07.2010, 18:38:50
Witam,

Niedawno rozpocząłem swoją przygodę z CSSami i niestety jak zapewne każdy rozpoczynający swoją przygodę mam problem z dopasowaniem wyglądu dla kilku różnych przeglądarek. Obecnie testuję stronę na IE8 oraz Chrome.

Problem stanowi bowiem szerokość div#menu ul li a:link, ul li a:visited oraz div#menu ul li a:hover. W przypadku IE8 width: 200px wyśmienicie spełnia swoje zadanie, natomiast w przypadku Chrome przy ustawionym width:200 (pewnie z powodu left-border oraz padding) szerokosc menu jest w rzeczywistosci duzo większa i wpada na div="menu".

[HTML] pobierz, plaintext 
  1. body {
  2. 	background: rgb(240,240,240);
  3. 	font-family: Arial, Helvetica, Verdana, Sans-serif;
  4. 	font-size: 12px;
  5. }
  6.  
  7. div#container{
  8. 	width:800;
  9. 	background: white;
  10. 	margin: auto;
  11. 	display: block;
  12. }
  13.  
  14. div#header{
  15. 	height: 220px;
  16. 	background: red;
  17. }
  18.  
  19. div#menu_header{
  20. 	font-family: Verdana;
  21. 	font-size: 15px;
  22. 	font-weight: bold;
  23. 	padding: 2px 0 0 0;
  24. 	color: white;
  25. 	text-align: center;
  26. 	text-transform: uppercase; 
  27. 	width:200px;
  28. 	height:20px;
  29. 	background: #006400;
  30. 	float: left;
  31. 	clear: left;
  32. 	-webkit-border-top-left-radius: 10px;
  33. 	-webkit-border-top-right-radius: 10px;
  34. 	-khtml-border-radius-topright: 10px;
  35. 	-khtml-border-radius-topleft: 10px;
  36. 	-moz-border-radius-topright: 10px;
  37. 	-moz-border-radius-topleft: 10px;
  38. 	border-top-right-radius: 10px
  39. 	border-top-left-radius: 10px;
  40. }
  41.  
  42. div#menu{
  43. 	background: white;
  44. 	float: left;
  45. 	clear:left;
  46. 	width:200px;
  47. }
  48.  
  49. div#menu ul{
  50. 	width:200px;
  51. 	color: white;
  52. 	font-weight: bold; 
  53. 	margin: 0;
  54. 	padding: 0;
  55. }
  56.  
  57. div#menu ul li{
  58. 	border-bottom: 1px solid #9ce;
  59. 	list-style: none;
  60. }
  61.  
  62. div#menu ul li a:link, ul li a:visited{
  63. 	display: block;
  64. 	width: 200px;
  65. 	text-decoration: none;
  66. 	padding: 7px;
  67. 	font-weight: bold;
  68. 	background-color: #27c;
  69. 	color: #def;
  70. 	border-left: 10px solid #25b;
  71. }
  72.  
  73. div#menu ul li a:hover{
  74. 	width: 200px;
  75. 	background-color: orange;
  76. 	color: #fff;
  77. 	border-left: 20px solid #26d;
  78. }
  79.  
  80. div#down_menu_header{
  81. 	font-family: Verdana;
  82. 	font-size: 15px;
  83. 	font-weight: bold;
  84. 	padding: 2px 0 0 0;
  85. 	color: white;
  86. 	text-align: center;
  87. 	text-transform: uppercase; 
  88. 	margin-top: 30 px;
  89. 	width:200px;
  90. 	height:20px;
  91. 	background: #006400;
  92. 	float: left;
  93. 	clear: left;
  94. 	-webkit-border-top-left-radius: 10px;
  95. 	-webkit-border-top-right-radius: 10px;
  96. 	-khtml-border-radius-topright: 10px;
  97. 	-khtml-border-radius-topleft: 10px;
  98. 	-moz-border-radius-topright: 10px;
  99. 	-moz-border-radius-topleft: 10px;
  100. 	border-top-right-radius: 10px
  101. 	border-top-left-radius: 10px;
  102. }
  103.  
  104. div#down_menu{
  105. 	width:200px;
  106. 	height:100px;
  107. 	background: rgb(255,180,0);
  108. 	float: left;
  109. 	clear: left;
  110. }
  111.  
  112. div#content{
  113. 	background: white;
  114. 	margin-left: 200px;
  115. 	padding: 15px;
  116. 	line-height: 18px;
  117. }
  118.  
  119. div#footer{
  120. 	height: 30px;
  121. 	background: rgb(255,180,0);
  122. 	font-family: Tahoma, Arial, Helvetica, Sans-serif;
  123. 	font-size: 10px;
  124. 	color: white;
  125. 	clear: both;
  126. 	-webkit-border-bottom-left-radius: 8px;
  127. 	-webkit-border-bottom-right-radius: 8px;
  128. 	-khtml-border-radius-bottomright: 8px;
  129. 	-khtml-border-radius-bottomleft: 8px;
  130. 	-moz-border-radius-bottomright: 8px;
  131. 	-moz-border-radius-bottomleft: 8px;
  132. 	border-bottom-right-radius: 8px
  133. 	border-bottom-left-radius: 8px;
  134. }
  135.  
  136. div#footer div#altnav{
  137. 	width: 350px;
  138. 	float: right;
  139. 	text-align: right;
  140. }
  141.  
  142. div#footer a {
  143. 	color: white;
  144. 	text-decoration: none;
  145. }
  146.  
  147. div#footer a:hover {
  148. 	color: red;
  149. }
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3.  <HEAD>
  4.   <TITLE> New Document </TITLE>
  5.   <META NAME="Generator" CONTENT="EditPlus">
  6.   <META NAME="Author" CONTENT="">
  7.   <META NAME="Keywords" CONTENT="">
  8.   <META NAME="Description" CONTENT="">
  9.   <link rel="stylesheet" href="tmp.css" type="text/css">
  10.   <script src="IEmarginFix.js" type="text/javascript"></script>
  11.  </HEAD>
  12.  <BODY>
  13. 	<div id="container">
  14.  
  15. 		<div id="header">
  16. 		</div>
  17.  
  18. 		<div id="menu_header">
  19. 			MENU:
  20. 		</div>
  21.  
  22. 		<div id="menu">
  23. 			<ul>
  24. 				<li><a href="#">Czcionki</a></li>
  25. 				<li><a href="#">Tekst</a></li>
  26. 				<li><a href="#">Tło</a></li>
  27. 				<li><a href="#">Marginesy</a></li>
  28. 				<li><a href="#">Obramowanie</a></li>
  29. 			</ul>
  30. 		</div>
  31.  
  32. 		<div id="down_menu_header">
  33. 			KONTAKT:
  34. 		</div>
  35.  
  36. 		<div id="down_menu">
  37. 		</div>
  38.  
  39. 		<div id="content">
  40. 			TEKST
  41. 		</div>
  42.  
  43. 		<div id="footer">
  44. 			Copyright by <a href="#"> XYZ</a>
  45. 			<div id="altnav">
  46. 				<a href="#">About</a> - 
  47. 				<a href="#">Services</a> - 
  48. 				<a href="#">Portfolio</a> - 
  49. 				<a href="#">Contact Us</a> - 
  50. 				<a href="#">Terms of Trade</a>
  51. 			</div>
  52. 		</div>
  53.  
  54. 	</div>
  55.  </BODY>
  56. </HTML>
[HTML] pobierz, plaintext


Mam nadzieję, że problem przedstawiłem wystarczająco jasno smile.gif.

Z góry bardzo dziękuję za pomoc.

Pozdrawiam
Jacek
Skie
25.07.2010, 19:08:11
Witam,
twój problem wynika stąd, że IE inaczej interpretuje CSS niż Chrome. Nowy IE miał być - jak zwykle - w 100% zgodnych z CSS, ale jak to zawsze bywa - taki nie jest. Problem z tą przeglądarką polega na tym, że padding jest liczony w width - czyli width: 200px + padding: 10px; skutkuje stworzeniem elementu o szerokości 190px (200 - 10) i paddingiem: 10px;
Natomiast w każdej cywilizowanej przeglądarce taki zapis to po prostu element o szerokości 200px i padding'u 10px.

Z tego co pamiętam pomagało w tym przypadku dodanie tagu !important przy paddingu.

Tutaj masz natomiast pełną listę pomocnych w tym przypadku odnośników:
http://www.google.pl/search?q=IE8+padding

PS. Jak chcesz stronę mieć kompatybilną we wszystkich przeglądarkach to powinieneś ją jeszcze sprawdzać w Operze i FireFox. Chrome mimo, iż jest bardzo chwalony wciąż w dziwny sposób zachowuje się przy niektórych kodach.
sslackware
25.07.2010, 19:33:32
Dzięki wielkie za pomoc. W google było dużo różnych sugestii, ale ta z !important również się tam znalazła smile.gif

Dla osób które kiedyś trafią na to forum w poszukiwaniu rozwiązania identycznego problemu to już mówię jak dokładnie trzeba to rozwiązać.
W przypadku prawie wszystkich przeglądarek oprócz IE przy width: 200px należy dodać znaczynik !important, a dla IE ustawić oddzielną szerokość. Reasumując:

Kod
width: 176px !important; /* dotyczy reszty przeglądarek */
width: 200px; /* IE */
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.