Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Rozjeżdzanie się pod IE
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
maribt
7.04.2010, 00:29:39
Już mi ręce opadają:/ nie wiem w którym miejscu robię błąd, css jak i html przechodzi poprawnie validację, a mimo to IE robi fochy.

Może najpierw pokaże screeny:

kosmos w IE
tak powinna wyglądać strona

i oczywiście kod:

[HTML] pobierz, plaintext 
  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
  4. <head>
  5.   <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
  6.   <meta name="Description" content=" [wstaw tu opis strony] " />
  7.   <meta name="Keywords" content=" [wstaw tu slowa kluczowe] " />
  8.  
  9.   <title> Alumateq </title>
  10.  
  11.   <link href="style.css" rel="stylesheet" type="text/css" />
  12. </head>
  13. <body>
  14. <!--menu -->
  15. <div id="menu">
  16. 	<a href="http://www.alumateq.pl"><img src="images/logo.jpg" alt="Alumateq" id="llogo" /></a>
  17. 	<ul>
  18. 		<li class="active"><a href="#"><span>home</span></a></li> <!-- do aktywnego adresu należy dodać span -->
  19. 		<li class="normal"><a href="#">o firmie</a></li>
  20. 		<li class="normal"><a href="#">realizacje</a></li>
  21. 		<li class="normal"><a href="#">certyfikaty</a></li>
  22. 		<li class="normal"><a href="#">dealer</a></li>
  23. 		<li class="normal"><a href="#">kontakt</a></li>
  24. 	</ul>
  25. </div>
  26. <!-- header -->
  27. <div id="header">
  28. 	<div id="hleft">
  29. 		<h1>
  30.  
  31. 			Witamy na stronie firmy ALUMATEQ<br />
  32. 			<em>Producenta stolarki aluminiowej</em>
  33. 		</h1>	
  34. 		<p>Lorem Ipsum is simply dummy text of the printing and typesetting
  35. 			 industry. Lorem  Ipsum has been the industry's standard dummy 
  36.        text ever since the 1500s, when an unknown printer took a galley of 
  37.        type and scrambled it to make a type specimen book. It has survive d
  38.        not only five centuries, but also the leap into electronic typesetting, 
  39.        remaining essentially unchanged. It was popularised in the 1960s with
  40. 			 the release of Letraset sheets containing Lorem Ipsum passages, and 
  41.        more recently with desktop publishing software like Aldus PageMaker 
  42.        including versions of Lorem 
  43. 		</p>
  44. 		<a href="#"><img src="images/more_white.png" alt="więcej" /></a>
  45. 	</div>
  46. 	<div id="hright">
  47. 		<img src="images/img01.jpg" alt="" />
  48. 	</div>
  49. </div>
  50. <!-- oferta -->
  51. <div id="offer">
  52. 	<div id="offer_left">
  53. 		<img src="images/okno_prof.png" class="prof" alt="" />
  54. 		<h2>OKNA</h2>kjkjkjkj<br />jkjkj<br />jkjkjkj<br />jkjkf
  55. 	</div>
  56. 	<div id="offer_middle">
  57.  
  58. 	</div>
  59. 	<div id="offer_right">
  60.  
  61. 	</div>
  62. </div>
  63. </body>
  64. </html>
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1.  * {
  2. 	margin: 0;
  3. 	padding: 0;
  4. }
  5. body {
  6. 	background: #FFFFFF url(images/tlo.gif) repeat-x;
  7. 	font-family: Georgia, "Times New Roman", Times, serif;
  8. 	font-size: 13px;
  9. 	color: #666666;
  10. }
  11. img {
  12. 	border: none;
  13. }
  14.  
  15. /* Menu */
  16.  
  17.  
  18. #menu {
  19. 	width: 980px;
  20. 	height: 94px;
  21. 	margin: 0 auto;
  22. }
  23. #menu ul {
  24. 	margin: 0;
  25. 	padding: 0;
  26. 	list-style: none;
  27. }
  28. #menu .normal a {
  29. 	display: block;
  30. 	float: left;
  31. 	height: 20px;
  32. 	margin: 40px 12px 0 0;
  33. 	padding: 2px 0 0 0;
  34. 	text-decoration: none;
  35. 	text-transform: uppercase;
  36. 	text-align: center;
  37. 	font-weight: bold;
  38. 	font-family: Arial;
  39. 	font-size: 12px;
  40. 	color: #262626;
  41. }
  42.  
  43. #menu .normal a:hover {
  44. 	color: #767676;
  45. }
  46.  
  47. #menu .active a {
  48. 	background: #343434 url(images/mright.gif) right top no-repeat ;
  49. 	display: block;
  50. 	float: left;
  51. 	height: 20px;
  52. 	margin: 40px 12px 0 0;
  53. 	padding: 0px 8px 0 0;
  54. 	text-decoration: none;
  55.  
  56. }
  57. #menu span {
  58. 	background: url(images/mleft.gif) left top no-repeat;
  59. 	height: 18px;
  60. 	display: block;
  61. 	padding: 2px 0 0 8px;
  62. 	text-transform: uppercase;
  63. 	text-align: center;
  64. 	font-weight: bold;
  65. 	font-family: Arial;
  66. 	font-size: 12px;
  67. 	color: #FFFFFF;
  68. }
  69. #menu li {
  70. 	display: inline;
  71. }
  72. #menu img {
  73. 	margin: 20px 280px 24px 10px;
  74. 	float: left;
  75. }
  76.  
  77. /* Header */
  78.  
  79. #header {
  80. 	width: 980px;
  81. 	margin: 0 auto;
  82. }
  83. #hleft {
  84. 	float: left;
  85. 	width: 488px;
  86. 	height: 293px;
  87. 	background: url(images/img00.gif);
  88. }
  89. #hright {
  90. 	float: right;
  91. 	width: 492px;
  92. 	height: 293px;
  93. }
  94. h1 {
  95. 	margin: 25px 0 25px 10px;
  96. 	height: 34px;
  97. 	width: 400px;
  98. 	color: #ffffff;
  99. 	border-left: 12px solid #85C226;
  100. 	font-family: Tahoma;
  101. 	font-size: 15px;
  102. 	font-weight: bold;
  103. 	padding: 0 0 0 10px;
  104.  
  105. }
  106. h1 em {
  107. 	color: #BDBDBD;
  108. 	font-family: Tahoma;
  109. 	font-size: 11px;
  110. 	font-weight: bold;
  111. }
  112. #hleft p {
  113. 	color: #ffffff;
  114. 	font-family: verdana;
  115. 	font-size: 11px;
  116. 	font-weight: normal;
  117. 	margin: 0 45px 0 32px;
  118. }
  119. #hleft img {
  120. 	margin: 40px 45px 0 0;
  121. 	float: right;	
  122. }
  123.  
  124. /* oferta */
  125.  
  126. #offer {
  127. 	width: 980px;
  128. 	margin: 0 auto;
  129. }
  130. #offer_left {
  131. 	float: left;
  132. 	clear: left;
  133. 	width: 355px;
  134. 	height: 229px;
  135. 	margin: 10px 0 0 0;
  136. 	background: url(images/offer_left.png);
  137. }
  138. #offer_middle {
  139. 	float: left;
  140. 	clear: none;
  141. 	width: 344px;
  142. 	height: 229px;
  143. 	margin: 10px 0 0 0;
  144. 	background: url(images/offer_middle.png);
  145. }
  146. #offer_right {
  147. 	float: right;
  148. 	clear: right;
  149. 	width: 281px;
  150. 	height: 229px;
  151. 	margin: 10px 0 0 0;
  152. 	background: url(images/offer_right.png);
  153. }
  154. .prof {
  155. 	margin: 60px 10px 40px 5px;
  156. 	display: inline;
  157. 	float: left;
  158. 	clear: left;
  159. }
  160. #offer h2 {
  161. 	background: url(images/plus.png) no-repeat left;
  162. 	padding: 0 0 0 12px;
  163. 	margin: 30px 0 10px 71px;
  164. 	color: #85C226;
  165. 	font-family: Tahoma;
  166. 	font-weight: bold;
  167. 	font-size: 19px; 
  168. }
[HTML] pobierz, plaintext
AdIoS_Neo
7.04.2010, 03:18:52
Witam, po ss widzę, że chodzi o IE6 ? Na pocieszenie powiem Ci, iż w IE8 wygląda wszystko normalnie tak jak w ff. Niestety nie mam IE6 więc nie mogę nic sam zdziałać. Patrzyłeś na górną belkę menu ? W IE6 jest tylko jeden przycisk, gdzie reszta ? Może one gdzieś wskoczyły pod obrazek i obniżyły resztę strony. Btw. standardy W3C i IE6 ? ;d nieeee to nie ta bajka ^^ polecam dodać kilka osobnych reguł dla IE6 i nimi to skorygować.
maribt
7.04.2010, 07:14:42
tak, IE6;/

doszedłem już do tego, że odpowiedzilna jest za to linkijka 60 w arkuszu styli. Z tym, że po zmianie na display: inline nie rozjezdza się już menu ale coś dziwnego dzieje się z "HOME" zarówno na IE jak i FF: screen
batman
7.04.2010, 07:22:19
W #menu img ustawiłeś margin. IE6 ma to do siebie, że lubi podwajać marginesy.
maribt
7.04.2010, 17:15:08
Cytat(batman @ 7.04.2010, 08:22:19 ) *
W #menu img ustawiłeś margin. IE6 ma to do siebie, że lubi podwajać marginesy.

nie pomaga:(
krzysztof_kf
7.04.2010, 17:23:27
No to daj dla selektora jak dajesz grafikę to po co dajesz do background jakiś '#' kolor 

[CSS] pobierz, plaintext 
  1.  
  2. #menu .active a {
  3. width: 50px; // Twoja szerokość i po krzyku 
  4.  
[CSS] pobierz, plaintext
batman
7.04.2010, 17:43:31
Wrzuć gdzieś stronę online. Łatwiej będzie znaleźć źródło problemu.
mortus
7.04.2010, 18:07:27
Do #hleft i #hright dodaj w css-ie overflow: hidden;.
maribt
7.04.2010, 19:06:15
Cytat(krzysztof_kf @ 7.04.2010, 18:23:27 ) *
No to daj dla selektora jak dajesz grafikę to po co dajesz do background jakiś '#' kolor

bo ten button składa sie z dwóch grafik (prawej i lewej), a po środku jest wypełnienie kolorem.

Cytat(krzysztof_kf @ 7.04.2010, 18:23:27 ) *
[CSS] pobierz, plaintext 
  1.  
  2. #menu .active a {
  3. width: 50px; // Twoja szerokość i po krzyku 
[CSS] pobierz, plaintext

ale ten element ma się właśnie dostosowywać do szerokości tekstu, a jak dam width na stałe to będzie wtedy bez sensu.
Chociaż z tego co widzę to po ustawieniu width: 10px; to w IE button sam się rozciąga w zależności od szerokości tekstu ale znowu w FF się kaszani:/

wersja online: click

Cytat(mortus @ 7.04.2010, 19:07:27 ) *
Do #hleft i #hright dodaj w css-ie overflow: hidden;.

niestety to nic nie daje
batman
7.04.2010, 19:20:38
No i się sprawa wyjaśniła. Dodaj do #menu overflow: hidden;


A menu się nie wyświetla poprawnie, ponieważ w IE6 elementy blokowe rozciągają się na maksymalną szerokość. Ustaw width dla każdego li (lub a znajdującego się w li) i menu będzie się poprawnie wyświetlało.
mortus
7.04.2010, 19:24:04
Opcjonalnie spróbuj ustawić display: inline-block; dla elementów a, choć nie jestem pewien, czy to pomoże.
krzysztof_kf
7.04.2010, 20:34:25
Wyrzuć z 

[CSS] pobierz, plaintext 
  1.  
  2. .menu a span {
  3. display: block;
[CSS] pobierz, plaintext


i po kłopocie
mortus
7.04.2010, 20:40:09
Cytat(krzysztof_kf @ 7.04.2010, 21:34:25 ) *
Po co robisz wsparcie dla ie6 ?

Wyrzuć tego spana z 

[CSS] pobierz, plaintext 
  1.  
  2. <li class="active"><a href="#">home</a></li>
  3.  
[CSS] pobierz, plaintext


i dodaj do klasy active czcionkę , i co tam tylko chcesz i będziesz miał dobrze pod wszystkimi przeglądarkami

A gdzie ma włożyć obrazek? Raczej nadaj elementowi span display: inline-block;. Wcześniej nie zauważyłem, że zrobiłeś z niego element blokowy.
krzysztof_kf
7.04.2010, 20:46:34
Cytat(mortus @ 7.04.2010, 21:40:09 ) *
A gdzie ma włożyć obrazek? Raczej nadaj elementowi span display: inline-block;. Wcześniej nie zauważyłem, że zrobiłeś z niego element blokowy.


Fakt trochę nie domówień ale problem rozwiązany ;]
maribt
7.04.2010, 20:50:22
Cytat(mortus @ 7.04.2010, 20:24:04 ) *
Opcjonalnie spróbuj ustawić display: inline-block; dla elementów a, choć nie jestem pewien, czy to pomoże.


pomogło:) dziękuję bardzo wszystkim za zainteresowanie tematem!

P.S. Jest może jakis sposób żeby IE6 poprawnie wyświetlał .png z przezroczystym tlem?
batman
7.04.2010, 21:27:50
Cytat(maribt @ 7.04.2010, 21:50:22 ) *
P.S. Jest może jakis sposób żeby IE6 poprawnie wyświetlał .png z przezroczystym tlem?
Jest - png fix.
GreeN_DG
11.04.2010, 20:48:23
Z mojego punktu widzenia najlepszy :

http://homepage.ntlworld.com/bobosola/pnghowto.htm
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.