Not working with Internet Explorer...Please Help

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
benjimckinney
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Thu Jul 14, 2011 11:19 pm
Location: United States

Not working with Internet Explorer...Please Help

Post by benjimckinney » Mon Dec 19, 2011 3:04 pm

:'(

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

Concha_Enferma
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Tue Dec 20, 2011 1:58 am

Re: Not working with Internet Explorer...Please Help

Post by Concha_Enferma » Tue Dec 20, 2011 2:30 am

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?

benjimckinney
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Thu Jul 14, 2011 11:19 pm
Location: United States

Re: Not working with Internet Explorer...Please Help

Post by benjimckinney » Tue Dec 20, 2011 2:32 pm

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: Select all

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();

benjimckinney
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Thu Jul 14, 2011 11:19 pm
Location: United States

Re: Not working with Internet Explorer...Please Help

Post by benjimckinney » Tue Dec 20, 2011 6:35 pm

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

benjimckinney
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Thu Jul 14, 2011 11:19 pm
Location: United States

Re: Not working with Internet Explorer...Please Help

Post by benjimckinney » Wed Dec 21, 2011 12:08 am

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_28 ... ex.php[url]

User avatar
strumjan
Joomla! Explorer
Joomla! Explorer
Posts: 451
Joined: Sat Oct 20, 2007 11:21 am
Location: Skopje, Macedonia
Contact:

Re: Not working with Internet Explorer...Please Help

Post by strumjan » Wed Dec 21, 2011 7:15 am

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

benjimckinney
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Thu Jul 14, 2011 11:19 pm
Location: United States

Re: Not working with Internet Explorer...Please Help

Post by benjimckinney » Wed Dec 21, 2011 2:46 pm

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: Select all

<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: Select all

<!--[if !IE]> <-->
was changed to look like this:

Code: Select all

<!--[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.

benjimckinney
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Thu Jul 14, 2011 11:19 pm
Location: United States

Re: Not working with Internet Explorer...Please Help

Post by benjimckinney » Thu Dec 22, 2011 6:09 pm

Okay. The cufon fix is to upgrade the cufon-yui.js file with the one found here:

Code: Select all

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

benjimckinney
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Thu Jul 14, 2011 11:19 pm
Location: United States

Re: Not working with Internet Explorer...Please Help

Post by benjimckinney » Thu Dec 22, 2011 6:41 pm

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: Select all

<param name="wmode" value="transparent" />
so now the custom module for my Flash header looks like this:

Code: Select all

<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


Locked

Return to “Templates for Joomla! 1.5”