The Joomla! Forum ™



Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.



Post new topic Reply to topic  [ 9 posts ] 
Author Message
PostPosted: Mon Dec 19, 2011 3:04 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Jul 14, 2011 11:19 pm
Posts: 124
Location: United States
:'(

The website I am building doesn't want to work with Internet Explorer 7, 8 or 9. It does display correctly in Firefox. I thought at first it may be a Mootools issue since I had added MenuCK with Mootools to the site but it looks as though there is something more severe happening! Most of the content does not display and on IE9 the cufon doesn't seem to work (which is used in the drop down navigation menu at top). I am by no means an expert in Joomla or scripting. Can someone please take a look and let me know what I am doing wrong? MANY MANY THANKS!

http://s362502551.onlinehome.us/

Sincerely,
Benji


Top
 Profile  
 
PostPosted: Tue Dec 20, 2011 2:30 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Dec 20, 2011 1:58 am
Posts: 15
Hmm weird.. it seems to load the Fash part alright but the rest under it including the html doesn't.. works fine on Chrome and Firefox for me as well. Does your template have custom scripts for each browser or is it using the same settings for all?


Top
 Profile  
 
PostPosted: Tue Dec 20, 2011 2:32 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Jul 14, 2011 11:19 pm
Posts: 124
Location: United States
There is one IE6 qualifier in the index.php file but it is commented out. Do you think there should be IE8, IE8 and IE9 qualifiers some where? The IE6 qualifier looks like it points to a file in my templates script folder "ie_png.js" (see the code for that below for any clues). Maybe I need to uncomment that? :-\
Code:
var ie_png = {

   ns: 'ie_png',
   
   createVmlNameSpace: function() { /* enable VML */
      if (document.namespaces && !document.namespaces[this.ns]) {
        document.namespaces.add(this.ns, 'urn:schemas-microsoft-com:vml');
      }
      if (window.attachEvent) {
         window.attachEvent('onbeforeunload', function() {
            ie_png = null;
         });
      }
   },
   
   createVmlStyleSheet: function() { /* style VML, enable behaviors */
      /*
         Just in case lots of other developers have added
         lots of other stylesheets using document.createStyleSheet
         and hit the 31-limit mark, let's not use that method!
         further reading: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx
      */
      var style = document.createElement('style');
      document.documentElement.firstChild.insertBefore(style, document.documentElement.firstChild.firstChild);
      var styleSheet = style.styleSheet;
      styleSheet.addRule(this.ns + '\\:*', '{behavior:url(#default#VML)}');
      styleSheet.addRule(this.ns + '\\:rect', 'position:absolute;');
      styleSheet.addRule('img.' + this.ns + '_sizeFinder', 'position:absolute; z-index:-1; top:-10000px; visibility:hidden;'); /* large negative top value for avoiding vertical scrollbars for large images, suggested by James O'Brien, http://www.thanatopsic.org/hendrik/ */
      this.styleSheet = styleSheet;
   },
   
   interceptPropertyChanges: function() {
      var el = event.srcElement;
      if (event.propertyName.search('background') != -1) {
         el.runtimeStyle.cssText = '';
         ie_png.updateVmlFill.call(el);
      }
   },
   
   handlePseudoHover: function(el) {
      var self = this;
      setTimeout(function() { /* wouldn't work as intended without setTimeout */
         self.runtimeStyle.backgroundColor = '';
         self.runtimeStyle.backgroundImage = '';
         ie_png.updateVmlFill.call(self);
      }, 1);
   },
   
   /**
   * This is the method to use in a document.
   * @param {String} selector - REQUIRED - a CSS selector, such as '#doc .container'
   **/
   fix: function(selector) {
      var selectors = selector.split(','); /* multiple selectors supported, no need for multiple calls to this anymore */
      for (var i=0; i<selectors.length; i++) {
         this.styleSheet.addRule(selectors[i], 'behavior:expression(ie_png.fixPng.call(this))'); /* seems to execute the function without adding it to the stylesheet - interesting... */
      }
   },
   
   fixPng: function(isImg) {
      this.style.behavior = 'none';
      if (this.nodeName == 'BODY' || this.nodeName == 'TD' || this.nodeName == 'TR') { /* elements not supported yet */
         return;
      }
      var self = this;
      var lib = ie_png;
      this.isImg = isImg;
      if (this.nodeName == 'IMG') {
         var thisStyle = this.currentStyle;
         this.width = this.clientWidth;
         this.height = this.clientHeight;
         this.borderRect = document.createElement('div');
         var styles = {'backgroundColor':true, 'borderStyle':true, 'borderWidth':true, 'borderColor':true, 'display':true, 'verticalAlign':true, 'width':true, 'height':true, 'zIndex':true};
         for (var s in styles) {
            this.borderRect.style[s] = thisStyle[s];
         }
         this.parentNode.style.zoom = 1;
         this.borderRect.style.backgroundImage = 'url(' + this.src + ')';
         this.borderRect.style.backgroundRepeat = 'no-repeat';
         this.borderRect.style.backgroundPosition = 'center center';
         this.borderRect.style.position = 'absolute';
         this.borderRect.style.left = this.offsetLeft;
         this.borderRect.style.top = this.offsetTop+'px';
         this.parentNode.insertBefore(this.borderRect, this);
         ie_png.fixPng.call(this.borderRect, true);
         this.style.visibility = 'hidden';
         return;
      }
      this.bgSizeFinder = document.createElement('img');
      this.bgSizeFinder.className = lib.ns + '_sizeFinder';
      this.bgSizeFinder.attachEvent('onload', function() {
         lib.updateVmlDimensions.call(self);
      });
      document.body.insertBefore(this.bgSizeFinder, document.body.firstChild);
      this.imgRect = document.createElement(lib.ns + ':rect');
      this.imgFill = document.createElement(lib.ns + ':fill');
      this.colorRect = document.createElement(lib.ns + ':rect');
      this.rects = [this.imgRect, this.colorRect];
      for (var r=0; r<2; r++) {
         this.rects[r].stroked = false;
      }
      this.parentNode.insertBefore(this.colorRect, this);
      this.imgRect.appendChild(this.imgFill);
      this.parentNode.insertBefore(this.imgRect, this);
      
      /* attach handlers */
      var handlers = {'resize': 'updateVmlDimensions', 'move': 'updateVmlDimensions'};
      if (this.nodeName == 'A') {
         var moreForAs = {'mouseleave': 'handlePseudoHover', 'mouseenter': 'handlePseudoHover', 'focus': 'handlePseudoHover', 'blur': 'handlePseudoHover'};
         for (var a in moreForAs) {
            handlers[a] = moreForAs[a];
         }
      }
      for (var h in handlers) {
         this.attachEvent('on' + h, function() {
            lib[handlers[h]].call(self);
         });
      }
      this.attachEvent('onpropertychange', lib.interceptPropertyChanges);
      
      /* set up element */
      setTimeout(function() {
         lib.updateVmlFill.call(self);
      }, 1);
   },
   
   updateVmlFill: function() {
      var thisStyle = this.currentStyle;
      if (thisStyle.backgroundImage) {
         this.colorRect.style.zIndex = thisStyle.zIndex;
         this.imgRect.style.zIndex = thisStyle.zIndex;
         var giveLayout = function(el) {
            el.style.zoom = 1;
            if (el.currentStyle.position == 'static') {
               el.style.position = 'relative';
            }
         };
         giveLayout(this);
         giveLayout(this.parentNode);
         var bg = thisStyle.backgroundImage;
         bg = bg.split('"')[1];
      }
      if (this.src) {
         var bg = this.src;
      }
      if (thisStyle.backgroundImage || this.src) {
         this.bgSizeFinder.src = bg;
         this.imgFill.src = bg;
         this.imgFill.type = 'tile';
      }
      this.colorRect.filled = (thisStyle.backgroundColor != 'transparent');
      this.colorRect.fillColor = thisStyle.backgroundColor;
      this.runtimeStyle.backgroundImage = 'none';
      this.runtimeStyle.backgroundColor = 'transparent';
   },
   
   /* IE can't figure out what do when the offsetLeft and the clientLeft add up to 1, and the VML ends up getting fuzzy... so we have to push/enlarge things by 1 pixel and then clip off the excess */
   updateVmlDimensions: function() {
      var thisStyle = this.currentStyle;
      var size = {'W':this.clientWidth+1, 'H':this.clientHeight+1, 'w':this.bgSizeFinder.width, 'h':this.bgSizeFinder.height, 'L':this.offsetLeft, 'T':this.offsetTop, 'bLW':this.clientLeft, 'bTW':this.clientTop};
      var fudge = (size.L + size.bLW == 1) ? 1 : 0;
      if (size.W >= document.body.clientWidth) {
         size.W = document.body.clientWidth - 1;
      }
      for (var r=0; r<2; r++) {
         this.rects[r].style.width = size.W + 'px';
         this.rects[r].style.height = size.H + 'px';
         this.rects[r].style.left = (size.L + size.bLW - 1) + 'px';
         this.rects[r].style.top = (size.T + size.bTW - 1) + 'px';
      }
      var bg = {'X':0, 'Y':0};
      var figurePercentage = function(axis, position) {
         var fraction = true;
         switch(position) {
            case 'left':
            case 'top':
               bg[axis] = 0;
               break;
            case 'center':
               bg[axis] = .5;
               break;
            case 'right':
            case 'bottom':
               bg[axis] = 1;
               break;
            default:
               if (position.search('%') != -1) {
                  bg[axis] = parseInt(position)*.01;
               }
               else {
                  fraction = false;
               }
         }
         var horz = (axis == 'X');
         bg[axis] = Math.ceil(fraction ? ( (size[horz?'W': 'H'] * bg[axis]) - (size[horz?'w': 'h'] * bg[axis]) ) : parseInt(position));
         if (bg[axis] == 0) {
            bg[axis] = 1;
         }
      };
      for (var b in bg) {
         figurePercentage(b, thisStyle['backgroundPosition'+b]);
      }
      this.imgFill.position = (bg.X/size.W) + ',' + (bg.Y/size.H);
      var bgR = thisStyle.backgroundRepeat;
      var dC = {'T':1, 'R':size.W+fudge, 'B':size.H, 'L':1+fudge}; /* these are defaults for repeat of any kind */
      var altC = { 'X': {'b1': 'L', 'b2': 'R', 'd': 'W'}, 'Y': {'b1': 'T', 'b2': 'B', 'd': 'H'} };
      if (bgR != 'repeat') {
         var c = {'T':(bg.Y), 'R':(bg.X+size.w), 'B':(bg.Y+size.h), 'L':(bg.X)}; /* these are defaults for no-repeat - clips down to the image location */
         if (bgR.search('repeat-') != -1) { /* now let's revert to dC for repeat-x or repeat-y */
            var v = bgR.split('repeat-')[1].toUpperCase();
            c[altC[v].b1] = 1;
            c[altC[v].b2] = size[altC[v].d];
         }
         if (c.B > size.H) {
            c.B = size.H;
         }
         this.imgRect.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)';
      }
      else {
         this.imgRect.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)';
      }
      if (this.isImg) {
         dC.R++;
         dC.B++;
      }
      this.colorRect.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)';
   }
   
};
ie_png.createVmlNameSpace();
ie_png.createVmlStyleSheet();


Top
 Profile  
 
PostPosted: Tue Dec 20, 2011 6:35 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Jul 14, 2011 11:19 pm
Posts: 124
Location: United States
Anybody know anything about CSS or other qualifiers for IE7, IE8 and IE9??? It seems like everything from my Flash header down has been disabled by the IE browser on the home page. The IE9 browser isn't processing the Cufon replace code properly either (most likely because there are Cufon statements that fall below where it is cutting off as well) however, if you click the little "Compatibility View" icon in the browser's address bar, the cufon works but everything below the Flash is still not working. You can click on "About Us" page and see that if the Flash is not present on the page, the other content shows up fine (as long as the "Compatibility View" is activated. Someone please help me! I would hate to scratch this template and start over on this project! Thank you for any helpful input.

Sincerely,
Benji


Top
 Profile  
 
PostPosted: Wed Dec 21, 2011 12:08 am 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Jul 14, 2011 11:19 pm
Posts: 124
Location: United States
Okay I have tried to disable the flash module to see what would happen. Everything else shows up on the page but all the text (including the top nav text) that is using cufon still does not appear! I'm not sure what else to do. This was a purchased template and the original on Template Monster works in Internet Explorer! I did change the source flash document just to replace color choice but this shouldn't have affected the overall file...or does it? Take a look at the template on template monster: [url]http://osc4.template-help.com/joomla_28209/index.php[url]


Top
 Profile  
 
PostPosted: Wed Dec 21, 2011 7:15 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Sat Oct 20, 2007 11:21 am
Posts: 373
Location: Skopje, Macedonia
Your site work for me perfect in IE8, also test in IE7 it's OK and even in IE6 it's OK and show extra field with warning for newer version of browser.
Seems, you have problem only with IE9. In IE9, in tester, for me shows all content and flash, but not background (black part and grey part, everything is white) and not showing right modules before and after Main Menu.
Same pictures I have for from you provided link from original.
So, see, if that template is compatible with IE9, and try to debug in CSS problem with right module position.

_________________
Joomla.mk
Macedonian translation team


Top
 Profile  
 
PostPosted: Wed Dec 21, 2011 2:46 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Jul 14, 2011 11:19 pm
Posts: 124
Location: United States
Yes. I had found a qualifier in the templates flash module that was breaking the code in Internet Explorer. The HTML code for the particular module element looked like this:

Code:
<div class="flash1">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="975" height="290" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24">
<param name="movie" value="images/stories/header_v8.swf" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="scale" value="noscale" /> <!--[if !IE]> <-->
<object width="975" height="290" data="images/stories/header_v8.swf" type="application/x-shockwave-flash">
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="scale" value="noscale" />
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" /> FAIL (the browser should render some flash content, not this).
</object>
<!----> <!--[endif] -->
</object>
</div>


So I took out the "NOT" property in the qualifier so the piece that looks like this:

Code:
<!--[if !IE]> <-->


was changed to look like this:

Code:
<!--[if IE]> <-->


This seems to have fixed the issue with IE7 and IE8. The MenuCK z index needs to be adjusted because it is hiding behind the Flash component but those browsers are working as needed. NOW IE9 is showing everything correctly but is not working with the Cufon. So the text in the navigation and on page will not show up unless you turn on the version compatibility - then everything works. There must be something wrong with where IE is reading the Cufon script???

Anybody else running IE9 can take a look? ???

@strumjan Thanks for reviewing the issue. I think a simulated version of IE9 might behave differently than the actually browser running live on a machine.


Top
 Profile  
 
PostPosted: Thu Dec 22, 2011 6:09 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Jul 14, 2011 11:19 pm
Posts: 124
Location: United States
Okay. The cufon fix is to upgrade the cufon-yui.js file with the one found here:
Code:
http://cufon.shoqolate.com/js/cufon-yui.js?v=1.09i


Apparently IE9 does not like the old cufon-yui.js v1.09 - I've read something about Cufon depending on other java loaded engines and IE9 apparently does not like the scripts sharing engines...blah blah blah...something like that. Anyway, I replaced that cufon script and the font works nicely.

Now to fix the z index or whatever is causing the drop downs to hide behind the Flash header. :pop


Top
 Profile  
 
PostPosted: Thu Dec 22, 2011 6:41 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Jul 14, 2011 11:19 pm
Posts: 124
Location: United States
FIXED! The z-index for my MenuCK module was set pretty high within the module parameters but the menu was still dropping behind the Flash. The template I am working with uses a custom module to embed and style the flash (as seen above). But when I set the z-index to 1 in the style sheet for my Flash div style, I got no change.

So then I investigated the forum a little more and found that a lot of people were talking about wmode. Most of them had used plugins to embed their Flash and simply needed to change the wmode to transparent in the corresponding module parameters or within their embed {}. However, I did find someone that suggested setting a parameter so this is what I added to my Flash HTML custom module:

Code:
<param name="wmode" value="transparent" />


so now the custom module for my Flash header looks like this:

Code:
<div class="flash1">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="975" height="290" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24">
<param name="movie" value="images/stories/header_v8.swf" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="scale" value="noscale" /> <!--[if IE]> <-->
<object width="975" height="290" data="images/stories/header_v8.swf" type="application/x-shockwave-flash">
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="scale" value="noscale" />
<param name="wmode" value="transparent" />
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" /> FAIL (the browser should render some flash content, not this).
</object>
<!----> <!--[endif] -->
</object>
</div>


Not sure why the template author didn't just use a Flash Embed plugin but I don't intend on adding any other Flash to the site so I'm fine with leaving it. Thanks to everyone who tried to help me fix this issue and to all the Joomla members who continually contribute to this great forum and software!! :D


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 9 posts ] 



Who is online

Users browsing this forum: No registered users and 23 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group