Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][PHP]Problem z firefoxem
Forum PHP.pl > Forum > Przedszkole
xyxy
9.06.2010, 17:01:46
Witam,

mam taki problem, że w firefoxie źle wyświetla co którąś iterację w pętli while. W operze, IE i chrome wszytko działa, gubi się tylko firefox.
W poniższym przykładzie to trochę uprościłem, żeby było widać sam problem. Po odpaleniu widać, że firefox pomieszał coś w 13 iteracji (widoczne na screenach na samym dole).

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html>
  5. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; CHARSET=utf-8" />
  7. 	<title>lista</title>
  8. </head>
  9. <body>
  10. <?
  11. $licznik=0;
  12. while($licznik < 25)
  13. {
  14. ?>
  15. <a href="#" style="display: block; width: 400px; height: 20px; margin:3px; padding: 3px; background-color: #ffcc66;">
  16. <div style="width:200px; float:left;">ssssss</div>
  17. <div style="" >wwwwww</div>
  18. </a>
  19. <?
  20. ++$licznik;
  21. }
  22. ?>
  23. </body>
  24. </html>
[HTML] pobierz, plaintext



Tak wygląda w operze, chrome oraz w IE:




A tak to wygląda w firefoxie:
tehaha
9.06.2010, 17:45:54
a czy mógłbyś pokazać cały wygenerowany kod? bo samo zdjęcie to nic nie daje, poza tym bardziej by się tu nadawała pętla 
[PHP] pobierz, plaintext 
  1. for($i=0;$i<25;++$i)
  2. {
  3.  
  4. }
[PHP] pobierz, plaintext


//Pokaż więcej kodu php bo wywołałem u siebie tą pętle i nic takiego się nie dzieje więc za pewne gdzie indziej leży źródło problemu
xyxy
9.06.2010, 21:56:38
a faktycznie nic sie nie dzieje, ale to chyba wina rozszerzenia, pomyliłem BBCode na forum, jak sie zmieni rozszerzenie z html na php to widać ten efekt

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html 
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html>
  5. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; CHARSET=utf-8" />
  7. 	<title>lista</title>
  8. </head>
  9. <body>
  10. <?
  11. $licznik=0;
  12. while($licznik < 25)
  13. {
  14. ?>
  15. <a href="#" style="display: block; width: 400px; height: 20px; margin:3px; padding: 3px; background-color: #ffcc66;">
  16. <div style="width:200px; float:left;">ssssss</div>
  17. <div style="" >wwwwww</div>
  18. </a>
  19. <?
  20. ++$licznik;
  21. }
  22. ?>
  23. </body>
  24. </html>
  25.  
  26.  
  27.  
[PHP] pobierz, plaintext





Natomiast jeśli chodzi więcej kodu, to w całości to wygląda tak:
[PHP] pobierz, plaintext 
  1. <?php ob_start();
  2. session_start(); ?>
  3. <!DOCTYPE html 
  4. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  5. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html>
  7. <head>
  8. 	<meta http-equiv="Content-Type" content="text/html; CHARSET=utf-8" />
  9. 	<link rel="stylesheet" href="style.css" type="text/css" />
  10. 	<meta name="Author" content="autor strony" />
  11.  
  12. 	<title>Klienci</title>
  13. </head>
  14. <body>
  15. <? include("baza.php");
  16. if ( isset( $_SESSION['user'] )) { ?>
  17. <form action="serwisy.php" method="post" target="_self">
  18. <br />sortuj według
  19.     <select name="sortowanie1">
  20. 		<option value="tytul" <? print (strcmp($_POST['sortowanie1'], 'tytul')?'':' SELECTED'); ?> >tytuł</option>
  21. 		<option value="opis" <? print (strcmp($_POST['sortowanie1'], 'opis')?'':' SELECTED'); ?> >opis</option>
  22. 		<option value="firma" <? print (strcmp($_POST['sortowanie1'], 'firma')?'':' SELECTED'); ?> >firma</option>
  23. 		<option value="miasto" <? print (strcmp($_POST['sortowanie1'], 'miasto')?'':' SELECTED'); ?> >miasto</option>
  24. 		<option value="ulica" <? print (strcmp($_POST['sortowanie1'], 'ulica')?'':' SELECTED'); ?> >ulica</option>
  25. 	</select>
  26.  
  27. 	<select name="sortowanie2">
  28. 		<option value="ASC" <? print (strcmp($_POST['sortowanie2'], 'ASC')?'':' SELECTED'); ?> >Rosnaco</option>
  29. 		<option value="DESC" <? print (strcmp($_POST['sortowanie2'], 'DESC')?'':' SELECTED'); ?> >Malejaco</option>		
  30. 	</select>
  31.  
  32. <input type="submit" name="button_sortuj" value="sortuj">
  33.  
  34. <?php
  35. 	unset($_SESSION['idklienta']);
  36. 	unset($_SESSION['idserwisu']);
  37. 	$mysql_server = "localhost";
  38.     $mysql_admin = "root";
  39.     $mysql_pass = "krasnal";
  40.     $mysql_db = "projekt";
  41.     @ $db = mysql_connect($mysql_server, $mysql_admin, $mysql_pass) or die ('<br />Brak połączenia z serwerem MySQL.');
  42. 	@mysql_select_db($mysql_db) or die ('<br />Błąd wyboru bazy danych.'); 
  43.  
  44.  
  45. if($_POST['sortowanie1'])
  46. 	{
  47. 		$query = "SELECT * FROM `serwisy`, `klienci` WHERE klienci.id_kl = serwisy.idklienta ORDER BY ".$_POST['sortowanie1']." ".$_POST['sortowanie2']."";
  48. 		$R = mysql_query($query);
  49. 	}
  50. else
  51. 	{
  52. 		$query = "SELECT * FROM `serwisy`, `klienci` WHERE klienci.id_kl = serwisy.idklienta ORDER BY serwisy.id_se ASC";
  53. 		$R = mysql_query($query);
  54. 	}
  55.  
  56. $idserwisu=1;
  57. while ($row = mysql_fetch_array($R, MYSQL_ASSOC))
  58. 	{
  59. 	$linkk = "serwis.php?id=".$row['idklienta']."&idserwisu=".$row['id_se']."";
  60. 	echo '
  61. 	<div class="background">
  62. 	<a href='.$linkk.' class="link1">
  63. 	<span class="idlisty">'.$idserwisu.')</span>
  64. 	<div class="lista">
  65. 			<div class="kol">Problem:</div>
  66. 			<div class="kol1">'.$row['tytul'].'</div>
  67. 			<div class="ttt">';
  68. 				if(!empty($row['firma']))
  69. 				{
  70. 				echo'<div class="kol">Klient:</div>
  71. 				<div class="kol1">'.$row['firma'].'</div>';
  72. 				}
  73. 				else
  74. 				{
  75. 				echo'<div class="kol">Klient:</div>
  76. 				<div class="kol1">'.$row['imie'].' '.$row['nazwisko'].'</div>';
  77. 				}
  78. 				echo'
  79. 				<div class="kol">Status:</div>
  80. 				<div class="kol1">'.$row['status'].'</div>
  81. 				</div>
  82. 			<div class="ttt">
  83. 				<div class="kol">Data dodania:</div>
  84. 				<div class="kol1">'.$row['data_ds'].'</div>
  85. 				<div class="kol">Termin realizacji:</div>
  86. 				<div class="kol1">'.$row['data_ws'].'</div>';
  87. 				echo '</div></div></a></div>';
  88. 		++$idserwisu; 
  89. 	}
  90. }
  91. else
  92. 	echo'zaloguj się!';
  93.  
  94.  
  95. mysql_close($db);
  96. ?> 
  97.  
  98. </form>
  99. </body>
  100. </html>
  101.  
  102.  
  103.  
[PHP] pobierz, plaintext


i część pliku CSS:

Kod
body {
    background-color: #ffffcc;
    font: 12px Verdana;
}
.ttt {
    display: inline;
    float:left;
    padding: 0;
    margin:0;
    width: 350px;
    overflow: hidden;
}

.link1 {
    font: bold 10px/20px Verdana;
    border: 2px solid #eee;
    width: 800px;
    height: 100px;
    background-color:#ffcc66;
    margin: 4px;
    display: block;
    color: #2F4F4F;    
}
a.link1 {
    text-decoration: none;
}

a.link1:hover {
    background-color: #ffcc33;
    color: #333;
}

.kol1 {
    width: 250px;
    margin:0;
    cursor: pointer;
    overflow: hidden;
}

.kol {
    float: left;
    color: red;
    width: 100px;
    padding: 0;
    margin:0;
    cursor: pointer;
    overflow: hidden;
}

.lista {

    font: bold 10px/20px Verdana;
    padding: 20px 0 0 20px;
    margin:0;
    float: left;
}

.idlisty {
    padding: 5px 0 0 10px;
    float: left;

}

.background {
    background-color:#ff9900;
    width: 812px;
}




No i Firefox miesza mi (rozsypuje) te linki <a href='.$linkk.' class="link1"> nie wiem dlaczego i tylko firefox, reszta przeglądarek działa

screen:


tak to wygląda w efekcie końcowym i sypie się tutaj akurat na czwartej pozycji
tehaha
9.06.2010, 22:24:29
ale pokaż wygenerowany kod, czyli odpal sobie tą stronę daj "pokaż źródło strony" i wklej tutaj, bo to niemożliwe żeby firefox sam z siebie coś mieszał wina musi leżeć w kodzie
xyxy
9.06.2010, 22:33:43
Kod
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; CHARSET=utf-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <meta name="Author" content="autor strony" />
    
    <title>Klienci</title>
</head>
<body>
<meta http-equiv="Content-Type" content="text/html; CHARSET=utf-8" />
<form action="serwisy.php" method="post" target="_self">
<br />sortuj według
    <select name="sortowanie1">

        <option value="tytul"  >tytuł</option>
        <option value="opis"  >opis</option>
        <option value="firma"  >firma</option>
        <option value="miasto"  >miasto</option>
        <option value="ulica"  >ulica</option>
    </select>

    
    <select name="sortowanie2">
        <option value="ASC"  >Rosnaco</option>
        <option value="DESC"  >Malejaco</option>        
    </select>
    
<input type="submit" name="button_sortuj" value="sortuj">


    <div class="background">
    <a href=serwis.php?id=332&idserwisu=4 class="link1">

    <span class="idlisty">1)</span>
    <div class="lista">
            <div class="kol">Problem:</div>
            <div class="kol1">aa</div>
            <div class="ttt"><div class="kol">Klient:</div>
                <div class="kol1">INDUKTOR</div>

                <div class="kol">Status:</div>
                <div class="kol1">dozrobienia</div>
                </div>
            <div class="ttt">
                <div class="kol">Data dodania:</div>
                <div class="kol1">0000-00-00</div>
                <div class="kol">Termin realizacji:</div>

                <div class="kol1">0000-00-00</div></div></div></a></div>
    <div class="background">
    <a href=serwis.php?id=332&idserwisu=5 class="link1">
    <span class="idlisty">2)</span>
    <div class="lista">
            <div class="kol">Problem:</div>
            <div class="kol1">zzz</div>

            <div class="ttt"><div class="kol">Klient:</div>
                <div class="kol1">INDUKTOR</div>
                <div class="kol">Status:</div>
                <div class="kol1">dozrobienia</div>
                </div>
            <div class="ttt">
                <div class="kol">Data dodania:</div>

                <div class="kol1">0000-00-00</div>
                <div class="kol">Termin realizacji:</div>
                <div class="kol1">0000-00-00</div></div></div></a></div>
    <div class="background">
    <a href=serwis.php?id=332&idserwisu=6 class="link1">
    <span class="idlisty">3)</span>
    <div class="lista">

            <div class="kol">Problem:</div>
            <div class="kol1">ccc</div>
            <div class="ttt"><div class="kol">Klient:</div>
                <div class="kol1">INDUKTOR</div>
                <div class="kol">Status:</div>
                <div class="kol1">dozrobienia</div>

                </div>
            <div class="ttt">
                <div class="kol">Data dodania:</div>
                <div class="kol1">0000-00-00</div>
                <div class="kol">Termin realizacji:</div>
                <div class="kol1">0000-00-00</div></div></div></a></div>
    <div class="background">

    <a href=serwis.php?id=333&idserwisu=9 class="link1">
    <span class="idlisty">4)</span>
    <div class="lista">
            <div class="kol">Problem:</div>
            <div class="kol1">ssss</div>
            <div class="ttt"><div class="kol">Klient:</div>
                <div class="kol1">gjfkgfk</div>

                <div class="kol">Status:</div>
                <div class="kol1">dozrobienia</div>
                </div>
            <div class="ttt">
                <div class="kol">Data dodania:</div>
                <div class="kol1">0000-00-00</div>
                <div class="kol">Termin realizacji:</div>

                <div class="kol1">0000-00-00</div></div></div></a></div>
    <div class="background">
    <a href=serwis.php?id=332&idserwisu=10 class="link1">
    <span class="idlisty">5)</span>
    <div class="lista">
            <div class="kol">Problem:</div>
            <div class="kol1">ssssss</div>

            <div class="ttt"><div class="kol">Klient:</div>
                <div class="kol1">INDUKTOR</div>
                <div class="kol">Status:</div>
                <div class="kol1">dozrobienia</div>
                </div>
            <div class="ttt">
                <div class="kol">Data dodania:</div>

                <div class="kol1">0000-00-00</div>
                <div class="kol">Termin realizacji:</div>
                <div class="kol1">0000-00-00</div></div></div></a></div>
    <div class="background">
    <a href=serwis.php?id=332&idserwisu=11 class="link1">
    <span class="idlisty">6)</span>
    <div class="lista">

            <div class="kol">Problem:</div>
            <div class="kol1">sacac</div>
            <div class="ttt"><div class="kol">Klient:</div>
                <div class="kol1">INDUKTOR</div>
                <div class="kol">Status:</div>
                <div class="kol1">dozrobienia</div>

                </div>
            <div class="ttt">
                <div class="kol">Data dodania:</div>
                <div class="kol1">0000-00-00</div>
                <div class="kol">Termin realizacji:</div>
                <div class="kol1">0000-00-00</div></div></div></a></div>
    <div class="background">

    <a href=serwis.php?id=332&idserwisu=16 class="link1">
    <span class="idlisty">7)</span>
    <div class="lista">
            <div class="kol">Problem:</div>
            <div class="kol1">ddd</div>
            <div class="ttt"><div class="kol">Klient:</div>
                <div class="kol1">INDUKTOR</div>

                <div class="kol">Status:</div>
                <div class="kol1">czeka na realizacj�</div>
                </div>
            <div class="ttt">
                <div class="kol">Data dodania:</div>
                <div class="kol1">2009-06-08</div>

                <div class="kol">Termin realizacji:</div>
                <div class="kol1">0000-00-00</div></div></div></a></div>
    <div class="background">
    <a href=serwis.php?id=332&idserwisu=17 class="link1">
    <span class="idlisty">8)</span>
    <div class="lista">
            <div class="kol">Problem:</div>

            <div class="kol1">eeww</div>
            <div class="ttt"><div class="kol">Klient:</div>
                <div class="kol1">INDUKTOR</div>
                <div class="kol">Status:</div>
                <div class="kol1">czeka na realizacj�</div>
                </div>

            <div class="ttt">
                <div class="kol">Data dodania:</div>
                <div class="kol1">2009-06-09</div>
                <div class="kol">Termin realizacji:</div>
                <div class="kol1">2009-01-01</div></div></div></a></div>

</form>
</body>
</html>
tehaha
9.06.2010, 23:13:20
rzeczywiście ten układ się rozsypuje i to nie tylko na firefoxie, generalnie ciężko powiedzieć co za to odpowiada dopóki validator w3c wywala błędy, ogólnie nie powinno się umieszczać elementów blokowych - <div>, wewnątrz elementów liniowych - <a>, wydaje mi się, że to może być przyczyną, może zamiast elementów <a> spróbuj użyć div z onclick="document.location='strona.html'", dodatkowo jeszcze ścieżka przy href=ścieżka powinna być objęta apostrofem lub cudzysłowem
xyxy
10.06.2010, 11:43:53
ok, zamieniłem <a> na <div> i prawie działa, teraz nic się nie rozsypuje (był mały problem z lewym marginesem, bo w pętli się sumował jakimś cudem i robiły się "schody" z divów, ale jakoś sobie poradziłem). Nie wiem teraz jak sobie poradzić z podświetlaniem poszczególnych divów, wcześniej miałem tak:

Kod
.link1 {
    font: bold 10px/20px Verdana;
    width: 800px;
    height: 100px;
    background-color:#ffcc66;
    margin-top: 4px;
    display: block;
    padding: 0px;
    color: #2F4F4F;    
}
a.link1:hover {
    background-color: #ffcc33;
    color: #333;
}


i działało. Teraz zmieniłem a.link1:hover na div.link1:hover i podświetlanie nie działa tak jakbym tego chciał, podświetlają się wszystkie divy od góry do pozycji kursora, a powinno podświetlać tylko tego diva na którym jest kursor.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html>
  5. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; CHARSET=utf-8" />
  7. 	<title>lista</title>
  8. 		<link rel="stylesheet" href="style.css" type="text/css" />
  9. </head>
  10. <body>
  11.  
  12. <div onclick="document.location='strona.html'" class="link1">
  13. <div>ssssss</div>
  14. <div>wwwwww</div>
  15.  
  16. <div>
  17.  
  18.  
  19. <div onclick="document.location='strona.html'" class="link1">
  20. <div>ssssss</div>
  21. <div>wwwwww</div>
  22. <div>
  23.  
  24.  
  25. <div onclick="document.location='strona.html'" class="link1">
  26. <div>ssssss</div>
  27. <div>wwwwww</div>
  28. <div>
  29.  
  30.  
  31. <div onclick="document.location='strona.html'" class="link1">
  32. <div>ssssss</div>
  33. <div>wwwwww</div>
  34. <div>
  35.  
  36.  
  37. <div onclick="document.location='strona.html'" class="link1">
  38. <div>ssssss</div>
  39. <div>wwwwww</div>
  40. <div>
  41.  
  42. <div onclick="document.location='strona.html'" class="link1">
  43. <div>ssssss</div>
  44. <div>wwwwww</div>
  45. <div>
  46.  
  47.  
  48. <div onclick="document.location='strona.html'" class="link1">
  49. <div>ssssss</div>
  50. <div>wwwwww</div>
  51. <div>
  52.  
  53.  
  54. <div onclick="document.location='strona.html'" class="link1">
  55. <div>ssssss</div>
  56. <div>wwwwww</div>
  57. <div>
  58.  
  59.  
  60. <div onclick="document.location='strona.html'" class="link1">
  61. <div>ssssss</div>
  62. <div>wwwwww</div>
  63. <div>
  64.  
  65.  
  66. <div onclick="document.location='strona.html'" class="link1">
  67.  
  68. <div>ssssss</div>
  69. <div>wwwwww</div>
  70. <div>
  71.  
  72.  
  73. <div onclick="document.location='strona.html'" class="link1">
  74. <div>ssssss</div>
  75. <div>wwwwww</div>
  76. <div>
  77.  
  78.  
  79. <div onclick="document.location='strona.html'" class="link1">
  80. <div>ssssss</div>
  81.  
  82. <div>wwwwww</div>
  83. <div>
  84.  
  85.  
  86. <div onclick="document.location='strona.html'" class="link1">
  87. <div>ssssss</div>
  88. <div>wwwwww</div>
  89. <div>
  90.  
  91.  
  92. <div onclick="document.location='strona.html'" class="link1">
  93. <div>ssssss</div>
  94. <div>wwwwww</div>
  95.  
  96. <div>
  97.  
  98.  
  99. <div onclick="document.location='strona.html'" class="link1">
  100. <div>ssssss</div>
  101. <div>wwwwww</div>
  102. <div>
  103.  
  104.  
  105. <div onclick="document.location='strona.html'" class="link1">
  106. <div>ssssss</div>
  107. <div>wwwwww</div>
  108. <div>
  109.  
  110.  
  111. <div onclick="document.location='strona.html'" class="link1">
  112. <div>ssssss</div>
  113. <div>wwwwww</div>
  114. <div>
  115.  
  116.  
  117. <div onclick="document.location='strona.html'" class="link1">
  118. <div>ssssss</div>
  119. <div>wwwwww</div>
  120. <div>
  121.  
  122. <div onclick="document.location='strona.html'" class="link1">
  123. <div>ssssss</div>
  124. <div>wwwwww</div>
  125. <div>
  126.  
  127.  
  128. <div onclick="document.location='strona.html'" class="link1">
  129. <div>ssssss</div>
  130. <div>wwwwww</div>
  131. <div>
  132.  
  133.  
  134. <div onclick="document.location='strona.html'" class="link1">
  135. <div>ssssss</div>
  136. <div>wwwwww</div>
  137. <div>
  138.  
  139.  
  140. <div onclick="document.location='strona.html'" class="link1">
  141. <div>ssssss</div>
  142. <div>wwwwww</div>
  143. <div>
  144.  
  145.  
  146. <div onclick="document.location='strona.html'" class="link1">
  147.  
  148. <div>ssssss</div>
  149. <div>wwwwww</div>
  150. <div>
  151.  
  152.  
  153. <div onclick="document.location='strona.html'" class="link1">
  154. <div>ssssss</div>
  155. <div>wwwwww</div>
  156. <div>
  157.  
  158.  
  159. <div onclick="document.location='strona.html'" class="link1">
  160. <div>ssssss</div>
  161.  
  162. <div>wwwwww</div>
  163. <div>
  164.  
  165. </body>
  166. </html>
[HTML] pobierz, plaintext





Nie znam się na java script, ale próbowałem to zrobić na zdarzeniach, ale tak już w ogóle nie działa
Kod
<div onclick="document.location='strona.html'" onMouseout="this.bgColor='#ffcc66'" onMouseover="this.bgColor='#ffcc33''" style="width:800px; height:150px; background-color: red;">
tehaha
10.06.2010, 12:05:47
wywal to onmouseout i mouseover i daj style:
[HTML] pobierz, plaintext 
  1. 	div.link1 {
  2.     font: bold 10px/20px Verdana;
  3.     width: 800px;
  4.     height: 100px;
  5.     background-color:#ffcc66;
  6.     margin-top: 4px;
  7.     display: block;
  8.     padding: 0px;
  9.     color: #2F4F4F;    
  10. }
  11. div.link1:hover {
  12.     background-color: #ffcc33;
  13.     color: #333;
  14. }
[HTML] pobierz, plaintext


a nie działa Ci dlatego że nie pozamykałeś div'ów - zobacz linijki 16,22, 28 - zamiast </div> dałeś <div> dlatego tak Ci się zlało jak pozamykasz to będzie dobrze
xyxy
10.06.2010, 12:10:05
o faktycznie, teraz wszystko działa, dzięki wielkie
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.