V IE8 zmizne nepochopiteľne menu

tomco3131 · Napísal **tomco3131**: 16.02.2012 20:30

ahojte,

stretol som sa z divným problémom u prehliadača IE8 a nižšie.
U týchto prehliadačov mi totiž zmizne menu. teda, aby som bol presný, menu u IE8 strátí obrázky pozadia, no je klikatelné a ostáva na pozícii. len nevidieť prvky. u IE7 úplne menu vypadne... nestretol som sa eŠte s týmto problémom.

menu:

Kód:

<div id="menu-main">
<ul>
<li><a href="index.html" class="domov"></a></li>
<li><a href="o-mne.html" class="omne"></a></li>
<li><a href="uspechy.html" class="uspechy"></a></li>
<li><a href="klienti.html" class="klienti"></a></li>
<li><a href="fotogaleria.html" class="fotogaleria"></a></li>
</ul>
</div>

css:

Kód:

#menu-main{
   width:610px;
   height:32px;
   position: absolute;
   bottom:18px;
   right:0px;
}
#menu-main a{
   color:#000;
}

#menu-main ul{
   list-style:none;
}

#menu-main ul li{
   float:left;
}

#menu-main li:before{
   content:url(img/odrazka-biela.png); 
   position:relative; 
   top:5px; 
   padding:0 11px;
}

#menu-main li:first-child:before{
   content:'';
}

.odrazka-main{
   margin:5px 12px 0 12px;
}

a.domov{
   background:url(img/menu/domov.jpg)0 0 ;
   height:32px;
   padding-left:84px;
   padding-bottom:14px;
}

.domov:hover{
   background:url(img/menu/domov.jpg)0 -32px;
}
...rovnako ostatné položky.

funkčnosť môžete otestovať na http://data.uforevue.sk

Ďakujem veľmi pekne za rady

Zoly · Napísal **Zoly**: 17.02.2012 10:16

Niektoré prehliadače prázdne elementy ignorujú. Niesom si istý ty to bude práve ten dôvod prečo to nejde lebo nemám tu žiadne staré IE-čko ale skús to daťa takto

Kód:

1daemon1 · Napísal **1daemon1**: 17.02.2012 11:41

pridaj uvodzovky cize:

Kód:

background:url('img/menu/domov.jpg');

shaggy · Napísal **shaggy**: 17.02.2012 17:41

1daemon1 - tvoja rada je nezmyselná, zbytočná a s problémom nemá nič spoločné.
tomco - tvoj problém je v tom, že odkaz je inlinový, nikde nedefinuješ, že by mal byť blokový. Ďalší problém je, že to menu je totálne neprístupné (nič neobsahuje). Tu by sa hodilo prerobiť celé menu, ak to chceš mať urobené poriadne.

tomco3131 · Napísal autor témy **tomco3131**: 17.02.2012 17:54

jasné, na blok som zabudol... do vnútra dám span a do neho text skrytý. Potom by už prístupné bolo.
pôvodne som to chcel robiť len cez CSS kedže tá 3 pozná tie krásne oblé rohy a podobne, ale žiaľ platený font som nemohol použiť ináč ako obrázok

ináč, "kľúčovou" chybou bola chýbajúca medzera medzi obrázkom pozadia a jeho suradnicami. background:url(img/menu/domov.jpg)0 0 ;

takže ostáva optimalizovať pre iE7

1daemon1 · Napísal **1daemon1**: 17.02.2012 18:40

shaggy: testoval som to v IE9 developer tools a ked som tam zmenil ten background na:

Kód:

background:url('img/menu/domov.jpg');

Tak to fungovalo. Preto som to pisal. Snazil som sa len pomost tak nechapem preco musis vzdy hned tak prudko reagovat ked stacilo napisat ze sa mylim.

tomco3131 · Napísal autor témy **tomco3131**: 17.02.2012 18:56

keď sme už u toho developer tools v IE9. tiež cez to optimalizjem pre staršie IEčka, predtým som používal ten nástroj ktorý robí screeny prípadne myslím IE TESTER... je tento developer tools spolahlivý, teda zobrazuje skutočne tak ako staré IE prehliadače? je to totiž microsoft taKže sa radšej pýtam

89Aquarius · Napísal **89Aquarius**: 17.02.2012 23:41

zdravim, mam tento isty problem

tomco3131 píše:

stretol som sa z divným problémom u prehliadača IE8 a nižšie.
U týchto prehliadačov mi totiž zmizne menu. teda, aby som bol presný, menu u IE8 strátí obrázky pozadia, no je klikatelné a ostáva na pozícii. len nevidieť prvky.

, na stranke www.hauzli.com . mam vsak definovany aj display:block . ostatok stranky si nevsimajte, na tom sa este popracuje... nemoze byt chyba aj v tom, ze to robim v html5 a css3 a IE8 to nepodporuje? diky

Ďuri · Napísal **Ďuri**: 18.02.2012 8:42

Aquarius, nabuduce nelez do cudzej temy. A odpoved na tvoju otazku - ak chces pracovat s nedostatocne podporovanymi technologiami, mal by si vediet, ako riesit pripadne nekompatibility. Ak to nevies, pouzivaj starsie, osvedcene technologie a postupy. Konkretne tvoj problem sa da vyriesit jednym riadkom Javascriptu, ktory urcite zvladnes vygooglit, ak chvilu porozmyslas, ale prepisanim kodu na univerzalne podporovane elementy tiez nic nepokazis.

tomco3131 · Napísal autor témy **tomco3131**: 18.02.2012 9:01

na html5 a css3 je úžasný HTML5 boilerplate. nerobil som na tom síce ešte celý web, ale skúšal som natom vela vecí, a kompatibilita sa zlepšila

takže pokiaľ teraz používať tieto technológie, toto riešenie je veľmi dobré aspoň podla mna. na druhú stranu ked pozerám na tvoj kód, nieje tam viac menej nič také čo by to nejak extra potrebovalo.
a druhá užitočná pomôcka ak náhodou nepoznáš : http://prefixr.com/index.php pridáva predpony pre ešte oficiálne neodsúhlasené css3 vlastnosti

shaggy · Napísal **shaggy**: 18.02.2012 11:32

Aquarius - ak môžem (ak to stránka/klient dovolí), tak používam tie nové vlastnosti a funkcie, ktoré radikálne neovplyvnia funkčnosť stránky. Čiže napríklad zaoblené rohy a pod.
Nejak nevidím prínos v tom, používať napr. <header> a <nav>, keď kvôli tomu musíš použiť v starších prehliadačoch knižnicu modernizr. Načo je to dobré? Čo ti pomôže, ak použiješ tieto tagy?

89Aquarius · Napísal **89Aquarius**: 18.02.2012 11:46

// je to tak, problem bol s pouzitim html5 a css3 (konkretne pri elementoch header, nav a footer). po klasickom rozdeleni do divov je vsetko v poriadku. dik

V IE8 zmizne nepochopiteľne menu

Podobné témy