Position: fixed IE6 - PROBLÉM Č.1 [IE EXPERTS ONLY] – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Position: fixed IE6 - PROBLÉM Č.1   [IE EXPERTS ONLY] – CSS – Fórum – Programujte.comPosition: fixed IE6 - PROBLÉM Č.1 [IE EXPERTS ONLY] – CSS – Fórum – Programujte.com

 

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

Mám na stránce ve volném prostoru, který tvoří levý margin hl.části, umístěnu navigaci pozicovanou fixně.
Aby se stránka zobrazila shodně i v IE6 (který position:fixed chybně interpretuje -> jako normální statický prvek),
použil jsem emulaci tohoto chování (podle návodu z Pixyho knihy CSS:Hotová řešení) pomocí absolutní position
(která je vztažena k prvku html a ten má normálně nastaveno [podtrzene]html {overflow:auto}[/podtrzene] a tak roluje se statickými i absolutními prvky):
html {
overflow: hidden
........zakážeme rolování u html - takže abs.prvek bude abs. vzhledem k oknu (nemůže se hýbat) => FIXNÍ
}
body {
height: 100%;
......................body je stejně vysoký jako okno
overflow: auto ......................a delší obsah bude rolovat
}
body #nav_fix {position: absolute}
..... Přesto,že ostatní přímí potomci body rolují, absolutní prvci nebudou=stanou se fixními.

Pixy píše:

Řešení je nevýhodné v tom,že se absolutně pozicované bloky,které nejsou potomky (tedy jsou umístěny přímo v těle dokumentu body) jiných absolutně nebo relativně pozicovaných bloků, budou chovat jako fixní....

Buď jsem udělal chybu - rád bych věděl jakou - a nebo se Pixy mýlí.
Posuďte - rolovaný text obsahuje sice [podtrzene]2 absolutní prvky [/podtrzene]- ale jako [podtrzene]potomky relativních bloků [/podtrzene][H_hlavicka, P_paticka].
V IE6 se oba (v protikladu s tím co Pixy říká) chovají jako FIXNÍ.
V ostatních browserech (nebo když odstraním hlavu+patu tak ve všech browsrech) se stránka chová tak, jak má.
Nenapadá vás jak na to ? ? ? HELP PLS
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {margin:0; padding:0}
body * {padding: 1ex}
b {display:block}

/********************* LEVÝ SLOUPEC /NAVIGACE/ FIXNÍ *************************************/
#nav_fix { position: fixed; top:0; left:0; width: 200px;
padding: 6em 25px 100% 25px;
color: white; background: black
}
/********************* OBSAH /Head+Text+Footer/ SCROLLOVATELNÝ ****************************/
#M_main_text { margin-left: 250px; color: blue}
#H_hlavicka,#P_paticka {position: relative; height:5em; background:#FF6; text-align:center}

#content div div {color: #292; position: absolute; left:0; right:0; width:100% } /* Tohle jsou obsahy hlavy/paty,co blbnou. */
body #P_paticka div { color: red }
</style>
<!--[if IE 6]> <style type="text/css">
html { overflow: hidden }
body { height: 100%; overflow: auto}
#nav_fix { position: absolute }
</style>
<![endif]-->
</head>
<body>

<ul id="nav_fix">
<li>BEGINUM dolor sit amet</li>
<li>dolor sit amet</li>
<li>dolor sit amet</li>
<li>dolor sit amet</li>
<li>dolor sit amet</li>
<li>dolor sit amet</li>
<li>dolor sit amet</li>
<li>dolor sit amet</li>
<li>ENDUM dolor sit amet</li>
</ul>

<div id="content">

<div id="H_hlavicka"> <div><b>H = hlavička</b>O její výšku odsadíme navigaci</div> </div>

<div id="M_main_text">
BEGINUM dolor sit amet, consectetuer adipiscing elit.adipiscing elit.
adipiscing elit.adipiscing elit.adipiscing elit.adipiscing elit.
adipiscing elit.adipiscing elit.adipiscing elit.adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
ENDUS.
</div>

<div id="P_paticka"> <div><b>P = patička</b>Copyright © PETROFF</div> </div>

</div>

</body>
</html>

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, 7 hostů

Podobná vlákna

Position fixed — založil pirat89

Position fixed — založil BigBear

Menu position: fixed — založil zelenac1

 

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