Autor Zpráva
Martin Tiršel
Profil
#1 · Zasláno: 12. 11. 2007, 04:28:06
Odpovědět Citovat
Zdravim,

uz sa s tym trapim niekolko hodin a nie a nie prijst na riesenie. Som si chcel nieco pekne nastylovat za pouzitia priehladnosti, aj vsetko funguje, ale ako to uz chodi, IE6 si na mna zasa nieco vymyslel.

Konkretny priklad je tu.

No a v com je problem. Vo vsetkych moznych prehliadacoch je vsetko v poriadku, ale u IE6 som zistil, ze nieje mozne kliknut do inputboxov. Teda ono sa tam kliknut da, ale len asi na poslednych 20 pixelov na konci inputboxu, ako keby to nieco zakryvalo. Hrajem sa tam sice so z-indexom, ale nema tam co zavadzat.

Chcel som teda vyskusat nastavit vyssi z-index na inputboxy, co je ale mozne len za pouzitia position: relative|absolute. Pokial pouzijem position: relative a z-index na jeden inputbox (skusal som samostatne len ten nizsi), tak sa zrazu do neho da kliknut. Pokial to ale urobim na oba alebo na nejaky div, v ktorom je to obalene, tak position:relative mi tento blok vyhodi niekam do lavej casti obrazovky. A kliknut tam samozrejme uz ide :)

Vie mi niekto poradit, ako ten klikaci problem co najelegantnejsie odstranit? Pripadne preco mi position: relative ten blok posunie, vyriesenie tohto by mohlo zrejme stacit.

V strucnosti, na stranku je aplikovane pozadie, nad tym je aplikovany priehladny PNG na vytvorenie vytienovania a nad tym je zbytok.

Dakujem
Dero
Profil
#2 · Zasláno: 12. 11. 2007, 11:53:51
Odpovědět Citovat
Ahoj,
nezkoušel jsem to, ale nejjednodušší řešení je asi odstranit filtr z * HTML .bg_transparent, protože filterem ošetřené prvky rády kradou fokus - často poměrně nepředvídatelně. Zkus si to například s odkazy, pravděpodobně budou taky nestisknutelné. Když pozadí nahradíš analogickým bez průsvitnosti (což jde poměrně snadno), mělo by to fungovat.
Chamurappi
Profil
#3 · Zasláno: 12. 11. 2007, 12:14:40
Odpovědět Citovat
Reaguji na Dera:
„filterem ošetřené prvky rády kradou fokus - často poměrně nepředvídatelně“
Je v tom systém. Plocha elementu s AlphaImageLoaderem je omezená na místa, která mají nenulovou průsvitnost. Neprůhledná plocha obrázku je v podstatě klikací mapa. Má-li na události myši reagovat celá plocha elementu, stačí se vyvarovat stoprocentní průhlednosti — mít všude alfakanál minimálně 1, rozdíl oproti 0 většinou nebude viditelný.
Dero
Profil
#4 · Zasláno: 12. 11. 2007, 12:21:07
Odpovědět Citovat
Chamurappi: Taky jsem si to myslel, ale narazil jsem na výjimky. Koneckonců - sice jsem tento příklad co do vrstev nezkoumal podrobně, ale vypadá taky jako výjimka z pravidla?
Chamurappi
Profil
#5 · Zasláno: 12. 11. 2007, 12:51:37
Odpovědět Citovat
Reaguji na Martina Tiršela:
Nemám tu teď čistou instalaci Exploreru 6, takže problém nevidím.
Jelikož jde v tvém případě jen o gradinety, můžeš zkusit filtr Gradient, ten má na vstupu dvě 32-bitové barvy (ve formátu #AARRGGBB).
Martin Tiršel
Profil
#6 · Zasláno: 13. 11. 2007, 01:43:43 · Upravil/a: Martin Tiršel
Odpovědět Citovat
Chamurappi: Nejako to nie a nie pochopit :) Nevies najlepsie o nejakom dobrom praktickom priklade aj s popisom? Ten gradient nieje dolezity (a nesposobuje tento problem), problem je samotny blok login window.

AlphaImageLoader mozem teoreticky pre IE vyhodit a nahradit to ciernym pozadim s alpha=50, cim sa docieli rovnaky efekt, ale ten sa aplikuje aj na vnorene elementy. Vnorenemu mozem dat position: relative, ale tu potom v IE vystupuje druhy problem, ze sa mi cely blok rozhodi.

Nejaku dobu som s tym laboroval a zistil som, ze ak mam takuto skladbu: 




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>titulok</title>

    <style>

      html, body {

        padding: 0;

        margin: 0;

        width: 100%;

        height: 100%;

      }

      

      .relative {

        position: relative;

      }

    </style>

  </head>



  <body>

    

      <div class="relative">

          <div style="width: 500px;margin: auto;background: blue;">

              <div class="relative">

                  XXX

              </div>

          </div>

      </div>



  </body>



</html>


IE6 obsah najvnutornejsieho divu vyhodi na lavy okraj. Nevedel som zistit, preco to robi, az som zistil, ze pokial sa pouzije kombinacia vnoreni relative-normal-relative, je ten blok vyhodeny, ak su vsetky tri relative-relative-relative, je to ok. Cize staci dat relative na prostredny div. Je to nejaky bug alebo featura IE6? Pripadne mi to vie niekdo zdovodnit, preco sa to takto chova?

Po pridani poition:relative na cely login window, sa prvky nerozhodia a mozem pouzit z-index, cim sa zaroven vyriesil problem a do inputboxov mozem bezproblemovo klikat a funguje to konecne aj v IE6.
Časová prodleva: 16 let

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