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?

Recommended Answers

All 14 Replies

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?

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.

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.

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).

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.

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.

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

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!

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!

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).

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?

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?

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.

});
commented: Nicely done +7

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

Thank you so much!

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

Thank you so much!

Glad I could help :)

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

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

IE5.0? wow, I don't think there are many of those around.

Do you get any error messages in IE5.0? Or is the page just blank?

IE5.0? wow, I don't think there are many of those around.

Do you get any error messages in IE5.0? Or is the page just blank?

Well, I think it's just blank--on the online check it just didn't come up as a page (was taking a *really* long time, basically, and I think it never would have come up).

I guess there aren't many out there, but I'd love to just be able to be seen by my friend through that browser at least! And I really was aiming for total visibility, also for very old browsers, because I know there are folks out there who have them...

Well, I think it's just blank--on the online check it just didn't come up as a page (was taking a *really* long time, basically, and I think it never would have come up).

I guess there aren't many out there, but I'd love to just be able to be seen by my friend through that browser at least! And I really was aiming for total visibility, also for very old browsers, because I know there are folks out there who have them...

I can't see anything wrong with your HTML at all.

You can't really target all browsers, especially old ones. If you do so, you would be limiting the site in newer ones. (But its really your personal decision and target audience as that is just a general statement).

IF you want to see what your site looks like in different browsers then try the service:
http://browsershots.org/

It will give you screenshots of how your site looks. Hopefully they support IE5.0. Otherwise, try browsercam but its a paid service.

Member Avatar for langsor

First, please start your own thread and not ask a new problem in an existing thread ... you will likely get a much better response to your question.

Second, I develop websites and try to make them backwards-fowards-and sideways compatible but IE 5 is such an old and out-of-date browser that I don't even think about it when designing sites. It's time for your friend to update her browser and for you not to worry about your site being compatible with older browsers -- just my two cents.

Here's where you can go to see if you HTML and CSS is compliant (not that compliant code works in all the latest browsers either eg. IE) but it's a good place to start anytime you have concerns about your site design and coding standards.

http://jigsaw.w3.org/css-validator/

http://validator.w3.org/

I think that IE 5 might not recognize your style of CSS file include... I'm not sure but I think that came around IE 6 -- but that's just a guess. Also CSS wasn't as fully developed in the IE 5 days.

Good luck

[edit]Sorry, I entirely missed page 2 of this thread until I posted my own response ... [/eidt]

Thank you--the sites for checking my code and css are very helpful, and I didn't know about the validator.w3.org site at all! I think I have to learn more about the differences between html/xhtml etc. But I feel like I made a start, and added a (more) proper heading. I'm not going to worry too much about IE 5.0, but I do want the most accessibility I can reasonably manage.

I almost started a new thread, but I wasn't sure. I will in future.

Thank you!!:)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.