1.Zprovoznit v IE/QUIRKu 2.Chování marginu [EXPERTS ONLY]

1.Zprovoznit v IE/QUIRKu 2.Chování marginu [EXPERTS ONLY]

Věrný člen

24. 8. 2007 #1

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