1.Zprovoznit v IE/QUIRKu 2.Chování marginu [EXPERTS ONLY] – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

1.Zprovoznit v IE/QUIRKu 2.Chování marginu  [EXPERTS ONLY] – CSS – Fórum – Programujte.com1.Zprovoznit v IE/QUIRKu 2.Chování marginu [EXPERTS ONLY] – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Petroff0
Věrný člen
24. 8. 2007   #1
-
0
-

Vycházím z jednoduchého kódu, který zobrazí vodorovně vycentrovaný prvek BODY obsahující dvojblok
(s oběma sloupci stejně vysokými).
Takto je naprosto shodně zobrazen v Mozille,Opeře,IE6 a IE7 (standardní mód).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>(1) IE/QUIRK (2) P-margin </title>
<style>
* { margin: 0; padding:0; background: white; font: bold 18px serif }

html { text-align: center } /* << Centruje */
body { margin: 0 auto; /* << stránku */
width: 500px; /* o šířce: 500=200+300 */
background: black;
}
#levy { float: left;
width: 200px; /* Sloupec o šířce: 200 */
background: #bbb;
}
#pravy { margin-left: 200px;
width: 300px; /* Sloupec o šířce: 300 */
background: #888;
}
/* p {margin: 5px} */
#levy p {background: yellow; color: blue}
#pravy p {background: red; color: white}
/********************************************* Oprava/IE6 */
* html #pravy { margin-left: 0px; height: 1% }
* html #levy { margin-right: -3px }
/**********************************************************/
</style>
</head>
<body>
<div id="levy">
<p>levý sloupec</p>
<p>levý sloupec</p>
<p>levý sloupec</p>
</div>
<div id="pravy">
<p>pravý sloupec</p>
<p>pravý sloupec</p>
<p>pravý sloupec</p>
</div>
</body>
</html>

[podtrzene]1.PROBLÉM (týká se IE):[/podtrzene]
Pokud vložíme <?xml version="1.0" encoding="utf-8" ?> na začátek [popř.odstraníme <!DOCTYPE html....> deklaraci]
stránka je vykreslena v QUIRKu u IE6 [popř. u obou IE]
<Výsledek>
Původně vycentrovaný BODY o šířce 500px se roztáhne na celou šířku dokumentu.
Dvojblok je zarovnaný vlevo - stejně jako text v odstavcích ( => ignoruje se nastavení html{text-align:center} )
PROČ? A JAK TO NAPRAVIT?

[podtrzene]2.PROBLÉM (pro změnu netýká se IE):[/podtrzene]
Odstavcům změníme margin na nenulovou hodnotu - stačí odkomentovat připravený: P {margin: 5px}
<Výsledek>
Zatímco v IE6/7 jsou všechny odstavce jak v levém, tak v pravém sloupci vykresleny správně s okraji (v barvě pozadí sloupců),
v Opeře a FF je v pravém sloupci odříznut dolní a horní vnější okraj sloupce(= 1.a 3.odstavce) a sloupec (o 10px kratší) je odsazen 5px od horní hrany okna.
Ve Firefoxu je navíc odsazen o 5px i levý (nezměněný) sloupec.
PROČ? (takhle se chová jen margin - s paddingem či borderem problémy nejsou)

Nahlásit jako SPAM
IP: ...–
Reklama
Reklama
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 6 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý