Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML][PHP]Różne przeglądarki - inny wygląd strony :?:
deadmen4
post
Post #1





Grupa: Zarejestrowani
Postów: 60
Pomógł: 0
Dołączył: 17.02.2010
Skąd: Gliwice

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

Witam,

Mam stronę (na bezpłatnym hostingu), na której uczę się powoli (od podstaw) języków. Narazie już coś w miare jest, ale nie dawno zauważyłem potworny problem.

Strona w INTERNET EXPLORER (każda wersja), wygląda tak jak ma wyglądać (tak jak chce). A w KAŻDEJ innej przeglądarce (firefox, opera, safari, itd.) wygląda do bani. (nie trzyma rozmiarów, nie wyświetla elementów, i dużo więcej...)
Zresztą zrobiłem screeny:

w IE : >>> ZDJĘCIE <<<

w innej: >>> ZDJĘCIE <<<

INDEX.PHP 

[PHP] pobierz, plaintext 
  1.  
  2. <?php
  3. 	if((!isset($_COOKIE['licznikowe-ciacho'])) && (!strstr($_SERVER['HTTP_REFERER'], "csmap.yoyo.pl"))) {
  4. 		$plik = fopen("licznik.txt", "r");
  5. 		$tekst = fread($plik, filesize("licznik.txt"));
  6. 		$dane = explode(";", $tekst);
  7. 		fclose($plik);
  8. 		$plik = fopen("licznik.txt", "w");
  9. 		flock($plik, 2);
  10. 		$dane[0]++;
  11. 		fwrite($plik, "$dane[0];", 15);
  12. 		flock($plik, 3);
  13. 		fclose($plik);
  14. 		setcookie("licznikowe-ciacho", "zliczono", time()+30*60);
  15. 	}
  16. 	else {
  17. 		$plik = fopen("licznik.txt", "r");
  18. 		$tekst = fread($plik, filesize("licznik.txt"));
  19. 		$dane = explode(";", $tekst);
  20. 	}
  21.  
  22. ?>
  23.  
  24.  
  25. <html>
  26. <head>
  27. 		<link rel="Stylesheet" type="text/css" href="index.css" />
  28.  
  29. <title>STRONA</title>
  30. 	<meta name="Description" content="Skrypty, pomoce, wiadomosci, portal, wszsytko" />
  31. 	<meta name="Author" content="Marox" />
  32. <meta http-equiv="Expires" content="0" />
  33. 	<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
  34. 	<meta http-equiv="Cache-Control" content="post-check=0, pre-check=0" />
  35. 	<meta http-equiv="Pragma" content="no-cache" />
  36. 	<link rel="Shortcut icon" href="http://www.multihack.pl/favicon.ico" />
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45.  
  46. </head>
  47.  
  48.  
  49.  
  50. <body background="tlo_strona.jpg">
  51.  
  52.  
  53. <div id="strona">
  54. <table width="100%" cellspacing="0" cellpadding="0">
  55. <tr>
  56. <td style="{ position: relative; bottom: 1mm; }" colspan="2" align="center" valign="medium"><img src="logo.gif" alt="LOGO" /></td>
  57. </tr>
  58. </table>
  59.  
  60.  
  61.  
  62. <?php
  63.  
  64.  
  65.  
  66. switch ($_GET['cos']) { 
  67. 	 case 'losowanie': include ('losowanie.php');
  68. 	 break;
  69.  
  70. 	case 'ankieta': include ('formularz.php');
  71. 	break;
  72.  
  73. 	case 'chat': include ('chat/index.php');
  74. 	break;
  75.  
  76. 	case '': include ('a.php');
  77. 	break;
  78.  
  79. 	case 'bug': include ('bug.php');
  80. 	break;
  81.  
  82.          case 'sonda': include ('ocena.php');
  83. 	break;
  84.  
  85.         case 'gra': include ('game.php');
  86. 	break;
  87.  
  88.  
  89. 	default : 
  90.  
  91.  
  92. }
  93.  
  94. ?>
  95.  
  96. <div id="menu">
  97.  
  98. <dl>
  99. <dt>MENU</dt>
  100. <dd><a href='index.php'>Strona Główna</a></dd>
  101. <dd><a href='index.php?cos=ankieta'>Ankieta</a></dd>
  102. <dd><a href='index.php?cos=sonda&id=1'>Oceń strone</a></dd>
  103. <dd><a href='index.php?cos=gra'>Poziom strony</a></dd>
  104. <dt>NARZĘDZIA</dt>				
  105. <dd><a href='index.php?cos=losowanie'>Losowanie Liczb</a></dd>	
  106. <dt>CZAT</dt>
  107. <dd><a href='/chat/index.php'>Wejdź na Czat</a></dd>	
  108. <dt>SUPPORT</dt>
  109. <dd><a href='index.php?cos=bug'>Zgłaszanie Błędow</a></dd>
  110. </dl>
  111. <div id="sonda56676">Firewall: <a href="http://www.hanzo.eu/3,86,pl,netasq_IPS_U1100.html">netasq IPS U1100</a></div>
  112. <script type="text/javascript" src="http://sonda.hanzo.eu/sonda.js,56676,kVPb,9AIh"></script>
  113. </div>
  114.  
  115. <table width="100%" cellspacing="0" cellpadding="10">
  116. <tr>
  117. <td style="{ position: relative; top: 1mm; }"  bgcolor="#888888" colspan="2" align="center" valign="middle"> &copy;  2010; <i>Created by </i> <b> Marox</b><i style=" { color: white; position: relative; left: 8cm; }">Stronę odwiedziło już<b> <?php echo($dane[0]); ?></b>  osób</i></td>
  118. </tr>
  119. <tr>
  120.  
  121.  
  122.  
  123. </div>
  124. </body>
  125. </html>
  126.  
[PHP] pobierz, plaintext

Tak tylko: to pierwsze to do licznika wejść.

Podstron includowanych nie bede załączał, tylko powiem, że każda trafia do diva "reszta".

CSS:

[CSS] pobierz, plaintext 
  1.  
  2. html, body {
  3.  
  4.   width: 1000px;
  5.  margin: 0auto;
  6.  padding: 0 auto; 
  7.  
  8. }
  9.  
  10.  
  11. #strona {
  12. width: 1000px;
  13.  
  14.  
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21. border-left-style: dotted;
  22.  
  23. border-right-style: dotted;
  24. border-width:  4px;
  25. border-color: yellow;
  26.  
  27. }
  28.  
  29. #menu {
  30. width:250px;
  31. float:left;
  32.  
  33.  
  34.  
  35. }
  36.  
  37. #reszta {
  38.  
  39.  
  40. width:730px;
  41. float:right;
  42. background-color: #FFCCCC;
  43. font-family: Tahoma, cursive;
  44. border-style: solid;
  45. border-width:  2px;
  46. border-color: red;
  47.  
  48. }
  49.  
  50.  
  51.  
  52.  
  53.  
  54.  
  55. hr {
  56.  
  57. color: green;
  58.  
  59. }
  60.  
  61.  
  62.  
  63.  
  64. textarea {
  65.  
  66.  
  67. scrollbar-arrow-color: red;
  68. scrollbar-3dlight-color: black; 
  69. scrollbar-shadow-color: black; 
  70. scrollbar-highlight-color: lime;
  71. border-bottom-style: solid;
  72. border-left-style: solid;
  73. border-top-style: solid;
  74. border-right-style: solid;
  75. border-bottom-width:  thin;
  76. border-left-width:  thin;
  77. border-top-width:  thin;
  78. border-right-width: thin; 
  79. border-bottom-color: #3300FF;
  80. border-left-color:  #3300FF;
  81. border-top-color:  #3300FF;
  82. border-right-color:  #3300FF;
  83.  
  84.  
  85.  
  86. }
  87.  
  88.  
  89.  
  90. dl, dt, dd {
  91. 	display: block;
  92. 	margin: 0;
  93. 	padding: 0;
  94.     position: fixed; left: 0cm; 
  95.     width: 250px;
  96. float: left;
  97.     font-family: Arial Black, Verdana
  98.  
  99.  
  100.  
  101.  
  102. }
  103.  
  104. dt {
  105. 	width: 250px;
  106. 	padding: 5px 10px;
  107. 	font-weight: bold;
  108. 	font-size: larger;
  109. 	text-align: center;
  110. 	background: #797 url("tlo3.gif") repeat-x top;
  111. 	color: lime;
  112. 	border-width: 2px;
  113. 	border-style: solid;
  114. 	border-color: blue blue blue blue;
  115. 	font-family: Verdana;
  116. }
  117.  
  118. dd {
  119. 	width: 250px;
  120. 	padding-left: 10px;
  121. 	background: #797 url("punkt.gif") no-repeat left top;
  122. 	border-width: 1px;
  123. 	border-style: solid;
  124. 	border-color: black black black black;
  125.  
  126. }
  127.  
  128. dl a:link, dl a:visited {
  129. 	display: block;
  130. 	width: 220px;
  131. 	text-decoration: none;
  132. 	padding: 5px 10px;
  133. 	font-weight: bold;
  134. 	background: #bfb url("tlo2.gif") repeat-x top;
  135. 	color: red;
  136. 	border-left: 1px solid #797;
  137. }
  138.  
  139. dl a:hover {
  140. 	background-color: #797;
  141. 	background-image: url("tlo.gif");
  142. 	color: red;
  143.  
  144. }    
  145.  
  146.  
[CSS] pobierz, plaintext


Css jest do każdej podstrony.

(IMG:style_emoticons/default/sciana.gif) (IMG:style_emoticons/default/sciana.gif)

Proszę o pomoc bo, odkryłem to niedawno i nie wiem co jest nie tak.




PS.

To tylko strona testowa do nauki, jej treść jest byle jaka. Dopiero ucze się.
Screeny nie wyraźne bo na szybko robione.
Strona jest tu: http://csmap.yoyo.pl
Jak ktoś chce looknąć.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
mortus
post
Post #2





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

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

Dwa razy rozpoczynasz sekcję <html>, w kodzie masz
[HTML] pobierz, plaintext 
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  2.  
  3.  
  4. <html>
[HTML] pobierz, plaintext
Usuń ten drugi znacznik <html>.
Co do polskich znaków, w sekcji <head></head> masz coś takiego
[HTML] pobierz, plaintext 
  1. <http charset="iso-8859-2"" content="text/html" equiv="Content-Type"></http>
[HTML] pobierz, plaintext
No a czegoś takiego w XHTML-u nie ma. Powinno raczej być
[HTML] pobierz, plaintext 
  1. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-2" />
[HTML] pobierz, plaintext

W znaczniku body masz background="tlo_strona.jpg", a to powinno się raczej znaleźć w css-ie, bo w znaczniku body nie ma atrybutu background
[CSS] pobierz, plaintext 
  1. body {
  2.     background-image: url("tlo_strona.jpg");
  3. }
[CSS] pobierz, plaintext


W <div id="strona"> w pierwszej tabeli i pierwszej komórce (<td>) masz valign="medium", a chyba chodziło Ci o valign="middle".

W dokumencie może być tylko jedna sekcja <head>, tymczasem Ty dodajesz <head> przed <div id="reszta">, żeby wstawić style. Weź wstaw
[HTML] pobierz, plaintext 
  1. <link href="index.css" type="text/css" rel="stylesheet" />
[HTML] pobierz, plaintext
w sekcji <head> na początku strony, a stąd (z przed <div id="reszta">) w ogóle to usuń.

Znacznik końca linii wygląda tak <br/>, a nie tak </br>.

Na razie popraw to, o czym wspomniałem powinieneś się pozbyć kilkunastu, albo kilkudziesięciu błędów z pośród 67, które masz.

EDIT:
Jeżeli projektujesz stronę, to najlepiej projektuj ją pod inną przeglądarką (np. pod Firefox-em), ponieważ Internet Explorer nie trzyma się standardów ustanowionych przez W3C. Stronę do Internet Explorera można dostosować później, korzystając z pewnych tricków (hack-ów) w css.

Ten post edytował mortus 29.03.2010, 08:43:27
Go to the top of the page
+Quote Post

Posty w temacie
- deadmen4   [CSS][HTML][PHP]Różne przeglądarki - inny wygląd strony :?:   28.03.2010, 13:14:08
- - krzysztof_kf   może dla znacznika dd { usuń Kod position: f...   28.03.2010, 13:21:58
- - deadmen4   ooo... pojawiło się menu. Tylko trochę zniekształc...   28.03.2010, 13:30:14
- - krzysztof_kf   z menu pokombinuj z padding dla znacznika dt { a ...   28.03.2010, 13:34:29
- - deadmen4   Dobra, dopisałem. Przez dokumentacje parę rzeczy m...   28.03.2010, 13:53:37
- - krzysztof_kf   po co masz puste divy ? typu Kod<div id=...   28.03.2010, 14:05:31
- - deadmen4   Tego ta sonda wymagała... :/   28.03.2010, 14:09:49
- - krzysztof_kf   dodaj jakis selektor Kod#sonda { float: left...   28.03.2010, 14:12:05
- - neo1986kk   napewno pomoże Ci Firebug dla FF   28.03.2010, 14:23:09
- - deadmen4   OK. Z sondą jest all ok. Reszta wciąż beznadzieja...   28.03.2010, 15:26:25
- - krzysztof_kf   z czym masz jeszcze problem rozwiń temat   29.03.2010, 00:13:28
- - mortus   Dwa razy rozpoczynasz sekcję <html>, w kodzi...   29.03.2010, 08:37:47

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

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