Layout problems in IE 8 and 9 WordPress
- SOLVED
Okay, this may not be the best way to handle this situation, but since I've already paid for this question, this seems like the best route.
I solved my original question below in the 10 minutes that elapsed while waiting for a reply to this question, but I do have one layout problem remaining in IE 8 that I'd love some help with:
Below the video and sign up form at the top of the site, I'm missing a bottom border in IE 8 and 9.
It's actually way up behind the video, below the heading (and behind the text) of the sign up form.
Here's a view of it in IE 8:
http://screencast.com/t/EYsAgTAMN
Here's the way it's supposed to look:
http://screencast.com/t/uxU3YuatQIL
Here's a link to the site:
http://techhusband.com/
Thank you for any help with this.
Cheers,
Forest
-----------------
<strong>This was my original question, which I solved while waiting for an answer. I'm leaving it up to not cause confusion in this thread:</strong>
I thought I had this site all nice and dandy in IE, but something has changed and it's a mess in IE 7, 8 and 9.
The site is live and traffic is going to it, so the fire alarms are going off right now. Ugh.
I have a feeling it's just one or two things that's causing the layout to get pushed around in a bad way, and I could use some help fixing this.
I think the width of some element is causing all this in IE, but am not sure.
My main menu has lost all it's background in IE too. Man...this is tangled up.
Here's a link to the site:
http://techhusband.com/
It appears to be fine in all other browsers except IE.
In IE Tester, for IE 7, it's not even loading. I get an error that says " 'u.body' is null or not an object".
u.body seems to be part of the third-party.js file, which is a file of my theme (Beveled from WooThemes.)
Here is the full error details:
'u.body' is null or not an object
third-party.js line: 92
Code: 0 Character: 1457
URI: http://techhusband.com/wp-content/themes/beveled/includes/js/third-party.js?ver=3.3.1
I was having trouble with the site crashing IE 7 last week, and got a suggestion from someone here to fix it, which involved changing the order of the call to the respond.js file, which is a media query for IE, and which is inside this third-party.js file.
I moved a call to a css file with a media tag after the call to the respond.js file.
That fix worked and kept the site from crashing IE. Not sure if that is related.
The site was loading fine in IE 7 just a couple days ago.
Thank you for any help with this.
Cheers,
Forest
Answers (3)
Mik Geo answers:
You should try to include IE9.js from http://code.google.com/p/ie7-js/
at the bottom of your webpage before </body>
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
Forest Linden comments:
Hi Mik,
thank you.
Before your answer came through, I found what was causing it.
I had commented out the entire contents of the theme.js file in an attempt to remove some calls to some javascript that I'm not using in the theme.
For some reason, that caused everything to get borked on the site.
I uncommented the contents of that file and things are back to normal in IE, save for one issue.
Since I don't need help with the original question at the moment, I'm going to edit my original question with the the bit of help I need after getting things mostly back to normal.
Thank you for your help :)
idt answers:
Hi,
Just checked your site, it is loading fine now on IE9. It was messed up a while ago.
Did you change something?
Thanks,
idt
idt comments:
Was it the extra <!----> before doctype that was causing the issue?
Forest Linden comments:
hi idt,
yes, I found the cause of the problem while I was waiting for an answer and was editing my question when the answers started coming through.
Can't type fast enough to keep up with you guys!
About to edit my original question right now...
Thank you!
idt comments:
Cool. Glad you had it sorted out. I noticed that when the site was messed up, it has this <!----> before doctype tag. It's gone now that it's working fine.
Forest Linden comments:
yeah, that was my comment syntax in the theme-js.php file...an attempt to not have three javascript files load that I'm not using.
Apparently me doing that messed up some things in IE.
Geez. Glad it was only like that for a couple hours before I noticed it.
Embarrassing.
If you have a moment, and if you have any insight about the edited original question, I'd love your input. :)
Check the top of my original question to see the remaining layout issue in IE 8.
Thanks a ton,
Forest
idt comments:
Two way you can do it, you can either put height to to slider-container .slider-container { height: 320px } or you can add <div style="clear: both;"></div>after the closing </div> of sign-up div.
Forest Linden comments:
Thank you, idt!
And thus continues my habit of learning CSS the hard way (when things break.)
Appreciate the help with this ;)
Forest
Duncan O'Neill answers:
Hi Forest,
fwiw, this is what I'm getting in IE7;
SCRIPT438: Object doesn't support property or method 'addEventListener'
E-v1,iframe-v1.js?1328284742, line 1 character 26510
This page seems to give a fix;
[[LINK href="http://www.codingforums.com/archive/index.php/t-98826.html"]]http://www.codingforums.com/archive/index.php/t-98826.html[[/LINK]]
There is a function posted by a member there, which you may be able to use, as follows;
function addEvent(obj,type,fn) {
if (obj.addEventListener) {
obj.addEventListener(type,fn,false);
return true;
} else if (obj.attachEvent) {
obj['e'+type+fn] = fn;
obj[type+fn] = function() { obj['e'+type+fn]( window.event );}
var r = obj.attachEvent('on'+type, obj[type+fn]);
return r;
} else {
obj['on'+type] = fn;
return true;
}
}
This page: [[LINK href="http://stackoverflow.com/questions/1695376/msie-and-addeventlistener-problem-in-javascript"]]http://stackoverflow.com/questions/1695376/msie-and-addeventlistener-problem-in-javascript[[/LINK]] also gives a solution you may be able to use.
As for the issue of styles, there is one glaring error, which creates horizontal scrollbars, and is an easy fix.
The relevant style is at [[LINK href="http://techhusband.com/wp-content/themes/beveled/style.css"]]http://techhusband.com/wp-content/themes/beveled/style.css[[/LINK]]
On line 394, just replace
#header-wrap, #content-wrap, #footer-wrap {
margin: 0 -20px;
padding: 0 20px;
}
with
#header-wrap, #content-wrap, #footer-wrap {
margin: 0 0;
padding: 0 20px;
}
hth,
Forest Linden comments:
Hi Duncan,
thanks much for this.
You're seeing horizontal scrollbars in IE?
I'm not seeing those over here right now.
Thank you for the fix on that.
Before I try that fix, I want to confirm that you're still seeing horizontal scroll bars. I'll check the site with browsershots and see if they show up in IE from there, because I'm not seeing them.
Thank you!
Forest Linden comments:
Bummer. I see it now. And it's not just IE that has them.
...and you're fix worked great!
Thank you for catching that.
I was in such a rush to put out the major fire with the site being mangled in IE earlier that I didn't see the horizontal scroll bar in all the browsers.
Sheesh.
Nice catch.
Cheers,
Forest
p.s. I'll see if I can change my vote for the allocation of money for this question to send some your way :)