Major Cross-Browser Css Issues-Just When I Thought I was Getting this!

Just for you and anyone else who's interested, RJ TextED is a very nice, fully-featured FREEware text editor that I've been using for a while. It has automatic colour-coding for loads of languages, incl. html and css. Check it out http://www.rj-texted.se/

(not affiliated in any way, just think it's very cool for a free program)

 

The only thing you need a text editor to do is write exactly what you type in it. Word wrapping is nice. Syntax highlighting is nice. Being able to ssh or sftp directly from it is very nice. But other than Notepad's serious issues with utf-8, simple editors are fine.

For ones with more power, you may want to check out stuff like EditPlus or vi/vim (or gvim, the graphical version). They do all other sorts of screwy stuff. Once you learn whatever special stuff it does, you'll go really fast!

But that's extra. Heck, you can write code on a napkin in a restaurant if you want to. I have. Just don't use any of those Desktop writing applications, they make their own tags and their own code and aren't made for building web pages.

 

THIS also springs to mind.

 

Nothing crappy about them - Crappy is the term reserved for WYSIWYG's like Frontpage, HotMetal and Dreamweaver.

Uhg, Dreamweaver, bane of the web development world. Only thing you can learn from Dreamweaver is how NOT to design a website, and by the time you can use it to do one properly, you don't need it's fat bloated ass for anything anymore.

 

Yeah, it's an awful awful way to design a website. EVERYONE who starts out using it begins by drawing a table and trying to make their page fit into it. And as for all those style declarations it inserts - euughhhh... You can tell a DreamWeaver site just with one look at the code (and often at the site itself).

As you say, by the time you figure out how you MIGHT actually use DW to produce a site properly, you also realise it's just as easy to do it in a text editor and a lot lot cleaner...

As for FrontPage, well, let's not go there...

 

That's exactly what I was referring to as the markup for that page is presentational. You use the font and center tags which are deprecated in strict doctypes for a reason - they are presentational and say how it should appear, NOT what it is. That's what I meant, anythign that sets APPEARANCE, like color, font face, etc - does NOT belong in your .html file. That's what CSS is FOR.

Let's go through your BODY bit by bit.

No formatting - if you are in development actually using the tab key to mark your blocks and comments to mark your ends can prevent you from making mistakes like not closing certain tags.

Line break in the H1 - unneeded, that's what padding-top in your CSS is for. Also invalid for your doctype since it is unclosed.

Font tags - unneeded. That's what CSS is for.

Center tag around 'browser' text - unneeded, that's what CSS is for, which you could apply to the H1 meaning you don't even need the extra block level container.

Double paragraph, first not closed. Invalid for the doctype, and again what padding is for.

Font tag inside the H2 - it's the only H2 inside the div, so apply your color in the CSS not in your markup.

Paragraph for your menu with line-breaks. A menu is a LIST of options. We have a list tag, that's why my rewrite used an unordered list. It's not a paragraph, why mark it up as such? All those break tags are also unclosed, so invalid for your doctype.

ID's on your heading tags. Unneccessary... and on your H3's you use the same ID more than once, which is invalid markup as well. (and also shouldn't even render properly - you're relying on error correction there)

... and your footer. You've got a perfectly good block level container around it in the form of #footer. Two fragments are hardly a paragraph, so why waste the extra paragraph tag around it?

Getting the idea of separating out 'appearance' to the CSS as much as possible is a big hurdle, especially when you first start out in CSS, even more so if you've already learned to write HTML 1997 style using presentational markup - It's why my advice for people just starting out in CSS after learning HTML is 'forget everything you just learned about HTML'.

 

Hi, I have not signed into this site for longer than I wish to admit. I am a terrible procrastinator and believe it or not three and a half years later I have some of the same issues. LOL I had at least went to the W3Schools site and took some of your suggestions. I also found a great basic three-column CSS layout to use. I don't know if it was here or elsewhere but I know I did also request that if anyone has a free dynamic navbar code that would be of a huge help to me. My home page is very, very basic right now with just an intro and my Twitter widget along with links to blogs and contact page.

I'm hoping now that I'm changing the kind of work I do that I can spend more time on here learning this and taking your suggestions.