IE7 te csodálatos...

s_volenszki · 2008. Már. 21. (P), 19.45

Szisztok!

Felrobbantam! Az IE 7 ma teljesen kikészített! Egyik ismerősőm kislányára hasonlít. Mikor megkérdezem től, milyen csokit kér, lila tehenest, vagy nyuszisat, erre Ő azt felelei: NEM!

Olvastam itt a laboron egy okos dolgot gmap-val kapcsolatban és úgy döntöttem, hogy a sávszélesség megtakarítása érdekében én is átszerkesztem a térképeimet úgy, hogy látszódjon a statikus és egy rákattintás után töltődjenek csak az élesek.

Minden tök jó, már csak ott tartok, hogy ki kellene venni a keretből a statikus térkép képet, miután betöltődik a navigálható.

Egy kis áttekintés:

1. Egy divbe betöltődik a statikus térkép képe.
2. Ha rákattintanak, a div innerHTML-ébe kicserélem a statikus képet arra az iframe-re amelyik tartalmazza a térképet (atért iframe mert).
3. Betöltődik a térkép és kiszol parentnek, hogy ready.

A probléma ott kezdődött, hogy az IE7, az egyből betolja a frame fehér hátterét, míg minden valamire való böngésző (FFX, Opera, Safari, Netscape), csak akkor kezd el megjeleníteni, ha már van tartalma annak a frame-nek.

Na, sebaj, gondoltam, adtam a konténernek fix magasságot és overflow hiddent, aztán a frame appendel került be a statikus térkép képe alá. Így folyamatosan látja user a statikus képet, aztán mikor a térkép kész és szól parent-nek, hogy ready, akkor gondoltam removeChild-dal kiveszem a statikus képet!

Szerintetek? Az IE7 bazár(!) és hibaüzit akar küldeni apucinak!

Na gondoltam ha nem kallett a lila tehenes, jöhet a nyuszis (mármint a csoki):

Amikor ready a térkép, a statikus képnek adok 0px magasságot, aminek következtében felcsúszík a frame a konténer tetejébe.

Na szernitetek IE7-nek mennyi a 0px? Mert szemre kb. 20!

Eddíg paddingoltam, marginoztam, olvastam néhány topicot yahoo-n és gugli-n talált fórumokon majd úgy döntöttem, ciki ide vagy oda, de kérek egy kis segítséget!

Merre induljak?

s_volenszki

■

HTML, CSS, JavaScript, Ajax

csirip

Kód?

janoszen · 2008. Már. 21. (P), 19.58

Hmmm... érdekes, bár a hozzászólásodban több az indulat mint az informatív szöveg. Mi lenne, ha segítenél egy kis kóddal? Vagy linkkel?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Tehát

s_volenszki · 2008. Már. 21. (P), 21.26

Van egyszer a map.html, ami a navigálható gmap-ot tartalmazza:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="TEXT/HTML;CHARSET=ISO-8859-2" />
<meta http-equiv="content-language" content="hu" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script src="http://maps.google.com/maps?ide jonnek a terkep parameterek" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){
if(GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(00.000000, 00.000000), 00);
var point = new GLatLng(00.000000, 00.000000);
map.addOverlay(new GMarker(point));
map.addControl(new GSmallMapControl());
if(parent){parent.mapCleanUp();}
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:500px;height:320px"></div>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    <title></title>
    <meta http-equiv="content-type" content="TEXT/HTML;CHARSET=ISO-8859-2" />
    <meta http-equiv="content-language" content="hu" />
    <style type="text/css">
        body {
            margin: 0px;
        }
    </style>
    <script src="http://maps.google.com/maps?ide jonnek a terkep parameterek" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        function load(){
            if(GBrowserIsCompatible())
            {
                var map = new GMap2(document.getElementById('map'));
                map.setCenter(new GLatLng(00.000000, 00.000000), 00);
                var point = new GLatLng(00.000000, 00.000000);
                map.addOverlay(new GMarker(point));
                map.addControl(new GSmallMapControl());
                if(parent){parent.mapCleanUp();}
            }
        }
        //]]>
    </script>
    </head>
<body onload="load()" onunload="GUnload()">
    <div id="map" style="width:500px;height:320px"></div>
</body>
</html>

Látható benne a parent funkcióhívás, amikor a térkép készen van.
Aztán következik az a fájl, ami használja a térképet (usemap.html). Szintén jól látható a funkció, ami a keretből van indítva mikor kész a térkép:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="TEXT/HTML;CHARSET=ISO-8859-2" />
<meta http-equiv="content-language" content="hu" />
<script type="text/javascript">
//<![CDATA[
function preloadMap(){
M = document.getElementById('blind_map');
M.innerHTML = M.innerHTML + '<iframe width="500" height="320" frameborder="0" scrolling="no" src="map.html"></iframe>';
}
function mapCleanUp(){
document.getElementById('blind_map').removeChild(document.getElementById('blind_map').childNodes[1]);
}
//]]>
</script>
</head>
<body>
<div id="blind_map" style="width:500px;height:320px;margin-left:auto;margin-right:auto;border:1px solid #000000;overflow:hidden;">
<a href="javascript:void(0);" onclick="preloadMap();" style="height:0px;">
<img src="http://maps.google.com/staticmap?ide jonnek a terkep beallitasai" border="0">
</a>
</div>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    <title></title>
    <meta http-equiv="content-type" content="TEXT/HTML;CHARSET=ISO-8859-2" />
    <meta http-equiv="content-language" content="hu" />
    <script type="text/javascript">
        //<![CDATA[
        function preloadMap(){
            M = document.getElementById('blind_map');
            M.innerHTML = M.innerHTML + '<iframe width="500" height="320" frameborder="0" scrolling="no" src="map.html"></iframe>';
        }
        function mapCleanUp(){
            document.getElementById('blind_map').removeChild(document.getElementById('blind_map').childNodes[1]);
        }
        //]]>
    </script>
    </head>
<body>
    <div id="blind_map" style="width:500px;height:320px;margin-left:auto;margin-right:auto;border:1px solid #000000;overflow:hidden;">
        <a href="javascript:void(0);" onclick="preloadMap();" style="height:0px;">
            <img src="http://maps.google.com/staticmap?ide jonnek a terkep beallitasai" border="0">
        </a>
    </div>
</body>
</html>

Ennyi az egész! Amikor betöltődik a térkép, FFx, Safari, Netscape, Opera gond nélkül kiveszi a képet, IE7 meg elhasal. Probáltam még ezt (természetesen a képnek akkor van id-je is):

function mapCleanUp(){
document.getElementById('blindmap').style.height = '0px';
}


        function mapCleanUp(){
            document.getElementById('blindmap').style.height = '0px';
        }

Csak IE7-ben a kép a 0px magasság ellenére kb 15-20px magas marad. Megtaláltam az egyik Win98 appliance-omat és megnéztem IE6-tal. A removeChild ott sem működik, bár nem dob hátast, és a kép 0px magasság után szintén 15-20px magas.

Szinte biztos hogy valami nem Xbrowser a removeChild-os kódomban, nem vitatom, az indulat csak annyi volt, hogy meglepődtem azon, hogyan tud a js a saját kis "játszóteréből" oprendszer alkalmazás szintű hibát okozni.

s_volenszki

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Fától az erdőt!

s_volenszki · 2008. Már. 21. (P), 23.09

Na, az egyik megoldás azért csak megszületett!

A removeChild-dal nem mentem semmire, viszont kiderült, hogy nem a 0px magas kép okozta a hibát IE6-7-ben, hanem egyszerűen nem komálták konténeren belül a Komodo tab-os intend-jeit!

s_volenszki

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Ilyenkor általában azt is hasznos volna közölni, hogy milyen

Fraki · 2008. Már. 21. (P), 23.51

Ilyenkor általában azt is hasznos volna közölni, hogy milyen kulcsszavakra kerestél rá.

Egyébként "IE whitespace bug" -ra nem találsz releváns anyagot? Csak kíváncsi vagyok.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Abszolult mellé fogtam.

s_volenszki · 2008. Már. 22. (Szo), 00.10

Alapvetően a removeChild által generelát hiba volt, ami miatt más megoldás után kutakodtam. Amiker kerestem az az IE+removeChild volt, hiszen azt akaram megvalósítani.

Menet közben beugortt egy gondolat, hogy mi lenne ha nem kivenném a képet, csak a magasságát 0px-re állítanám. Na ekkor maradt nemkívánt térköz a frame és a konténer teteje között.

Ez a nemkívánt térköz volt a Komodo Edit tab-os intend-je, amit IE-n kívül minden böngésző lenyel.

s_volenszki

szerk:

Attól függetlenül ha van rá időtök nézzétek már meg, nektek is behasal az IE7 a removeChild-től?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Közvetlenül nem használom a removeChild()-ot, de...

Fraki · 2008. Már. 22. (Szo), 02.55

Közvetlenül nem használom a removeChild()-ot, de prototype-ban a remove()-ot igen, és azt pedig ennyi:

remove: function(element) {
element = $(element);
element.parentNode.removeChild(element);
return element;
},


  remove: function(element) {
    element = $(element);
    element.parentNode.removeChild(element);
    return element;
  },

Viszont whitespace-bugból van néhány.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés