Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    14
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Website Display Issues

    Hello,

    Today I decided to view one of my websites,
    Code:
    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!
    Last edited by TheDJ; 08-05-2011 at 12:26 AM. Reason: spelling mistake

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Well, you could start by fixing the mark-up errors.

  • Users who have thanked VIPStephan for this post:

    TheDJ (08-05-2011)

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    14
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Well, you could start by fixing the mark-up errors.
    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?

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,711
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by TheDJ View Post
    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    TheDJ (08-05-2011)

  • #5
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    To me, the page looks exactly the same, in all the browsers.

  • Users who have thanked Lerura for this post:

    TheDJ (08-05-2011)

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,711
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by lerura View Post
    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    14
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    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!

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Quote Originally Posted by alykins View Post
    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.

    Quote Originally Posted by alykins View Post
    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”).

    Quote Originally Posted by alykins View Post
    […] 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. 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).

    Quote Originally Posted by alykins View Post
    […] 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.

  • Users who have thanked VIPStephan for this post:

    alykins (08-05-2011)

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,711
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by VIPStephan View Post

    ..........

    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •