Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dostosowanie szablonu pod IE
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
M4rUd41
4.11.2009, 07:06:11
Witam,
przekopałem już trochę podobnych tematów na forum, ale nie znalazłem satysfakcjonującej odpowiedzi.
Mam taki dosyć spory problem. Mianowicie strona całkiem się rozjeżdża pod IE. Nie będę się rozpisywał bo za dużo miejsca by to zajęło, sprawdźcie sami: http://getlockerz.pl
I tu pytanie, jak dostosować szablon pod IE?
Oto on:
[CSS] pobierz, plaintext 
  1. @charset "iso-8859-2";
  2.  
  3. html, body {
  4. 	background-image:url(images/tlo.gif);
  5. 	background-color: #1c0d2b;
  6. 	font-family:Verdana, Arial, Helvetica, sans-serif;
  7. 	font-size:11px;
  8. 	color: #fff;
  9. 	margin: 0;
  10. 	padding: 0;
  11. }
  12.  
  13. a {
  14. 	color:#686868;
  15. 	border:0;
  16. 	text-decoration:none;
  17. }
  18.  
  19. a:hover {
  20. 	color:#999999;
  21. 	border:0;
  22. }
  23.  
  24. a:visited {
  25. 	color:#686868;
  26. 	border:0;
  27. }
  28. #top {
  29. 	background-image:url(images/top_03.png);
  30. 	background-repeat:repeat-x;
  31. 	width:90%;
  32. 	height:77px;
  33. 	padding-left:5%;
  34. 	padding-right:5%;
  35. 	overflow:hidden;	
  36. }
  37.  
  38. #nawi {
  39. 	float:right;
  40. }
  41.  
  42. #logo {
  43. 	float:left;
  44. }
  45.  
  46. #okno_g {
  47. 	background-image:url(images/body_14.png);
  48. 	background-repeat:repeat;
  49. 	width:50%;
  50. 	height:37px;
  51. 	overflow:hidden;
  52. 	margin-left:auto;
  53. 	margin-right:auto;
  54. 	text-align:center;
  55. 	padding-top:10px;
  56. }
  57.  
  58. #okno {
  59. 	background-image:url(images/body_17.png);
  60. 	background-repeat:repeat;
  61. 	width:48%;
  62. 	overflow:hidden;
  63. 	margin-left:auto;
  64. 	margin-right:auto;
  65. 	padding-bottom:10px;
  66. 	padding-left:1%;
  67. 	padding-right:1%;
  68. 	padding-top:10px;
  69.  
  70. }
  71.  
  72. #stopka {
  73. 	background-image:url(images/sotpka_49.png);
  74. 	background-repeat:repeat-x;
  75. 	height: 61px;
  76. 	width:96%;
  77. 	position:fixed;
  78. 	bottom:0px;
  79. 	filter: alpha(opacity=70); 
  80. 	-moz-opacity: 0.7;
  81. 	opacity: 0.7;
  82. 	padding-left:2%;
  83. 	padding-right:2%;
  84. }
  85.  
  86. #stopka_logo {
  87. 	float:left;
  88. }
  89.  
  90. #up {
  91. 	float:right;
  92. }
  93.  
  94. #wyslij {
  95. 	background-image:url(images/button.png);
  96. 	width:93px;
  97. 	height:30px;
  98. 	border:0;
  99. 	background-repeat:no-repeat;
  100. 	font-size:10;
  101. }
  102.  
  103. #textbox {
  104. 	background-image:url(images/textbox.png);
  105. 	width:181px;
  106. 	height:24px;
  107. 	border:0;
  108. 	background-repeat:no-repeat;
  109. 	color:#fff;
  110. 	padding-top: 5px;
  111. 	padding-left:3px;
  112. 	font-size:10px;
  113. 	font-weight:bolder;
  114. }
  115.  
  116. #kat {
  117. 	float:left;
  118. 	width: 199px;
  119. 	border:0;
  120. 	margin-left:1px;
  121. 	margin-right:1px;
  122. }
  123.  
  124. #naglowek-nag {
  125. 	background-image:url(images/ng_tlo.gif);
  126. 	background-repeat:repeat-x;
  127. 	width:199px;
  128. 	height:34px;
  129. 	text-transform:uppercase;
  130. 	font-weight:bold;
  131. 	font-size:15px;
  132. 	text-align:center;
  133. 	text-decoration:none;
  134. 	border-color:#000;
  135. 	border:1px;
  136. 	padding-top:8px;
  137. }
  138.  
  139. #obrazek-nag {
  140. 	width:199px;
  141. 	border-color:#000;
  142. 	border:1px;
  143. }
  144.  
  145. #nagrody1 {
  146. 	margin-left:0 auto;
  147. 	margin-right:0 atuo;
  148. 	text-align:center;
  149. 	width:606px;
  150. }
  151.  
  152. #kom_poz{
  153. 	color:#00FF00;
  154. }
  155.  
  156. #kom_neg {
  157. 	color:red;
  158. }
  159.  
  160. #langmenu {
  161. 	width:95%;
  162. 	height:23px;
  163. 	background-image:url(images/lang_tlo.png);
  164. 	background-repeat:repeat-x;
  165. 	border:0;
  166. 	font-size:10px;
  167. 	font-weight:bolder;
  168. 	padding-left:5%;
  169. 	padding-top:8px;
  170. }
  171.  
  172. #lang {
  173. 	width:60px;
  174. 	float:left;
  175. 	text-align:right;
  176. }
  177.  
  178. #lang_f {
  179. 	float:left;
  180. }
  181.  
  182. #stopka_tekst {
  183. 	width:73%;
  184. 	float:left;
  185. 	text-align:center;
  186. 	font-size:10px;
  187. 	font-weight:bolder;
  188. 	margin-left:0 auto;
  189. 	margin-right:0 auto;
  190. 	padding-top:20px;
  191. }
  192.  
  193. #kontakt {
  194. 	float:right;
  195. 	text-align:right;
  196. }
[CSS] pobierz, plaintext


Z góry dzięki za pomoc smile.gif
t4keda
4.11.2009, 12:06:58
Jak na mój prosty umysł jest cudem to, że ta strona w ogóle jakoś się wyświetla.
Najpierw popraw błędy strukturę strony, bo nie wiem po co ci 3 doctype na jednej stronie, body nie obejmujące całości, <html> jest gdzieś pod <body>. Zapoznaj się z tym: http://www.kurshtml.boo.pl/html/ramy_dokumentu,zielony.html <- tak powinna wyglądać podstawowa struktrua strony.
To jest istny bełkot! Tu masz błędy, które musisz poprawić:
http://validator.w3.org/check?verbose=1&am...etlockerz.pl%2F

A wątpię, żeby to było wszystko.

No i jeszcze to: http://jigsaw.w3.org/css-validator/validat...etlockerz.pl%2F
M4rUd41
4.11.2009, 17:50:04
Doctype jest kilka razy, bo w każdym panelu jest zaincludowany inny plik html. A w pliku index.php są jednocześnie 3 strony (3 wersje językowe)... Co do pliku CSS a raczej błędów które pokazuje walidator, to wszystko co się pokazuje jako błąd wyczytałem tu na forum. Bez tego stopka nie byłaby przezroczysta, a jeden istotny DIV nie byłby na środku...
t4keda
4.11.2009, 18:09:46
M4rUd41 ale to, że załączasz pliki html nie znaczy, że w każdym załączanym pliku musi być oddzielny doctype, html, head i body. Z tego powodu - jeśli chodzi o kod - masz syf. Przeglądarka nie widzi tego, że ty załączasz jakieś pliki, ponieważ cały ten proces odbywa się po stronie serwera i do przeglądarki trafia już gotowy (sklejony, połączony, powciskany - jak wolisz) kod który przeglądarka interpretuje.

validator nie czepia się pewnych rzeczy bez przyczyny!
Mówisz, że potrzebujesz właściwość opacity, która jest w standardzie CSS3, a więc proszę bardzo proszę, tu masz błędy: http://jigsaw.w3.org/css-validator/validat...&lang=pl-PL

I jakąś wątpię w to, że na forum jest omawiane to jak pisać strony, aby były błędy.
M4rUd41
4.11.2009, 20:25:45
Ok, poprawiłem CSS i usunąłem wszystkie niepotrzebne tagi <html>, <body> <doctype> itd. Walidator na początku pokazywał 49 błędów. Większość poprawiłem i nagle pokazuje 135... Jednego z nich nie rozumiem kompletnie:
Cytat
# Error Line 115, Column 14: ID "okno" already defined
<div id="okno">
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Jeżeli dobrze zrozumiałem, to mam tylko w raz użyć <div id="okno"> a w reszcie divów które wykorzystują ten sam styl mam użyć class="okno". Problem jest taki że jeżeli tak zrobie, to tylko div w którym użyłem id wyświetla się tak jak powinien, a reszta wygląda tak jakby div nie miał żadnego stylu, znaczy nie ma tła, szerokości, formatowania tekstu itd.
sebastiankozub
4.11.2009, 21:12:03
id to id a klasa to klasa... nie mozna mieszac obu a jak masz style zapisane powiedzy tak:
#przyklad
{
...
}

to jak dasz class="przyklad" to i tak przgladrka tych stylow nie zastosuje bo style klas definiuje sie :

.przyklad
{
...
}

ten sam id moze miec tylko jeden element na stronie!
jednak moze byc wiele elementow tej samej klasy ;-)
M4rUd41
9.11.2009, 22:16:48
To wszystko wyjaśnia... tongue.gif Dzięki smile.gif Będę dalej walczył z tymi błędami...

Więc tak. Stwierdziłem że usuwanie blisko 130 błędów jest nie na moje siły i napisałem stronę od nowa na bieżąco eliminując błędy i voila. Stronka bez błędów ani errorów i dodatkowo wyświetla się prawidłowo pod IE ^^ Dzięki wam wielkie za pomoc 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.