...

View Full Version : IE9 issue - Breaking My Web Page



ksrep
05-16-2012, 08:34 PM
I am in desperate need for help as I'm pulling my hair out! I'm pretty sure this is JavaScript related.

I'm incorporating a WordPress header into Opencart. Its pretty basic. I copied the WordPress header source code into the header of the Opencart and all is well in Firefox & Chrome and Safari. In IE however...If you enter the product page through the categories on the left the product page left aligns and breaks...I can't figure this out for the life of me. I tried to debug it with explorers tools but I don't know enough about Java script to understand why its breaking.


Can anyone PLEASE help me on this?!!! My site is http://www.sterlingportable.com/store/

Old Pedant
05-16-2012, 08:49 PM
I entered several product pages on both FireFox and MSIE 9 and *ALL* of them looked identical.

Are you sure you didn't mean MSIE 8 or MSIE 7?

And why would you think this is a JavaScript issue, in any case? It is much much more likely to be a CSS issue.

ksrep
05-16-2012, 09:25 PM
It only left aligns if you enter the product page through the categories on the left. (at least that's what I found) Are you saying it is left aligned in Firefox also? I did not have a problem in Firefox or any other browser. I get a lot of java script errors when the page is loading in IE9 which is why I thought the java-script was conflicting somewhere on the page. I have not tried it on IE7 or 8. I'm assuming they would do the same. Why would it the product page not left align when entering through the featured links, but only when entering through the category links?

Old Pedant
05-16-2012, 09:42 PM
By categories, I assume you mean these:


Categories

Commander Series (2)
Aztec Series (3)
Zeus Series (3)
Apollo Series (3)
Notebooks (3)

And yes, if I click on those in MSIE 9 they do *NOT* "left align" (whatever you mean by that...but I assume you mean that the main content ends up at the left edge...and it doesn't). The appearance is identical to FF and Chrome.

Both LIST and GRID displays look the same in all three browsers.

But, yes, I get the same JavaScript errors in FF and MSIE 9 and Chrome.

Example from MSIE 9:


SCRIPT5009: 'jQuery' is undefined
jquery.prettyPhoto.js?ver=3.1.3, line 8 character 2
SCRIPT5009: 'jQuery' is undefined
superfish.combined.js?ver=1.0.0, line 1 character 2
SCRIPT5009: 'jQuery' is undefined
script.js?ver=1.0, line 8 character 1

and from FF:


jQuery is not defined
...egexS="[\\?&]"+name+"=([^&#]*)";var regex=new RegExp(regexS);var results=regex.e...
jquery...r=3.1.3 (line 81)

jQuery is not defined
....out.apply(f,[g])};var b=function(q){var o=(q.type=="mouseover"?q.fromElement:q....superf...r=1.0.0 (line 1)

jQuery is not defined
jQuery(function($){
script.js?ver=1.0 (line 8)


MSIE also gives this message about the CSS, but that doesn't seem to affect anything:

SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.


So clearly you need to fix the JavaScript code, but so far as I can see, the errors aren't affecting the equality of the displays.

ksrep
05-16-2012, 09:50 PM
Yes I am referring to everything but the header aligning to the left side.

Did you (could you?) try to enter it on more than one occasion. In other words if you enter the Commander Series, click on a unit and enter the product page. Go back out and enter a new one from any category and see if it breaks then. If not I'm completely confused as to why it would only happen to me. Thanks for helping...

Old Pedant
05-16-2012, 11:03 PM
OH! You meant *IF* you click on one of the *PRODUCTS* it misaligns!!!

Yes. Very much so.

If I go back to a category, though, each category looks fine.

But when displaying a single product, you get tons of JS errors in MSIE that you don't get in FF:


SCRIPT5009: 'jQuery' is undefined
jquery.prettyPhoto.js?ver=3.1.3, line 8 character 2
SCRIPT5009: 'jQuery' is undefined
superfish.combined.js?ver=1.0.0, line 1 character 2
SCRIPT5009: 'jQuery' is undefined
script.js?ver=1.0, line 8 character 1
SEC7113: CSS was ignored due to mime type mismatch
stylesheet.css
SCRIPT1002: Syntax error
jquery-1.6.1.min.js, line 1 character 1
SCRIPT1002: Syntax error
jquery-ui-1.8.16.custom.min.js, line 1 character 1
SEC7113: CSS was ignored due to mime type mismatch
jquery-ui-1.8.16.custom.css
SCRIPT1002: Syntax error
jquery.cookie.js, line 1 character 1
SCRIPT1002: Syntax error
jquery.fancybox-1.3.4.pack.js, line 1 character 1
SEC7113: CSS was ignored due to mime type mismatch
jquery.fancybox-1.3.4.css
SCRIPT1002: Syntax error
jquery.fancybox-1.3.4-iefix.js, line 1 character 1
SCRIPT1002: Syntax error
tabs.js, line 1 character 1
SCRIPT1002: Syntax error
common.js, line 1 character 1
SCRIPT5009: '$' is undefined
portable computer, portable pc, lightweight portable, small portable, portable pc, line 472 character 1
SCRIPT5009: '$' is undefined
portable computer, portable pc, lightweight portable, small portable, portable pc, line 475 character 1
SCRIPT5009: '$' is undefined
portable computer, portable pc, lightweight portable, small portable, portable pc, line 510 character 1
SCRIPT5009: '$' is undefined
portable computer, portable pc, lightweight portable, small portable, portable pc, line 555 character 1
SCRIPT1002: Syntax error
jquery-ui-timepicker-addon.js, line 1 character 1
SCRIPT5009: '$' is undefined
portable computer, portable pc, lightweight portable, small portable, portable pc, line 559 character 1

But all of this is perfectly understandable. Your HTML is so illegal it's scary.

You have multiple <head> sections, you have a whole bunch of <div>'s, etc., that appear before you ever have a <body>.

And then, for the JS, you have the include of the jQuery.js file *AFTER* several of the other JS includes (such as jQuery.prettyPhoto.js) the DEPEND on it.

You should include the jQuery.js file *FIRST* of all includes. I'd put it directly after the <head> to be safe, were I you. But that's after you get rid of the duplicate <head>s.

The page is, sorry to say, a real mess. Needs a lot of clean up.

ksrep
05-17-2012, 04:13 PM
Thank you a lot for looking at this. I would never ask you to "fix this mess" but I don't know enough about JavaScript to fix all the errors. Is it possible that you could tell me what you think is making it left align? This is my biggest concern. If I could fix that I could live with some sloppy code. It just isn't functional as it is. ANYTHING you can tell me would be a HUGE huge help. Again, thanks for your help.

Old Pedant
05-17-2012, 10:37 PM
I don't really think it has anything to do with JavaScript, per se.

I think it is just a problem with the *ORDER* your page is put together.

For example, WHY does it have two <head>...</head> sections?

And I really do suspect that simply moving the jQuery.js file include to RIGHT AFTER your <head> (after you fix the page to have only one <head>!!!) will solve the jQuery problems.

I'm guessing that you are using PHP, right? And I'm guessing that you have a PHP include that is incorrectly loading in a complete page which causes the duplicate <head>s.

All you have to do is bring up the page in your browser and then click on the VIEW menu and then on the SOURCE or PAGE SOURCE menu item to see the mess you have now. So just work on reorganizing so that the elements of the page are in the right order and that you don't have duplications (such as two <head>s).

ksrep
05-17-2012, 11:06 PM
It worked. I at least got the page order sorted somewhat better. Thanks for you help. You were correct. It was the page order that in turn caused the stylesheet to be ignored.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum