Autor Zpráva
yenna
Profil
Ahoj,
mám problém s layoutem připravovaného webu, v Google Chromu, firefoxu i Opere je v pořádku, ale v Internet Exploreru je totálně rozhozený.
Má být na střed, nahoře vpravo je menu.
http://yenna.cz/ilustrace.html
v "body" je vlozeny CSS style jako kometar

Jsem dlouholetý začátečník v kódování a jsem ráda, že ty stránky vůbec drží pohromadě, a nemůžu nikde najít chybu.
Řekla bych, že explorer má někde problém se zobrazením marginu nebo paddingu, ale všechny kombinace, co jsem zkusila, stránku akorát ještě více rozhodily.
Prosím, nevíte někdo, kde je chyba? Já bych řekla, že v exploreru samotném....

Plus Explorer nezobrazuje hover obrázku v menu, který se načítá v css, ale to už je asi detail...
Bubák
Profil
yenna:
kde je chyba? Já bych řekla, že v exploreru samotném....
Spíše jde o vlastnosti, než o chyby. Je to dáno historicky a popsané chování je zachováno kvůli zpětné kompatibilitě.

Pochopitelně nemusíš kompatibilní (quirk) využívat a nechat stránky zobrazovat ve standardním režimu.
http://www.jakpsatweb.cz/css/mody-prohlizecu.html
Zkus použít jeden z následujících doctype (možností je více, ale to jsu mé oblíbené):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML>

Já bych ti doporučil <!DOCTYPE HTML>, který je pro HTML5, a to z toho důvodu, že dáváš do odkazů blokové elementy, což dovoluje až HTML5. Pokud nehledíš na validitu, je úplně jedno, který doctype pro standardní režim použiješ.
yenna
Profil
Bubák:
díky za odpověď
<!DOCTYPE HTML> i ten první delší jsem zkusila použít, ale tím se pak stránka rozjela úplně... i v ostatních prohlížečích....
to mám tedy celou stránku podle <!DOCTYPE HTML> poskládat znova, aby to sedělo? asi přepsat margin a padding? páč se to rozjelo v těch pozicích
přemýšlím, odkud jsem vzala ten původní doctype, jestli jsem celé ty stránky nepostavila blbě už od začátku....
na validitu nehledím, hlavně aby to fungovalo
Bubák
Profil
yenna:
poskládat znova, aby to sedělo? asi přepsat margin a padding?
Já bych to tak udělal, ale i tak nemůžu zaručit, že to v IE bude vypadat stejně, ale sjednotí se toho hodně a už by nemělo být tak těžké doladit zbytek.

Teď koukám pořádně na tvé CSS, protože mi bylo divné, proč se ti stránky zozjela v ne-IE prohlížečích po změně doctype. Hlavní důvod, proč se ti to rozjelo v jiných prohlížečích je to, že máš hodnoty bez jednotek px. Ve quirku takové číslo všechny prohlížeče berou jako pixely, ve standardním režimu prohlížeče takovou deklaraci ignorují. Takže bys měla začít tím, že v CSS doplníš k číslům px. Akorát u nulové hodnoty není nutné jednotky uvádět.

přemýšlím, odkud jsem vzala ten původní doctype
Podle pátého řádku kódu je zřejmé, že používáš PSPad (já taky), a ten má doctype, který jsi použila ve výchozí HTML šabloně.

jestli jsem celé ty stránky nepostavila blbě už od začátku....
Nebylo (není) to špatně, každý doctype má své opodstatnění. V současné době, kdy vymizely IE5 a IE5.5 si myslím, že nejvhodnější doctype je ten, který přepne prohlížeče do standardního režimu. Nemusíš pakřešit problém s box modelem (rozměry + border +padding), s centrováním stránky, a s výjimkou IE6 taky s hoverem na jiných elementech, než je odkaz.
yenna
Profil
Bubák:
Hlavní důvod, proč se ti to rozjelo v jiných prohlížečích je to, že máš hodnoty bez jednotek px.
ok, přepíšu, používam ten našeptávač Ps Padu a on za čísly jednotky nepíše, myslela, jsem potom, že to nevadí. Díky moc za upozornění :)

přemýšlím, odkud jsem vzala ten původní doctype
jo je to vlastně z PSPadu V původních stránkách jsem měla vše v .php souborech a doctype Xhtml Transitional, ale ten taky nekdy zlobil a v php jsem nakonec pouzila jenom include. Myslela jsem, že nejjednodužší tedy defaultní verze bude bezpečnější, proto ten ps pad.

takže tedy bych měla použít pouze <!DOCTYPE HTML>, připsat jednotky px, a mohlo by to být potom v pořádku? ... nebo spíš úplně nerozjeté? :)

Explorer jako jediný nezobrazuje hover u menu, který tvoří background obrázek v css (v divu). Nevím, jestli nemám vytvořit nějakou jinou verzi pro Explorer, to bych asi musela použít nějakou podmínku?
Kdybych udělala zaoblené rohy obdélníku, tak to zas funguje jen v mozile a hlavně se to aplikuje na všechny hrany, což nechci. Proto ten obrázek...

Jinak díky moc za radu :)
Anonymní
Profil *
yenna:
takže tedy bych měla použít pouze <!DOCTYPE HTML>, připsat jednotky px, a mohlo by to být potom v pořádku? ... nebo spíš úplně nerozjeté? :)
Vyzkoušej. Ale doporučuji udělat si zálohu stávajícího stavu. Ostatně, mít zálohu se může vyplatit vždy.

Explorer jako jediný nezobrazuje hover u menu, který tvoří background obrázek v css (v divu). Nevím, jestli nemám vytvořit nějakou jinou verzi pro Explorer, to bych asi musela použít nějakou podmínku?
Pokud změníš doctype na takový, který v IE "způsobí" standardní režim, hover v IE bude fungovat, pochopitelně pokud pokud tam nemáš nějakou chybu. Výjimkou bude IE6 a starší, téměř nepoužívané IE5 a IE5, tam hover nepůjde ani pak. Jde to zprovoznit pomocí iehiver.htc nebo jiného, funkčně podobného *.htc souboru, nebo, lépe přepsat CSS a možná i HTML tak, aby hover byl na odkaze, což je práce na minutu až hodinu, podle toho, kdo má kolik zkušeností.

Jako obrázek jsi použila průsvitný PNG, který IE6 (a starší) neumí. Jde to zprovoznit i pro IE6, ale já bych se s tím "nemazlil" a pro IE6 bych použil zjednodušenou verzi obrázků ve formátu PNG nebo GIF, ale s průhledností (indexované barvy, a zvolíš, která barva bude 100% průhledná).

Oblé rohy umí všechny současné prohlížeče, včetně IE9. Mozilla byl první prohlížeč, který přišel z podporou oblých rohů, pak to byly postupně, bez nároků na bezchybnost postupně Chrome, Opera, IE. Ukázka třebas na www.volny.cz/radekhrabuvka/ - malá fotka vlevo nahoře.
Jde mít každý roh zaoblený jinak, aktuální dokumentaci se mi teď nechce hledat. Protože starší prohlížeče oblé rohy neumí, je nejspolehlivější obrázek. Druhá možnost je oblé rohy ve starších prohlížečích oželet.
yenna
Profil
Anonymní:
jo zálohu jsem si udělala, tak teď zkouším
po přepsání na <!DOCTYPE HTML> už stránka drží pohromadě a funguje i ten hover...
akorát to asi radši nedám poloprůhledné, ale ať je tam stoprocentní barva, stejně to ani ve výsledku není moc vidět
a těm htc souborům atd nerozumím, tak to radši nebudu komplikovat :)
díky

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

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

0