...

View Full Version : Website Display Issues



TheDJ
08-05-2011, 01:26 AM
Hello,

Today I decided to view one of my websites,
how-to-sing.net in Google Chrome just to see how it looked. And to my surprise everything was jumbled up. None of the design was there, it appeared as if it had been hit by a nuclear bomb.

My website displays fine in Firefox and Opera, but Chrome and Internet Explorer both have the same issue. I asked my host if they had suggestions and they basically said look elsewhere.

Is there any way to debug this? I'm using Wordpress for my CMS and Clouflare as a CDN.

Any help would be appreciated.

Thanks!

VIPStephan
08-05-2011, 02:59 AM
Well, you could start by fixing the mark-up errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fhow-to-sing.net%2F).

TheDJ
08-05-2011, 04:05 AM
Well, you could start by fixing the mark-up errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fhow-to-sing.net%2F).

Thanks for the response. However, I have looked at those errors and almost all of them related directly to wordpress code that came right out of the box. I don't think I will mess with them because I have not touched the code in those areas at all.

Any other suggestions?

alykins
08-05-2011, 05:29 AM
Thanks for the response. However, I have looked at those errors and almost all of them related directly to wordpress code that came right out of the box. I don't think I will mess with them because I have not touched the code in those areas at all.

Any other suggestions?

these errors are not "in relation to wordpress" they are in relation to your page and it's layout. One of the lines actually says that a lot of times the error is due to incorrect usage of the doctypes



You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary


i do not know if it is bc of the strict or not (because i never leave text randomly placed on the page) but almost all of your errors of "char" 's are because you have them not in anything.. no div, no <p>, nothing... also (could be wrong on this one) but to the best of my knowledge you can only ever have one <form> set... I would go through and change your doctype to transitional, contain all of your text characters within <p>'s or <div>'s and also (to eliminate another issue) move to pure CSS styling (there is a "border" attribute thrown somewhere in that validation list)... also language="javascript" is not the current... semantic? practice? it is now type="text/javascript" and if you find a script "snippet" with language=javascript it is probably really outdated

Lerura
08-05-2011, 05:32 AM
To me, the page looks exactly the same, in all the browsers.

alykins
08-05-2011, 05:47 AM
To me, the page looks exactly the same, in all the browsers.

after reading this...
agreed looks same for me in all browsers save IE7... and only the background image of the wrapper? (didn't look to see what it was exactly) shifts... have you cleared ur cache? but still i would change your doc type and so on... it would help make ur site validate

TheDJ
08-05-2011, 05:49 AM
these errors are not "in relation to wordpress" they are in relation to your page and it's layout. One of the lines actually says that a lot of times the error is due to incorrect usage of the doctypes



i do not know if it is bc of the strict or not (because i never leave text randomly placed on the page) but almost all of your errors of "char" 's are because you have them not in anything.. no div, no <p>, nothing... also (could be wrong on this one) but to the best of my knowledge you can only ever have one <form> set... I would go through and change your doctype to transitional, contain all of your text characters within <p>'s or <div>'s and also (to eliminate another issue) move to pure CSS styling (there is a "border" attribute thrown somewhere in that validation list)... also language="javascript" is not the current... semantic? practice? it is now type="text/javascript" and if you find a script "snippet" with language=javascript it is probably really outdated

Thanks for the breakdown. I do admit that there are some areas that I could change, but all of the <p> issues that you have mentioned are not my fault. My Wordpress theme's features do not accept <p> tags, I have to use its custom tags that define a paragraph. The only tags that I can think of off of the top of my head that are the same are strong, emphasize, and underline. :(

I ended up fixing the issue by disabling all minifying and combining of css/js files. Apparently my wordpress theme does not agree with minifying, even though I thought I had debugged it before.

This is unfortunate because using minify drastically decreases page load times. I will have to do some extensive testing for the other browsers if I want to start using it again.

Thanks for the help everyone!

VIPStephan
08-05-2011, 11:00 AM
also (could be wrong on this one) but to the best of my knowledge you can only ever have one <form> set...

Well, you are right with one thing at least: You are wrong. You can have as many forms on your site as you like.


I would go through and change your doctype to transitional […]

No, no! Please don’t just change the doctype to “transitional” without knowing what you do. Just for a little background: The transitional doctype was only intended so that websites using old, non-standard HTML could be transitioned into modern, standards compliant websites without rewriting the whole thing at once. It is clearly not intended so that you can write invalid code and put a “valid” sign on it because it lets slip through non-standard attributes. New websites should always have a strict doctype (or an HTML 5 doctype where the difference isn’t existing anymore and everything is “strict”).


[…] contain all of your text characters within <p>'s or <div>'s […]

Yeah, well, just to clarify: Don’t just use p and div randomly. The paragraph element is only meant to designate an actual paragraph (http://en.wikipedia.org/wiki/Paragraph). If you have single lines of text or other sections/divisions (like in a form) then divs or spans are more appropriate (depending on whether it’s supposed to be inline or block-level content).


[…] also language="javascript" is not the current... semantic? practice?

“Standard” would be the right word. This has nothing to do with semantics (“meaning”), and neither has it do do with good or bad practice but rather with plain standard specifications by the W3C. And according to these the language attribute is deprecated.

So, I didn’t mean to show you up, I just felt the need to clarify so when someone else comes across this they don’t get off on the wrong foot.

alykins
08-05-2011, 05:28 PM
..........

So, I didnít mean to show you up, I just felt the need to clarify so when someone else comes across this they donít get off on the wrong foot.

no no, i do not see as "showing up" I like to be corrected as to not pass on incorrect information. Thank you :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum