Autor Zpráva
Suta
Profil
#1 · Zasláno: 17. 3. 2008, 00:26:21 · Upravil/a: Suta
Odpovědět Citovat
AKTUALIZACE 17. 3. - 16:50 - NÍŽE UVEDENÉ ODKAZY JIŽ NEJSOU AKTUÁLNÍ A NEODPOVÍDAJÍ CHOVÁNÍ PŘI PSANÍ PŘÍSPĚVKU

Přátelé, jsem na dně... po ztraceném dlouhém večeru a "půl" noci při hledání příčiny podivného chování firefoxu jsem si dal tu práci a podrobně rozkreslil svůj problém (viz odkaz níže). Na přečtení a vyzkoušení problému vám bude stačit 5-10 minut.

O co se jedná? Myslím, že místo dlouhých slov bude lepší ukázat problém zcela konkrétně, zde je jeden z možných postupů.

1. Otevřete tento odkaz zobrazující ukázku minislovníku v prohlížeči firefox !!!.

2. Přepněte 10x - 20x mezi záložkami "Databáze" a "Vlastní", zkombinujte to s refreshem stylů CTRL + F5 či přepínáním v rámečku "Č - N" a pozorujte různé zobrazování červených a modrých rámečků v sekci Databáze (někdy je skutečně třeba přepínat a refreshovat 30 vteřin, než se problém objeví..., tak vydržte - tedy pokud to nedělá pouze v mé verzi firefoxu - Mozilla/5.0, Firefox/2.0.0.12, či na mém počítači...

3. Pokud se vám tedy zadaří... a nahoře se objeví modrý a/či červený rámeček (či rámečky) navíc, rolujte směrem dolů, určitě uvidíte, že u některého slovíčka onen rámeček (či může jich být i více) chybí (při každém chybném zobrazení většinou jinde...).

4. Otázka zní: proč je tomu tak? Pokaždé se do prohlížeče natáhne naprosto stejný kód, slovíčka z databáze vždy ve stejném pořadí (...)

Pro lepší pochopení oč jde si prohlédněte tento druhý odkaz - popis problému.

Zcela nejkonkrétněji (snad to při třetím čtení pochopíte): v popisu problému (odkaz výše) je kousek kódu (kopie kódu po zobrazení v prohlížeči), kde je jednoznačně vidět zápis 12px rámečku border, ovšem na vyobrazení rámeček chybí.... (resp. nechybí, je vidět smrštěný nahoře bez obsahu, zkrátka jakoby utekl z vnořených prvků). Další zajímavostí pak je např. to, že všechny odkazy <a> v sobě zahrnují dva divy, takže při přejíždění je :hover (background-color oblasti) aplikovaný na oba dva divy (vyzkoušejte v odkaze na minislovník), ovšem u části, kde rámeček z neznámých důvodů chybí (viz obrázek) je při přejíždění rozdělen na dva samostatné (což odporuje zápisu v ukázce konkrétního kódu).

Bohužel jsem hledal, zkoušel, testoval, a na nic nepřišel. Skutečně se jedná pouze o chování v Mozille, IE i Opera mi problém nedělá.
Z databáze v cyklu vypisuji vložená slovíčka, kód je v tomto směru v pořádku. Dle mých úvah bude problém zřejmě v zobrazování blokových prvků, floatů aj., možná mám někde nějakou patlaninu při zanořování jednotlivých elementů do sebe, na nic jsem sice nepřišel, ale možné to je... Spíš tedy nemá-li někdo podobnou zkušenost s tímto problémem a nenasměřuje mne na jeho odstranění...

PS: pokud by měl někdo zájem, klidně mrkněte na výše odkazovaný slovník začleněný přímo do stránek (ve vývoji) - zde se problém vyskytuje naprosto stejně.
Přihlašovací jméno: jmeno
Heslo: heslo
Záložka "Přidání / Vložení slovíčka - dole podzáložka "Databáze"

Všem, kteří si najdou čas na zkouknutí předem díky!
Jan Tvrdík
Profil
#2 · Zasláno: 17. 3. 2008, 07:04:34
Odpovědět Citovat
Suta
Buď se jedná o vykreslovací chybu firefoxu nebo je tam nějakej zakopanej pes :) Zkus tam doplnit <body>... aby to bylo validní, ale jinak mě nic nevypadá. Možná můžeš ještě zkusit poslat dokument jako skutečné XHTML (s korektní mime typem) – to se jinak zpracovává, takže se ta chyba možná neprojeví.

Jinak ten projekt vypadá dobře, až jednou bude fungovat využiju :)
Jan Tvrdík
Profil
#3 · Zasláno: 17. 3. 2008, 07:08:24 · Upravil/a: Jan Tvrdík
Odpovědět Citovat
Takhle vypadá chyba u mě:


Ještě jsem si všiml blokového elementu uvnitř řádkového: 
                    <a class="test_2" href="#">
                    <div style="border: 12px solid blue;">
                      <span class='strong'>klavír</span>                    </div>
                    <div style="border: 12px solid red;">
                      s&nbsp;Klavier                    </div>
                    </a>


DOM ve firefoxu ukazuje na chybnou parsaci:
Špatně:


Dobře:
Suta
Profil
#4 · Zasláno: 17. 3. 2008, 16:49:59
Odpovědět Citovat
Jan Tvrdík
Díky za připomínky, jdu koumat zakopaného psa...

AKTUALIZACE 17. 3. - 16:50 - VÝŠE UVEDENÉ ODKAZY JIŽ NEJSOU AKTUÁLNÍ A NEODPOVÍDAJÍ CHOVÁNÍ PŘI PSANÍ PŘÍSPĚVKU.
Časová prodleva: 6 dní
Suta
Profil
#5 · Zasláno: 23. 3. 2008, 19:43:30 · Upravil/a: Suta
Odpovědět Citovat
Zdravím,

po několika dnech jsem vytáhl pouze to nejnutnější z kódu, a došel jsem k následujícímu. 

<html>
<body>


<style>
.odkaz {
  float: left;
  width: 300px;
  border: 1px solid blue;
}

.div {
  border: 1px solid red;
}

</style>


<?
$a = 1;
while ($a < 100) {
?>
<a class="odkaz" href="index.php">
  <div class="div">Chování ve firefoxu - KLIKEJ...
  </div>
</a>
<?
$a++;
  } ?>



</body>
</html>


Ukázka problému

Rozumíte tomu?
Jan Tvrdík
Profil
#6 · Zasláno: 23. 3. 2008, 20:36:18 · Upravil/a: Jan Tvrdík
Odpovědět Citovat
Přikládám kód na detekci bugu: 
<?php //header("Content-type: application/xhtml+xml; charset=UTF-8"); ?>
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">
	<head>
		<style type="text/css">
		.odkaz {
		  float: left;
		  width: 300px;
		  border: 5px solid blue;
		  display: block;
		}
		
		.div {
		  border: 5px solid red;
		}
		</style>
		
		<script type="text/javascript">
		/*<![CDATA[*/
		function bugDetect()
		{
			var divs = document.getElementsByTagName("div");
			var bug = false;
			for(var i = 0; i < divs.length; i++)
			{
				if(divs[i].parentNode.tagName == "BODY")
				{
					bug = true;
					break;
				}
			}
			
			if(bug)
				alert("Bug!");
			else
				window.location.reload();
		}
		/*]]>*/
		</script>
	</head>
	<body onload="bugDetect();">
<?php
for($i = 0; $i < 100; $i++)
{
	echo "<a class=\"odkaz\" href=\"firefox-bug.php\">\n";
	echo "  <div class=\"div\">Chování ve firefoxu - KLIKEJ...\n";
	echo "  </div>\n";
	echo "</a>\n\n";	
}
?>
	</body>
</html>


Experimenální testy potvrdili, že k chybě dochází pouze u HTML. U (skutečného) XHTML se chyba neprojeví.
Suta
Profil
#7 · Zasláno: 23. 3. 2008, 21:33:10
Odpovědět Citovat
Pokud se tedy skutečně jedná o bug závislý na typu dokumentu, pak jsi mi hodně pomohl.

Jen ještě zřejmě potřebuji trošku popostrčit, výše uvedený kód s nastavením XHTML jsem vyzkoušel, nicméně zdá se, že chyba se vyskytuje stále (viz zde.

PS: ještě jsem musel odmazat tento řádek: 
<?xml version="1.0" encoding="UTF-8"?>
- s ním to mé php nepobralo...
Jan Tvrdík
Profil
#8 · Zasláno: 23. 3. 2008, 21:36:14
Odpovědět Citovat
Suta
Musíš odkomentovat první řádek
<?php header("Content-type: application/xhtml+xml; charset=UTF-8"); ?>

Poslání korektního mime typu se postará o zcela jiný způsob zpracování dokumentu.
Suta
Profil
#9 · Zasláno: 23. 3. 2008, 22:20:45
Odpovědět Citovat
Jan Tvrdík
Super, funguje, díky moc, pomohl jsi mi odstranit něco, nad čím jsem dumal hodiny...

Ještě detail k té hlavičce: je třeba tam mít to "+xml" ?
( <?php header("Content-type: application/xhtml+xml; charset=UTF-8"); ?> )

Zajímavé je, že mi to takto hlásí chyby, o kterých jsem ani nevěděl (neukončené nepárové tagy aj., takže můžu chyby pěkně odstranit), ale alespoň co laicky vím, tak xml je jiný formát dokumentu než používám já (tuším že v xml můžou být jakékoliv vlastní tagy), tak co s tím..
Měsíček
Profil
#10 · Zasláno: 23. 3. 2008, 22:37:43
Odpovědět Citovat
Nechej application/xhtml+xml ;)
Davex
Profil
#11 · Zasláno: 23. 3. 2008, 23:17:45
Odpovědět Citovat
Super, funguje, díky moc
Ještě se podívej, co to udělá v IE ;-)
Měsíček
Profil
#12 · Zasláno: 23. 3. 2008, 23:21:24
Odpovědět Citovat
a také ve vyhledávačích ;-)
Davex
Profil
#13 · Zasláno: 23. 3. 2008, 23:39:23
Odpovědět Citovat
Suta
Problém je způsoben vložením blokového elementu do řádkového. Univerzálním řešením by mělo být nahrazení divu spanem (který se pak klidně může nastylovat jako blokový). Přišel jsem na to už tady.
Suta
Profil
#14 · Zasláno: 24. 3. 2008, 00:54:20 · Upravil/a: Suta
Odpovědět Citovat
Davex
Tak stejně jako ares v odkazované diskuzi mimo toto vlákno, i já jsem tvým dlužníkem...

Pro všechny, problém byl zde: nedávejte nevalidně DIV do odkazů A ve firefoxu, občas si s tím neporadí (přestože ostatní prohlížeče s tím nemají problém). Místo neutrálního tagu DIV, který je blokový použijte SPAN, kterému nastavíme display: block; a vše fachá jak má...

Poznámka: přišel jsem taky na to, že stačí dát za odkaz jeden obalovací span, kterému se nastaví display: block; a vevnitř už můžou být další blokové divy, takto už to divné chování obsahu v odkaze ve firefoxu neovlivní...

Poslední otázka ke konkrétnímu způsobu, který jsem právě popsal.. je to prasárna, nebo běžně používané řešení v situaci, kdy chci odkazem obalit více "divů" ?

Zcela konkrétně se mi jedná o případ, kdy chci mít klikací a při najetí barvu měnící celý řádek, ve kterém mám více bloků. Konkrétní případ, který jsem řešil v celém tomto vlákně (nyní se již tedy zobrazuje správně) je zde: 

<a class="<?echo $styl_barvy;?>" href="#" title="Zobrazit podrobné informace o slovíčku">
    <span style="display: block;">
        <div class="info"></div>
        <div class="cesky"><?echo "$cesky"; ?></div>
        <div class="cizojazycne"><?echo "$cizojazycne"; ?></div>
    </span>
</a>


A tady je odkaz na stránku, kde je použitý tento kód.
Jan Tvrdík
Profil
#15 · Zasláno: 24. 3. 2008, 07:00:10
Odpovědět Citovat
Suta
Zajímavé je, že mi to takto hlásí chyby, o kterých jsem ani nevěděl
To proto, že XML parsace se zastaví na chybě dokumentu (např. neuzavřený tag), kdežto HTML parsace si tag domyslí (např. ukončení buňky </td>

PS: O tom blokovém elementu uvnitř řádkovýho jsem ti psal už na začátku (17. 3. 2008) :P
Suta
Profil
#16 · Zasláno: 24. 3. 2008, 08:21:38
Odpovědět Citovat
Jan Tvrdík
Vím, měl jsem zato, že mám-li odkaz <a> definovaný jako blokový prvek a uvnitř další blokový <div>, neměl by být problém... Imho teď je opět v (blokovém) odkaze <a> tag <span>, ze kterého jsem udělal blokový a problém není, tak nevím...

Samozřejmě díky moc za tvé řešení! Taky mi pomohlo.
Časová prodleva: 16 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0