Not working with Internet Explorer...Please Help
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
-
- Joomla! Enthusiast
- Posts: 154
- Joined: Thu Jul 14, 2011 11:19 pm
- Location: United States
Not working with Internet Explorer...Please Help
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
-
- Joomla! Apprentice
- Posts: 15
- Joined: Tue Dec 20, 2011 1:58 am
Re: Not working with Internet Explorer...Please Help
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?
-
- Joomla! Enthusiast
- Posts: 154
- Joined: Thu Jul 14, 2011 11:19 pm
- Location: United States
Re: Not working with Internet Explorer...Please Help
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();
-
- Joomla! Enthusiast
- Posts: 154
- Joined: Thu Jul 14, 2011 11:19 pm
- Location: United States
Re: Not working with Internet Explorer...Please Help
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
Sincerely,
Benji
-
- Joomla! Enthusiast
- Posts: 154
- Joined: Thu Jul 14, 2011 11:19 pm
- Location: United States
Re: Not working with Internet Explorer...Please Help
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]
- strumjan
- Joomla! Explorer
- Posts: 451
- Joined: Sat Oct 20, 2007 11:21 am
- Location: Skopje, Macedonia
- Contact:
Re: Not working with Internet Explorer...Please Help
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.
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
Macedonian translation team
-
- Joomla! Enthusiast
- Posts: 154
- Joined: Thu Jul 14, 2011 11:19 pm
- Location: United States
Re: Not working with Internet Explorer...Please Help
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:
So I took out the "NOT" property in the qualifier so the piece that looks like this:
was changed to look like this:
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.
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>
Code: Select all
<!--[if !IE]> <-->
Code: Select all
<!--[if IE]> <-->
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.
-
- Joomla! Enthusiast
- Posts: 154
- Joined: Thu Jul 14, 2011 11:19 pm
- Location: United States
Re: Not working with Internet Explorer...Please Help
Okay. The cufon fix is to upgrade the cufon-yui.js file with the one found here:
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.
Code: Select all
http://cufon.shoqolate.com/js/cufon-yui.js?v=1.09i
Now to fix the z index or whatever is causing the drop downs to hide behind the Flash header.
-
- Joomla! Enthusiast
- Posts: 154
- Joined: Thu Jul 14, 2011 11:19 pm
- Location: United States
Re: Not working with Internet Explorer...Please Help
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:
so now the custom module for my Flash header looks like this:
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!!
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" />
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>