Karen writes in with a question: “I’ve tried adding something to my blog, but now my posts are appearing way down in the page, below my sidebar! My website is broken! Help!”
Well Karen, it sounds like the HTML on your site is broken. This sometimes happens when you add something incomplete to the page and this affects everything else. One common complaint is caused by <div>s that aren’t terminated or even mistyping one or more characters in a URL. Here’s one mistake I often make:
<div class="test">This a <a href="http://website/url>Broken link</a></div>
If you look closely at the code above, you’ll notice that the A HREF is missing a closing quote. This causes your browser to think that the rest of the line is actually part of the URL, so the closing <div> doesn’t get parsed; resulting in a skewed page.
One way to check if your HTML is complete is to run it through one of the online validators. A good one is the W3C Validator which checks to make sure everything on your page is as it should be. You can also find another one at Validome which does pretty much the same thing.
The reality is that most browsers are pretty robust and can cope with displaying your page even if your HTML isn’t valid. However, if you page is skewed, the chances are that the DIVs controlling your page layout are broken. One tool I find particularly useful in this case is the Web Developer Toolbar for FireFox. This has an option to display the DIVs on the page you are looking at and you can quickly see which one is broken and thus correct the problem
I hope this help!
Yes, that definitely helps. The validator will make finding the solution to this problem much easier. Thanks so much.
I’ve had that happen to me before, but never knew why, I just have to randomly take things out or add them in to fix it, this is a much better approach.
Another great resource for testing your HTML is browsershots.org, which lets you see how your page looks in different browsers.