Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Rozjeżdzanie się pod IE
maribt
post
Post #1





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 7.04.2010

Ostrzeżenie: (0%)
-----

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


Ten post edytował maribt 7.04.2010, 00:30:46
Go to the top of the page
+Quote Post
AdIoS_Neo
post
Post #2





Grupa: Zarejestrowani
Postów: 159
Pomógł: 43
Dołączył: 8.03.2009

Ostrzeżenie: (0%)
-----

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ć.
Go to the top of the page
+Quote Post
maribt
post
Post #3





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 7.04.2010

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
batman
post
Post #4





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
W #menu img ustawiłeś margin. IE6 ma to do siebie, że lubi podwajać marginesy.


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
maribt
post
Post #5





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 7.04.2010

Ostrzeżenie: (0%)
-----

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:(
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #6





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

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


Ten post edytował krzysztof_kf 7.04.2010, 17:48:16
Go to the top of the page
+Quote Post
batman
post
Post #7





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
Wrzuć gdzieś stronę online. Łatwiej będzie znaleźć źródło problemu.


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
mortus
post
Post #8





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

Do #hleft i #hright dodaj w css-ie overflow: hidden;.
Go to the top of the page
+Quote Post
maribt
post
Post #9





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 7.04.2010

Ostrzeżenie: (0%)
-----

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

Ten post edytował maribt 7.04.2010, 19:13:23
Go to the top of the page
+Quote Post
batman
post
Post #10





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
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.
Powód edycji: [batman]:


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
mortus
post
Post #11





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

Opcjonalnie spróbuj ustawić display: inline-block; dla elementów a, choć nie jestem pewien, czy to pomoże.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #12





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Wyrzuć z 

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


i po kłopocie

Ten post edytował krzysztof_kf 7.04.2010, 20:42:57
Go to the top of the page
+Quote Post
mortus
post
Post #13





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #14





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

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 ;]
Go to the top of the page
+Quote Post
maribt
post
Post #15





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 7.04.2010

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
batman
post
Post #16





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
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.


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
GreeN_DG
post
Post #17





Grupa: Zarejestrowani
Postów: 28
Pomógł: 1
Dołączył: 3.12.2009

Ostrzeżenie: (0%)
-----

Z mojego punktu widzenia najlepszy :

http://homepage.ntlworld.com/bobosola/pnghowto.htm


Ten post edytował GreeN_DG 11.04.2010, 20:59:01


--------------------
- WWW.GETICA.PL - strony WWW, logotypy, ilustracje - ZAPRASZAMY!
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.08.2025 - 00:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn