Darstellungsproblem im IE6 > T3 und jqModal

Elli · 18.04.2008, 23:02

Hi,

eigentlich passt dieser Thread auch unter Flash und Javascript, aber da das
Phänomen im Zusammenhang mit T3 auftritt, poste ich mal hier.

Code kann ich erst Montag hier angeben, weil die Email irgendwie im Outlook-
filter hängen geblieben ist :-/

Über eine eigene Extension öffnen wir ein SWF-File in einer Modal Box >
sowas wie die Lightbox nur für jQuery (jqModal). Das SWF wird über swfObject
eingebunden. Zuerst hatten wir dafür "Lightbox for Content" benutzt, aber
Mootools scheint wohl Probleme mit swfObject zu haben und deswegen sind
wir auf jQuery umgestiegen. Hier hatte ich einen Test in allen gängigen
Browsern gemacht - mit Erfolg. Der Inhalt wird einwandfrei platziert.
Nun wurde alles in T3 eingebunden und dynamisch umgesetzt. Da wir in die
Box ein Pageflip einbauen, werden an die SWF noch jede Menge XML-Parameter
mit angehangen. Das ist eigentlich der einzig größere Unterschied, der mir
auf Anhieb ersichtlich war. Im FF und IE7 funktioniert alles einwandfrei, aber
der IE6 zickt. Hier öffnet sich zwar noch die Box, aber dann sieht man
immer nur den Hinweis, dass der Flashplayer nicht aktuell wäre und man sich
die neuste Version herunter laden soll. Sprich, eine Ersetzung mit der SWF
findet hier nach positiver Überprüfung gar nicht statt. Wenn man jetzt noch
den schließen-Button klickt, schließt sich nicht der Overlay-Layer, sondern
man landet dann auf der index.php.

Da es ohne Code natürlich immer schwierig ist, sowas anzugehen, wollte ich
mal vorab wissen, ob jemand Ideen hat, was man alles überprüfen könnte,
warum eben der IE6 hier Probleme hat. Bin für jeden Hinweis dankbar.

Merci
Elli

steffenk · 19.04.2008, 18:27

ie6 und swfobject kann ungemeine Probleme bringen, siehe
http://aralbalkan.com/912

Elli · 20.04.2008, 13:56

Danke Steffen. Sehr interessant. Die Frage ist jetzt nur noch, was davon
hilft. Werde es mal easy mit "defer" probieren...

Elli · 21.04.2008, 09:02

Statisch geladen macht der IE6 keine Mucken, nur wenns über T3 läuft.
Bin auf jeden Fall noch dran, aber hier schon mal der Code von T3:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 
        This website is brought to you by TYPO3 - get.content.right
        TYPO3 is a free open source Content Management Framework created by Kasper Skaarhoj and licensed under GNU/GPL.
        TYPO3 is copyright 1998-2005 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
        Information and contribution at http://www.typo3.com
-->
<base href="http://cms.testgroup.com.dev.local/" />
<link href="fileadmin/templates/css/test_standard.css" rel="stylesheet" type="text/css" media="screen,print" />
<link href="fileadmin/templates/css/test.css" rel="stylesheet" type="text/css" media="screen,print" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<!--[if IE]> 
        <link href="fileadmin/templates/css/testIE.css" rel="stylesheet" type="text/css" media="screen,print"> 
        <script type="text/javascript"> 
            //onload = function() { mainContainer.focus() } 
         </script>     
     <![endif]-->
<!--
    
  -->
<link rel="schema.dc" href="http://purl.org/metadata/dublin_core_elements" />
<link href="typo3conf/ext/dgp_pageflip/css/pageflipbox.css" rel="stylesheet" type="text/css" media="screen,print" />
<script language="JavaScript" type="text/JavaScript" src="typo3conf/ext/dgp_pageflip/js/jquery-1.2.3.pack.js"></script>
<script language="JavaScript" type="text/JavaScript" src="typo3conf/ext/dgp_pageflip/js/jqModal.js"></script>
<script language="JavaScript" type="text/JavaScript" src="typo3conf/ext/dgp_pageflip/js/swfobject.js"></script>
<title>Hauptkatalog 2005</title>
<meta name="generator" content="TYPO3 3.8 CMS" />
<script type="text/javascript">
        /*<![CDATA[*/
<!--
        function openPic(url,winName,winParams)       {       //
               var theWindow = window.open(url,winName,winParams);
               if (theWindow) {theWindow.focus();}
        }

// -->
        /*]]>*/
</script>
</head>
<body>
<div class="jqmWindow" id="dgp-pageflip-katalog">loading... <br />
  <img src="typo3conf/ext/dgp_pageflip/img/ajax-loader.gif" class="preloader" alt="loading..." /></div>
<div id="mainContainer">
  <div id="Container2" class="mainContainer">
    <!-- top menues -->
    <!-- menu right -->
    <div class="menuTopRight"><span class="menuTopRightItem"><a href="index.php?id=411&amp;no_cache=1" onfocus="blurLink(this);">Suche</a></span><span class="menuTopRightItem"><a href="index.php?id=719&amp;no_cache=1" onfocus="blurLink(this);">Kontakt</a></span><span class="menuTopRightItem"><a href="index.php?id=1063&amp;no_cache=1" onfocus="blurLink(this);">Sitemap</a></span></div>
    <!-- menu Flags -->
    <div id="menuFlagsContainer">
      <div class="menuFlags"></div>
    </div>
    <div style="clear:both;"></div>
    <!-- group logo -->
    <div id="grouplogo">
      <div class="grouplogo"><a class="logoLink" href="http://www.testgroup.com"><img src="fileadmin/templates/media/testGroup.jpg" alt="" border="0" /></a></div>
      <div class="menuTopLeft">
        <!--                <span class="menuTopLeftItem"><a href="fileadmin/templates/../../index.php?id=7">test Group</a></span>
                <span class="menuTopLeftItem"></span>-->
        <span class="menuTopLeftItem"><span class="menuTopLeftItem"><a href="http://www.testgroup.com" target="_blank">test Group</a></span></span> <span class="menuTopLeftItem"></span> </div>
    </div>
    <!-- header image -->
    <div id="logo">
      <div class="logo"></div>
    </div>
    <div style="clear:both;"></div>
    <!-- maincentermenu -->
    <div class="topMenuLine">
      <!-- topMainMenu -->
      <div id="topMainMenu" class="topMainMenu"><a href="index.php?id=14" class="menuTopMainItem">Unternehmen</a><a href="index.php?id=19" class="menuTopMainItem">Weltweit</a><a href="index.php?id=17993" class="menuTopMainItem">Marken</a><a href="index.php?id=24220" class="menuTopMainItem">Geschäftsfelder</a><a href="index.php?id=716" class="menuTopMainItemActive">Presse</a><a href="index.php?id=717" class="menuTopMainItem">Veranstaltungen</a></div>
      <!-- fulltext search -->
      <div class="fulltextSearch">
        <form action="http://cms.testgroup.com.dev.local/index.php?id=411&no_cache=1" method="post" name="tx_indexedsearch">
          <input type="text" class="inputField" value="" size="13" name="tx_indexedsearch[sword]" onClick="document.tx_indexedsearch['tx_indexedsearch[sword]'].value=''" />
          &nbsp;
          <input style="border:0px none;" type="image" src="fileadmin/templates/media/searchButton.gif" value="submit" name="tx_indexedsearch[submit_button]" />
          <input type="hidden" name="tx_indexedsearch[_sections]" value="0" />
          <input type="hidden" name="tx_indexedsearch[pointer]" value="0" />
          <input type="hidden" name="tx_indexedsearch[ext]" value="0" />
        </form>
      </div>
    </div>
    <div style="clear:both;"></div>
    <!-- path / rootline -->
    <div class="greyDelimiter"></div>
    <div class="path"><span class="preRootlineMark">Sie befinden sich in:&nbsp;</span><span class="rootlinePart"><a href="index.php?id=716" onfocus="blurLink(this);">Presse</a></span><span class="rootlinePart"><img src="fileadmin/templates/media/menuMarker.gif" width="7" height="5" alt=""  /><a href="index.php?id=217" onfocus="blurLink(this);">Hauptkatalog 2005</a></span></div>
    <div style="clear:both;"></div>
    <!--<div class="greyDelimiter"></div>-->
    <!-- leftMainMenu -->
    <div class="leftMainMenu" id="leftMainMenu">
      <p class="menuLeftMainBorder"><a href="index.php?id=79" class="menuLeftMainItem">Aktuell</a></p>
      <p class="menuLeftMainBorder lastElement"><a href="index.php?id=24209" class="menuLeftMainItem">Presse-Spiegel</a></p>
    </div>
    <!-- MAIN CONTENT -->
    <!--TYPO3SEARCH_begin-->
    <div id="mainContent" class="mainContent">
      <!-- STRUCTURE 1 COL - START -->
      <div class="structure-1col" >
        <div class="col1">
          <!--  CONTENT ELEMENT, uid:264/templavoila_pi1 [begin] -->
          <a name="264"></a>
          <div class="structure-1col">
            <div class="col1">
              <!--  CONTENT ELEMENT, uid:265/textpic [begin] -->
              <a name="265"></a>
              <!--  Image block: [begin] -->
              <table border="0" cellspacing="0" cellpadding="0" class="imgtext-nowrap">
                <tr>
                  <td valign="top"><table width="147" border="0" cellspacing="0" cellpadding="0"  class="imgtext-table">
                      <tr>
                        <td colspan="1"><img src="clear.gif" width="136" height="1" alt="" /></td>
                        <td rowspan="2" valign="top"><img src="clear.gif" width="10" height="1" alt="" title="" /></td>
                      </tr>
                      <tr>
                        <td valign="top"><a href="http://cms.testgroup.com.dev.local/index.php?id=217#" onclick="openPic('http://cms.testgroup.com.dev.local/showpic.php?file=uploads%2Fpics%2Ftest_cable_guide_01.jpg&amp;width=800m&amp;height=600m&amp;bodyTag=%3Cbody%20bgcolor%3D%22white%22%3E&amp;wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&amp;md5=d5ef4ab5e1f5e5044c4d1596ce2872e5','thePicture','width=369,height=620,status=0,menubar=0'); return false;"><img src="typo3temp/pics/ba7c428ff8.jpg" width="136" height="232" border="0" align="top" alt="" title="" /></a><br /></td>
                      </tr>
                    </table></td>
                  <td valign="top"><div class="csc-textpicHeader csc-textpicHeader-26"><img src="typo3temp/GB/2db93ec7c1.gif" width="291" height="24" border="0" alt="Neuer Hauptkatalog 2005 von test Kabel" title="Neuer Hauptkatalog 2005 von test Kabel" /><br>
                    </div>
                    <!--  Text: [begin] -->
                    <p class="bodytext">Stuttgart, Dezember 2004 </p>
                    
                   
                    <!--  Text: [end] -->
                  </td>
                </tr>
              </table>
              <!--  Image block: [end] -->
              <!--  CONTENT ELEMENT, uid:265/textpic [end] -->
              <!--  CONTENT ELEMENT, uid:514367/text [begin] -->
              <a name="514367"></a>
              <div class="boxtextheadline">Testlink jQuery</div>
              <!--  Text: [begin] -->
              <p class="bodytext"><a class="katalog1" href="http://cms.testgroup.com.dev.local/index.php?id=217#">Öffne Katalog 1</a></p>
              <!--  Text: [end] -->
              <!--  CONTENT ELEMENT, uid:514367/text [end] -->
              <!--  CONTENT ELEMENT, uid:514373/list [begin] -->
              <a name="514373"></a>
              <!--  Plugin inserted: [begin] -->
              <a class="dgp-pageflip-katalog" href="#">link zum Katalog</a>
              <!--  Plugin inserted: [end] -->
              <!--  CONTENT ELEMENT, uid:514373/list [end] -->
            </div>
          </div>
          <!--  CONTENT ELEMENT, uid:264/templavoila_pi1 [end] -->
          <div id="cleargifMain"><img src="fileadmin/templates/clear.gif" width="574" height="1" alt="" border="0" /></div>
        </div>
      </div>
    </div>
    <!-- BORDER COL START -->
    <div class="greyBoxes">
      <div id="cleargifGrey">&nbsp;</div>
    </div>
    <!--TYPO3SEARCH_end-->
  </div>
</div>
<div style="clear:both;"></div>
<div id="footer">
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td><span class="footerItemLeft"><span class="copy">&copy; 2006 by testgroup.com</span><img class="imprintIMG" src="fileadmin/templates/media/icons/imprint.gif" />&nbsp;<a href="index.php?id=17" onfocus="blurLink(this);">Impressum</a></span></td>
      <td><span class="notAffiliated">test Insulator is not affiliated with the test Group.</span></td>
      <td><span class="footerItemRight"><a href="index.php?id=307&amp;no_cache=1&amp;tipUrl=index.php?id=217&amp;no_cache=1" target="_self" class="tipLink">Senden</a></span></td>
      <td><span class="footerItemRightPrint"><a href="index.php?id=217&amp;print=1&amp;no_cache=1&amp;id=217" target="_blank" class="printLink">Druckversion</a></span></td>
    </tr>
  </table>
</div>
<script language="JavaScript" type="text/javascript">
$().ready(function() {
  $('#dgp-pageflip-katalog').jqm({ajax: 'index.php?id=301104', trigger: 'a.dgp-pageflip-katalog'}); //on click  
  return void;
});
</script>
</body>
</html>

Hier der Code der statischen Seite, der überall funzt:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */
  
.jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -300px;
    width: 600px;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
-->
</style>
<script language="javascript" type="text/javascript" src="swfobject.js"></script>
<script language="javascript" type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script language="javascript" type="text/javascript" src="jqModal.js"></script>


</head>

<body>

<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">

<a href="#" class="jqmClose">Close</a>
<hr>
<em>READ ME</em> -->
This is a "v<span class="Stil1">anilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend w</span>alking
through each one to get an understanding of jqModal <em>before</em> using it.

<br />
<div id="pageflip">
                               Bitte laden Sie sich den <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&Lang=German&promoid=BPCKR"><strong>neusten Flash-Player</strong></a> herunter, um unseren Online-Katalog betrachten zu k&ouml;nnen.<br />
                               <a href="swfobject.html?detectflash=false">Flasherkennung &uuml;berspringen &raquo;</a>
                </div>
 
                <script type="text/javascript" language="JavaScript">
                               // <![CDATA[
                               
                               var dgp_so = new SWFObject("photovoltaik_animation_02-01_EN.swf", "Pageflip", "570", "460", "8", "#ffffff");
                               dgp_so.write("pageflip");
                               
                               // ]]>
                </script>     
<br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the <a href="README">documentation</a> too!

<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.</div>
<script language="javascript" type="text/javascript">
$().ready(function() {
  $('#dialog').jqm();
});
</script>
</body>
</html>

Elli · 21.04.2008, 10:46

Ok, kurz und schmerzlos. Habe jetzt swfObject 2.0 getestet und siehe da.
Alles funktioniert einwandfrei