DaniWeb IT Discussion Community - Problems with browser compatibility.. especially internet explorer

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - Problems with browser compatibility.. especially internet explorer (http://www.daniweb.com/forums/thread114576.html)

Problems with browser compatibility.. especially internet explorer

Hello..

I musy apoligize in advance for this, since this thread will be pretty much dedicated to my website, but hopefully if anyone has any tips or solutions on how to debug HTML, Javascript and CSS, others will find useful information here.

My problem is simple. My website does not run on all browsers. It works fine on firefox, internet explorer USED to show it, but since using more scripts, now you can't even view it at all.

Currently it utilizes HTML, CSS, Javascript, PHP, XML, and Flash. HTML and CSS are used for the layout, PHP for the subcontent of each page, Javascript for text effects and the date/time, Flash for music players and image viewers.

Image formats used are .gif, .jpg and .png, the latter of which I prefer over the others for it's high resolution and uncompressed colour.

I am a little disappointed, since the website looks great, and I have learned a lot developing it, but I have obviously not designed it to WC3 standards. I have used dreamweaver for the entire project, with the assistance of many web developer sites.

If anyone would like to view the website and have a look at my (sloppy?) code to make some constructive criticism, the website is the same as my username (+ .org)

Some questions first though:
1) With such a complex website, is it better to stick to one dynamic language, such as PHP, instead of using a mish mash of code? if so then...

2) are there any programs that can make converting a website entirely into PHP possible?

3) Is it unadvisable to use multiple javascript codes? Is is possible to merge scripts within <script></script> tags?

3) Can anyone suggest programs that I can use to debug my website?

Re: Problems with browser compatibility.. especially internet explorer

Quote:

Originally Posted by hyperoctave (Post 563969)

Hello,

You have a very nice website. :)

I believe the reason your site isn't showing up in IE is that you have nested <html> tags in side your HTML. There should only be one set of <html> tags, they should be the opening and closing <html> tags.

It may be that you are including files in PHP, using the include(), or require() functions and the files being included have <html> tags in them.

Another common reason for IE to abort() the display of a site is if you have JavaScript that makes changes to the DOM (Document Object Model) while the DOM is still loading, or right after it has loaded.

Quote:

1) With such a complex website, is it better to stick to one dynamic language, such as PHP, instead of using a mish mash of code? if so then...

PHP is server-side code. The other code on your website is client-side code, which runs in the browser.

The server side code generates the browser side "code" such as HTML, JavaScript, Flash, etc.

I don't think there is anything wrong with the mix of languages you're using right now. They serve their different purposes well. Flash streams audio/video best, JavaScript is great for non-obtrusive user interface design, and HTML is the standard markup language of the web that binds all the client side scripting together.

Quote:

2) are there any programs that can make converting a website entirely into PHP possible?

I believe your website is entirely PHP on the server side. You cannot have PHP as your client side language (for the browser).

Quote:

3) Is it unadvisable to use multiple javascript codes? Is is possible to merge scripts within <script></script> tags?

There is nothing wrong with having a few <script> tags in your HTML. If you have a bloated number of <script> tags then it is good to move it to a separate file.

I usually keep the following in mind when adding <script> tags to HTML:

a) Separation of design and logic (unobtrusive scripting)
b) Optimized pages (faster loading pages).

These two in themselves are quite broad topics and there are a lot of variables, arguments involved.

In general, having your javascript in separate files (or a single separate file) increases code reuse, and makes it easier to understand and maintain your website as well as speed up your site download times.

Quote:

4) Can anyone suggest programs that I can use to debug my website?

If you're debugging the server side PHP, then its good to turn on all error reporting in PHP. This is done in your PHP.ini file, or in your PHP code with:

error_reporting(E_ALL);

show_errors(1);

If you're debugging your JavaScript on the client side, then you should try installing the Firebug Extension for Firefox.

Re: Problems with browser compatibility.. especially internet explorer

thanks a lot! Lots of useful information there.. Appreciation! :-)

Re: Problems with browser compatibility.. especially internet explorer

thanks for the comments and advice. I had installed Firebug soon after posting the original queries, and there doesn't seem to be any javascript errors that really affect the website a great deal, so I shall take your advice and edit out the <html> tags from the subcontent pages that the PHP include() tags are requesting..

Thanks for your help. Greatly appreciated!

Re: Problems with browser compatibility.. especially internet explorer

Quote:

Originally Posted by hyperoctave (Post 565621)

You're welcome.

Also, for PHP debugging, take a look at: http://xdebug.org/

Xdebug is a PHP extension. Once installed it will generate debugging information and log files of this info.

You can use the functions of Xdebug directly in your PHP, or even just make use of the "better" error reporting it creates.

If you want to view the Xdebug logs in a graphical interface, then you can download and install:

KCacheGrind, http://kcachegrind.sourceforge.net - nix
WinCacheGrind, http://sourceforge.net/projects/wincachegrind/ - win

depending on your system running PHP.

Dreamweaver is a great editor, but I'd recommend also looking into Aptana (Eclipse based).

Re: Problems with browser compatibility.. especially internet explorer

excellent.. looks very useful..

I did what you suggested and removed unneccesary <html> tags from the sub pages. I agree that this is definitly good practice - double code can't be good..

However, I think I have discovered the source of my problem here. It looks like the swfobject.js is causing IE to cancel viewing the pages. This is pretty crucial, since it is the script for the music player!

Debugging, it says :

Warning 5002 variable "key" already defined
The variable name was already used inside this function.

Warning 5006 exception handling is not supported in some browsers
Internet Explorer 5.0 and later implements exception handling, but Netscape 4.7 and earlier does not.

Warning 5002 variable "axo" already defined
The variable name was already used inside this function.

these errors are duplicated a couple of times, but all refer to line 8 in swfobject.js

A similar error is found (only when debugging in IE - again, firefox is fine) in the fade.js, which is a text effect (hover over red, then fades back to white) - it says :

Warning 5002 variable "i" already defined
The variable name was already used inside this function.

referring to lines 118 and 143.

The annoying thing is that these two scripts have been taken from reputable javascript source websites.

I could remove these scripts from the website, but this would be really detrimental to the design and sound of the site..

Any suggestions?

Re: Problems with browser compatibility.. especially internet explorer

Quote:

Originally Posted by hyperoctave (Post 565903)

Did you remove the SWFObject code? Looks like the site is loading in IE6.

What may be happening with the SWFObject is what I mentioned before, the DOM is being manipulated before it has completely loaded, or just after loading.

The correct way to do this would be to have your SWFObject code invoked after the DOM has loaded using the window.onload event.

window.onload = function() {



// place your swfobject code in here..





};

Or you can have multiple event listeners registered for the window.onload function like:

function registerWinOnloadListener(fn) {

if (typeof(window.onload) == 'function') {

var old = window.onload;

window.onload = function() {

fn();

old();

};

} else {

window.onload = fn;

}

}



registerWinOnloadListener(function() {



// first swfobject code



});



registerWinOnloadListener(function() {



//next swfobject code.. etc.



});

Re: Problems with browser compatibility.. especially internet explorer

you are a genius! that was the problem!
Fixed now.. I have learnt something new today!

Thank you so much!

Re: Problems with browser compatibility.. especially internet explorer

Quote:

Originally Posted by hyperoctave (Post 565916)

you are a genius! that was the problem!
Fixed now.. I have learnt something new today!

Thank you so much!

Glad I could help :)

Re: Problems with browser compatibility.. especially internet explorer

I was wondering, if anyone's still out there, whether you could help me with a related problem... I have an extremely simple (I think!) website, but my friend has reported that she can't pull it up with IE 5.0

I did a browser check online, and it seems as though IE and a few other minor browsers just don't pull up my site at all. I'm not sure what I've done wrong; it's possible that I duplicated <html> tags, but not likely since I don't have a ton of code...

The site is www.jerise.com

Any help very welcome!

--G