Autor Zpráva
Miloš
Profil
#1 · Zasláno: 31. 3. 2007, 22:44:40 · Upravil/a: Miloš
Odpovědět Citovat
Stránka: kesolim.sweb.cz/fotky_branik_chyba/
CSS: kesolim.sweb.cz/fotky_branik_chyba/util/styl.css
UPD: přejmenoval jsem adresář, linky jsem opravil.

Popis stránky
— Obsah stránky je uzavřen v <div id="stranka"> o šířce 540px, div má position:relative
— h1 je pozicovaná absolutně kvůli vykreslení spirály na pozadí i přes horné hranu obalujícího divu.
— Náhledy jsou konstruovány takto:
—— Obaluje je <div id="nahledy"> (krom font-size žádné nastavení)
—— Fotka a popisek je vždy v <p>odstavci</p>, tyto odstavce jsou float:left (a pro IE-bug dvojitého marginu display:inline)
—— Fotka má vyrušený rámeček (a img {border: none; text-decoration: none ;})
—— Tyto odstavce mají width:120px (= šířka náhledu), [/i]margin: 20px 5px 0 5px;[/i].
—— První odstavec ze čtyř má vždy margin-left:15px a čtvrtý odstavec naopak margin-right:0.
— Patička (emajl) je v <address> s position: relative; top: 25px; text-align: right; clear: both;

Problém
nastane u Firefoxu 2.0.0.3 – jako odkaz podtrhne i náhledy; podtržení je typu text-decoration, protože když ho zruším (text-decoration:none), obrázky podtržené nejsou.

Řešení
je jednoduché – popisky obalit spanem, odkazům zrušit podtržení, ale nastavit podtržení spanům v odkazech

Otázky na Vaše ctěné hlavy:
1) Proč se tak FF chová?
2) Dalo by se to vyřešit bez zásahu do HTML (bez nesémantických a IMHO zbytečných spanů), tedy jen změnou v CSS?
habendorf
Profil
#2 · Zasláno: 31. 3. 2007, 23:00:44
Odpovědět Citovat
Do a img přidej display:block.

BTW, ty <p> v #nahledy jsou zcela zbytečné.
Alphard
Profil
#3 · Zasláno: 31. 3. 2007, 23:01:34
Odpovědět Citovat
IMHO to vychází z tohoto: (vynechal jsem OnClick a alt + title)
<a href="fotky/venku_zleva_2.jpg"><img src="nahledy/venku_zleva_2_nahled.jpg">Zvenku zleva</a>
a tohoto: a pro IE-bug dvojitého marginu display:inline

nepodtrhává se img, ale a jehož je img součástí jako řádkový element a je tedy také podtržené
Miloš
Profil
#4 · Zasláno: 31. 3. 2007, 23:14:43
Odpovědět Citovat
habendorf
Do a img přidej display:block.
Skvělé, funguje, ď.

BTW, ty <p> v #nahledy jsou zcela zbytečné.
To si ale nemyslím, neboť:
1) fotka s popisem tvoří z hlediska sémantiky celek
2) text je vůči fotce vycentrován

Alphard
Ten inline s tím nemá co dělat – chovalo se to tak i bez něj.

nepodtrhává se img, ale a jehož je img součástí jako řádkový element a je tedy také podtržené
Zajímavá myšlenka. Věděl by ale někdo, jestli je to tak správně? A tedy kdo chybuje – IE+Opera, nebo FF?

Mohl by mi někdo říct, jak se to chová v IE7, Konqueroru a v Safari?
habendorf
Profil
#5 · Zasláno: 31. 3. 2007, 23:24:16
Odpovědět Citovat
1) fotka s popisem tvoří z hlediska sémantiky celek

Ano, ale odkaz, nikoliv odstavec.

2) text je vůči fotce vycentrován

Irelevantní. Text-align můžeš dát odstavci stejně jako linku.
Miloš
Profil
#6 · Zasláno: 31. 3. 2007, 23:30:11
Odpovědět Citovat
habendorf
1) Může být
2) Pravda pravdoucí, že mě to hned neťuklo; asi tou pozdní hydinou.
Alphard
Profil
#7 · Zasláno: 31. 3. 2007, 23:33:20 · Upravil/a: Alphard
Odpovědět Citovat
Miloš
nepodtrhává se img, ale a jehož je img součástí jako řádkový element a je tedy také podtržené
teď jsem zkoušel jednoduchou stránku s těmito výsledky:
Zde bude obázek podtržen: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

  <meta name="generator" content="PSPad editor">

  <meta name="author" content="Alphard">

  <title></title>

  </head>

  <body>

  <p><a href="#" style="text-decoration: underline"><img src="obr.jpeg" style="border: none">Ahoj</a></p>

  </body>

</html>


ale zde už ne: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

  <meta name="generator" content="PSPad editor">

  <meta name="author" content="Alphard">

  <title></title>

  </head>

  <body>

  <p><a href="#" style="text-decoration: underline"><img src="obr.jpeg" style="border: none">Ahoj</a></p>

  </body>

</html>


jde tedy o Strict a Transitional
Alphard
Profil
#8 · Zasláno: 31. 3. 2007, 23:39:28
Odpovědět Citovat
teď dívám, že ty máš Transitional, takže jsem na prášky :-)
s tím display jsem myslel to, co habendorf, ale několikanásobnou editací a kopírováním z toho vylezlo cosi zmateného :-)
Miloš
Profil
#9 · Zasláno: 31. 3. 2007, 23:46:22
Odpovědět Citovat
Je ale zajímavé, že přestože jak strict s URL, tak transitional s URL by měly mít za následek standardní režim(*), Opera a FF trochu hýbou u náhledů s výškou řádku či něčím takovým.

--------------
(*) transitional ve skutečnosti FF přepne do téměř standardu (a jak to tak vypadá, tak i Operu, byť jsem o tom nikde nic nečetl), ale to by se mělo týkat pouze obrázků v tabulkách, což není tento případ (leda by si FF vytvářel v plovoucích řádkových blocích anonymní blokové prvky s display:table-cell).
Alphard
Profil
#10 · Zasláno: 1. 4. 2007, 00:03:39 · Upravil/a: Alphard
Odpovědět Citovat
ještě doplním, vše ve Firefoxu 2.0.0.3 kód jsem uváděl před chvílí

Strict:
[img]http://muj.edisk.cz/soubor/stahni/62857/scrict.jpg_62.38kB.html[/ img]

Transitional:
[img]http://muj.edisk.cz/soubor/stahni/81568/transitional.jpg_60.14kB. html[/img]
Miloš
Profil
#11 · Zasláno: 1. 4. 2007, 00:10:07
Odpovědět Citovat
Alphard
Mně ten transitional FF podtrhne proto, že je u DTD URL, neboli (almost)Standard.
Tobě nepodtrhne, poněvadž transitional bez URL = quirk.
Alphard
Profil
#12 · Zasláno: 1. 4. 2007, 00:12:29
Odpovědět Citovat
http://forum.czilla.cz/viewtopic.php?t=17818
Alphard
Profil
#13 · Zasláno: 1. 4. 2007, 00:16:23
Odpovědět Citovat
Miloš
Mně ten transitional FF podtrhne proto, že je u DTD URL, neboli (almost)Standard.
Tobě nepodtrhne, poněvadž transitional bez URL = quirk.

začínám se ztrácet :-) já se orientuji spíše v serverových scriptech
na začátku, asi před hodinou :-) , jsem dostal jakýsi nápad a myslel, že by se mohl hodit a již se dostáváme někam jinam
Miloš
Profil
#14 · Zasláno: 1. 4. 2007, 00:25:42
Odpovědět Citovat
Alphard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
je transitional bez URL, FF se přepne do vykreslovacího režimu zpětné kompatibility (neboli do quirku)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
je transitional s uvedenou URL, což má ten důsledek, že FF bude stránky vykreslovat ve standardním modu.
(Přesněji řečeno v „převážně standardním“ – viz výše uvedený odkaz)

Stejně tak bude ve standardu, když použiju strict bez URL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Stejně tak bude ve standardu, když použiju strict s URL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Více na wellstyled.
Jasné?
Alphard
Profil
#15 · Zasláno: 1. 4. 2007, 00:31:22
Odpovědět Citovat
Jasné?
zcela, díky
btw: žádáš o radu a pak vysvětluješ odpovídajícím, jaká ironie :-)
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0