Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML][PHP]Różne przeglądarki - inny wygląd strony :?:
Forum PHP.pl > Forum > Przedszkole
deadmen4
28.03.2010, 13:14:08
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.

sciana.gif 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ąć.




krzysztof_kf
28.03.2010, 13:21:58
może dla znacznika dd { usuń

Kod
    position: fixed; left: 0cm;
deadmen4
28.03.2010, 13:30:14
ooo... pojawiło się menu. Tylko trochę zniekształcone. (żeby zobaczyć najlepiej wejść na strone)

Ale wciąż jeszcze nie trzyma odstępów, przesówa się, no i te polskie znaki.... właśnie co z nimi? :?:
krzysztof_kf
28.03.2010, 13:34:29
z menu pokombinuj z padding dla znacznika dt { a jeśli chodzi o wyświetlanie polskich znaków może byś wpisał jakąś dokumentację

Kod
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<html>
<head>
<http equiv="Content-Type" content="text/html" charset=iso-8859-2" />
<link rel="Stylesheet" type="text/css" href="index.css" />
<title>STRONA</title>
<meta name="Description" content="Skrypty, pomoce, wiadomosci, portal, wszsytko" />
<meta name="Author" content="Marox" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
<meta http-equiv="Cache-Control" content="post-check=0, pre-check=0" />
<meta http-equiv="Pragma" content="no-cache" />
<link rel="Shortcut icon" href="http://www.multihack.pl/favicon.ico" />
</head>
<body>
deadmen4
28.03.2010, 13:53:37
Dobra, dopisałem. Przez dokumentacje parę rzeczy musze od nowa zrobić (bo tak jakby znikły) , ale tam... nie dużo. Polskich znaków niestety wciąż nie ma.

Tylko wciąż wszystko jest zbite i porozrzucane (podstrony), i jeszcze na dodatek sonda wjechała na góre!
ohmy.gif

W IE wszystko gra....
krzysztof_kf
28.03.2010, 14:05:31
po co masz puste divy ? typu
Kod
<div id="sonda56676">
deadmen4
28.03.2010, 14:09:49
Tego ta sonda wymagała... :/
krzysztof_kf
28.03.2010, 14:12:05
dodaj jakis selektor

Kod
#sonda {
float: left;
}

<div id="sonda">
// umesc w miejscu przed <div id="sonda56676">
neo1986kk
28.03.2010, 14:23:09
napewno pomoże Ci Firebug dla FF
deadmen4
28.03.2010, 15:26:25
OK. Z sondą jest all ok.

Reszta wciąż beznadzieja... :[
Da się coś wogóle zrobić, jest szansa?
krzysztof_kf
29.03.2010, 00:13:28
z czym masz jeszcze problem rozwiń temat smile.gif
mortus
29.03.2010, 08:37:47
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.
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.