Autor Zpráva
Bubák
Profil
IE nastaví odstavci implicitní dolní margin na nulu, pokud nemá nepovinnou koncovou značku. Naštěstí toto chování jde změnit pomocí CSS, logicky nastavením dolního marginu.

<style>
p {margin-top: 0; }
</style>
<p>Lorem ipsum dolor sit amet.</p>
<p>Consectetuer eget accumsan In Duis sem.</p>
<p>Ligula ante convallis laoreet interdum.</p>
<hr>
<p>Neque dolor ac Duis.
<p>A tristique sed Nullam Ut.
<p>Ac eros orci.
<hr>

Stránka s výše uvedeným kódem

Chybně stránku zobrazí jen IE, DTD na to nemá vliv. Oostatní prohlížeče stránku zobrazí podle očekávání.
Setkal se už s tím někdo? Píše se o tom někde?

Prosím, nepištem jak mám psát HTML a CSS, že jde o uměle vytvořený problém... Téma je různý implicitní dolní margin v IE u odstavce s koncovou značkou a bez koncové značky a vše, co s tím souvisí.
habendorf
Profil
p {margin-bottom:0;}
Dero
Profil
Bubák: Setkal, a je to jeden z mnoha důvodů, proč začínám každý stylopis zápisem * { margin: 0; padding: 0; }
Bubák
Profil
habendorf
p {margin-bottom:0;}

Díky, ale tohle jsem neměl na mysli, CSS naštěstí normálne funguje, p {margin-top: 0; } jsem dal proto, abych to zviditelnil. Pokud dám jakkýkoliv dolní margin, tak se odstavce s koncovou značkou, i bez ní, v IE zobrazí úplně stejně.

Ještě upřesním, nezajíma mě řešení, to je jednoduché, ale "brouk".
Bubák
Profil
Dero
Taky díky, než jsem napsal habendorfovi, tak jsi mě "předběhl".
Dá se někde zjistit něco víc, než že tahle chyba existuje?
Plaváček
Profil
Bubák

Ale to není brouk ani chyba, je to logické chování, protože v CSS existuje věc, která se jmenuje slučování okrajů, více zde: http://www.webtip.cz/art/wt_tech_html/wt_cssserial_007.html odstavec Vlastnosti popisující okraj boxu. Počítám, že odpověď na to, proč se každý prohlížeč chová trošku jinak, tam najdeš.
Chamurappi
Profil
Reaguji na Bubáka:
Zajímavé. Rozhodně je to chyba. Dost zvláštní.

Reaguji na Plaváčka:
Chyba se projevuje i tehdy, je-li odstavec jen jeden a jeho soused margin nemá. Souvislost se slučováním marginů se mi tudíž zdá nesmyslná. Rozlišuje-li prohlížeč mezi implikovanou a explicitně rozepsanou ukončovací značkou, má to do logického chování dost daleko.
Plaváček
Profil
Chamurappi

Rozlišuje-li prohlížeč mezi implikovanou a explicitně rozepsanou ukončovací značkou..

Nerozlišuje. Prostě jenom každý prohlížeš má jinak nastavenou výchozí tabulku stylů. Nezkoumal jsem to úplně podrobně, protože uměle vyrobené chyby mě netrápí. Nejspíš bych juknul, jak ve výchozím nastavení formátuje HR (které je v ukázkovém kódu použito) FF a IE. Mimochodem, i to může být jeden z důvodů, proč raději psát koncové tagy. Nic tím nezkazíte a nebudete mít problémy.
Chamurappi
Profil
Reaguji na Plaváčka:
Nerozlišuje.
V tomto případě rozlišuje. V tom spočívá ten brouk. Slučování marginů je úplně mimo hru, právě kvůli němu Bubák nuluje horní marginy, takže zůstávají jen dolní.

Prostě jenom každý prohlížeš má jinak nastavenou výchozí tabulku stylů.
Ano. A Explorer má při neuvedené ukončovací značce margin-bottom nulový, kdežto při uvedené ho má normální.

Nejspíš bych juknul, jak ve výchozím nastavení formátuje HR (které je v ukázkovém kódu použito) FF a IE
Jak jsem již naznačoval: problém se projevuje i mezi odstavci, <hr> se může klidně vyhodit.

Mimochodem, i to může být jeden z důvodů, proč raději psát koncové tagy
Byl by to důvod, kdybychom mohli užít margin-top a nemohli užít margin-bottom. To se mi doposud nestalo.

Nic tím nezkazíte a nebudete mít problémy.
Ani si tím nijak nepomůžeme a žádných problémů se nezbavíme. Sám přeci říkáš, že je to uměle vyrobená chyba.
Bubák
Profil
Jak píše Dero
je to jeden z mnoha důvodů, proč začínám každý stylopis zápisem * { margin: 0; padding: 0; }
Ty důvody by možná zasloužily samostatné téma, myslím, že bude zajímavější, než "Jak zakázat...."

„Nejspíš bych juknul, jak ve výchozím nastavení formátuje HR (které je v ukázkovém kódu použito) FF a IE“
Rád bych juknul, jak ve výchozím nastavení formátuje IE, ale zatím jsem nikde nic nenašel, na rozdíl od FF, který to má velmi dobře vyřešeno.

Aby nebylo zbytečných sporů o výchozím formátování HR v IE, vodorovnou čáru jsem udělal formátováním tagu DIV.

<style>
p {margin-top: 0; }
div {width:100%; height: 2px; background: blue; overflow: hidden; }
</style>
<div>&nbsp;</div>
<p>Lorem ipsum dolor sit amet.</p>
<p>Consectetuer eget accumsan In Duis sem.</p>
<p>Ligula ante convallis laoreet interdum.</p>
<div>&nbsp;</div>
<p>Neque dolor ac Duis.
<p>A tristique sed Nullam Ut.
<p>Ac eros orci.
<div>&nbsp;</div>

Microsoft Internet Explorer 7 Public Beta 2 zobrazí stránku stejně, jako IE 6
http://danvine.com/iecapture/view/?jid=26100

Vaše odpověď

Mohlo by se hodit

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

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

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