I hate to agree with you, but I think you’re right. There are quite a few errors in your code. There are tags that aren’t closed properly and you have certain tag attributes that you have formulated as tag etc.
This is all meant as constructive criticism. But I’m sure you can take it seeing that you call your own code rubbish.
Your header is missing a DTD (document type declaration) If you want browsers render your code properly you’ll have to add one at the top of your header.php file. If you decide to use a WYSIWYG HTML editor, then use Dreamweaver. If you can’t afford it use HTML-Kit which is free. don’t use Frontpage or Expression Web from Microsoft as they generate much more code than needed and they include a lot of Microsoft code that isn’t standardized and is only visible in Internet Explorer.
Both Dreamweaver and HTML-Kit will generate proper formulated DTD’s for you.
If you want to make web design easy for yourself, learn this lesson: Use (X)HTML to define the content and not for layout or design. Create the design and layout with CSS. If you learn to separate the content from the presentation you will save yourself many many hours of coding when you decide to change the design of your site and/or add content to it. You are using tables for layout purposes and that robs you of coding time and flexibility in your design. It also fills the page with code making your pages load much slower than a CSS layout.
The tables are also causing you the problem with the comment form breaking your design.
So use <div>‘s instead of <table>‘s and style them and give them dimensions with CSS.
If you want to learn how to do this, and want your site to be done the “right” way instead of the “looks alright” way, then head over to the HTML Dog website and do the beginner tutorials of HTML and CSS. This will give you a good foundation to build valid pages. Do the intermediate and advanced tutorials and you’ll code like a pro.
Good luck!
If you want to learn to code like a pro, stay away from Dreamweaver. That’s just MY opinion. Invest in a text editor such as EditPlus2, which colorizes text for all kinds of code, HTML, CSS, PHP, etc.
http://www.editplus.com/
There are a lot of great CSS tutorials out there, and I also recommend getting some good books on the topic.
Online Resources:
HTML Dog, as JB pointed out, is an excellent resource; here is a link to some more, all in one place for you to bookmark:
http://www.mezzoblue.com/zengarden/resources/
Books:
CSS Mastery by Andy Budd
Bulletproof Web Design by Dan Cedarholm
CSS Anthology by Rachel Andrew (you can get it for $9.99 as a downloadable PDF at Sitepoint.com)
Also, if you use the FireFox browser, you can download the Developers Tools that allow you to view and edit your CSS and HTML in real time right there in the browser. A good way to run duwn some of those pesky nits.
Also, validate, validate, validate. The act of doing that also shakes out things like typos. (Ask me how I know THAT so well!)
And for the time being, until you can get your site up to speed, changing col in your textarea to 70 (70 columns) or 75% will do the trick. 🙂
Your problem is coming from the text area. Check your comments template and change the cols=”#” value to resize it. or you could edit your css to reflect your desired width:
textarea {
width: #px;
}
This should take care of your stretching issues.
As I had previously mentioned.
He may prefer to have it placed in his external stylesheet, which you did not mention.
@jonimueller I agree with you that it’s best to stay away from WYSIWYG editors like Dreamweaver altogether. But unfortunately not everyone has the in depth knowledge of (X)HTML and CSS like you have 😉 In those cases Dreamweaver is about the best choice since it has validation tools that highlight invalid code and underlines browser incompatible issues in the CSS. For me it was a great tool which helped me grow from from the WYSIWYG environment to hand coding everything.
The CSS Zen Garden you mentioned is the best site to grasp the flexibility of CSS design. I can spend hours on it to help find ideas for new designs.
