View Full Version : WTF, messed up coding, batman!

12-18-2007, 12:51 AM
I have a very messed up code in my site. I have NO IDEA how it happened, so therefore I am rather clueless as to what I need to fix.

I'm assuming you guys have a great knowledge of coding, or at least better than mine, so I was hoping you could check it out.

This is my site:


[I will remove it once issue is resolved].

As you can see, the text is..under where it's supposed to be. I stared at the screen for a good 5 minutes with a "BUH?" expression, ahah. Please help!

12-18-2007, 02:13 AM
If something is screwed up, obviously there must be an error in the code or a wrong implementation. Your first thought should be to consult the W3C HTML validator (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fhelpmemeetjoejonas.com%2Findex%2F). The next consultation after you’ve fixed your tremendous amount of errors (and you should always validate against strict rules) should be the W3C CSS validator (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fhelpmemeetjoejonas.com%2Findex%2F).

If it’s still screwed up then, read on semantic HTML (http://brainstormsandraves.com/articles/semantics/structure/) and how to clean up deprecated and/or misused HTML to achieve cross browser compatible website layouts. Due to the fact that Wordpress itself comes with pretty clean, semantic, and valid code by default it kinda hurts me to see it abused so bad.

12-18-2007, 08:50 AM
might i suggest "tidy html" for firefox.

dont use it to clean your code but use it from the top down and figure out one mistake. usually thats all it takes.

12-18-2007, 02:43 PM
Meh, validator generally screams at you when you haven't closed an element anyway.

Personally I never use stuff like HTML Tidy because nothing beats good hand-coding. Getting a computer to do it for you seems wrong, imo--and there's only so far it can go.

12-18-2007, 09:06 PM
Um, okay.

I was hoping someone could check the coding for me. Because like I said, I'm CLUELESS. I would just screw it up worse. Can anyone tell me specifically what is wrong and specifically what should be changed, and what it should be changed to? Thanks.

12-18-2007, 09:36 PM
It pretty much all goes wrong after Line 363, Column 174, where you've not ended a tag. The rest is pretty much all XML parsing errors. Most of the errors are due to using deprecated (X)HTML: font is no longer permitted, the align attribute went boom when CSS was introduced and guy that came up with no borders on HTML tables should probably be shot. A lot of your tags aren't closed, and the embed element never even existed.

All in all, you're just gonna have to learn clean, semantic HTML + CSS properly and throughly, then you're probably gonna have to rebuild it from the bottom up. It's the best idea, in this case.

12-18-2007, 09:51 PM

locate this bit of code
<!-- end sidebar -->and change it to this
<!-- </TD></TR></TABLE> -->
<!-- end sidebar -->

then locate this bit of code which is immediately below it
<div style="width:614px; text-align:left; height:700px;">
<!-- end header -->and change it to this
<div style="width:614px; text-align:left;">
<!-- end header -->
I believe this fixes the issue in IE and Firefox, unless you can point something else out.

12-18-2007, 10:01 PM
We’re certainly here to help but we’re not here to do other peoples’ job. The first help we usually offer is giving advice on how to help yourself.

OK, maybe a simple link to the validator isn’t enough but before you start developing websites you should know what you do anyway (e.g. know what XHTML is and the difference to classic HTML, and what and why to choose one over the other, know what semantic HTML (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html) is and why that’s the key to working websites, etc.).

Here’s a short rundown:

If you are using/writing XHTML:

All tags must be lowercase, i.e. <div> instead of <DIV>
All attribute values must be enclosed by single or double quotation marks, i.e. <div id="example"> instead of <div id=example>
All elements must be properly closed. Elements without an equivalent closing tag should be closed with the shortcut slash, i.e. <br />, <img … />, <input … />, etc. instead of <br>, <img …>, <input … />, etc.
All elements must be correctly nested, i.e. <div><a>text</a></div> instead of <div><a>text</div></a>

These are the most errors you’ve got while the last rule above is the one that usually screws up things in good browsers.

Besides that your code is somewhat of a mess as you’re mixing structural and presentational markup along with deprecated elements. At first you should write strictly conformant markup (a.k.a. (X)HTML strict (http://www.alistapart.com/stories/doctype/)) where things like <font> and <center> are not allowed because these are purely presentational elements that should be replaced by CSS.


HTML is just for the structure, CSS is just for the presentation (layout, colors, position, sizes, etc.)
Tables are not for layout! They should contain and represent tabular data, not create any presentational effects (see point one).

This might all sound a little much at the moment but the thing is: Any kind of fixing we/you would do would just be scratching on the surface while the basic problems of that site continue to exist and will eventually come up again if you’re adding and/or changing anything. So the only real help I am able/willing to give is the one above, i.e. help to help yourself. After you have fixed and cleaned up everything so that the basic issues are out of the way we can take care of little inconsitencies that hinder it from working equally if you need help.