Before You Begin Coding....You Should..?

[banksworld1986]

Hello. It's me again with another question that should generate a lot of responses (hopefully).

As mentioned before, I'm working on my first site (hopefully I'll be done soon and can move on to other stuff...caus I'm tired of looking at the same graphics). :)

But, I've been running into all of these different HTML/CSS code debacles, after which I've been advised to go back and "add 'this' default coding to your stylesheet", or "IE sees your code like this...Mozilla/Firefox sees it as this, so you have to do 'this' "....

Only to come to the conclusion that there are some general things that I need to do or code that I need to always include that will make my life a lot easier when I been using positioning code and other CSS elements to create my webpage.

From your perspective, what would be these general inclusions...? What do I "always" need to do so I won't have problems coding and my viewers won't have any problems viewing my page? (No graphic design answers needed).

[Declan1991]

I always use Eric Meyer's Global Reset Reloaded so I have nearly complete control over the look of the page. I then create it in Firefox, but test EACH step in IE, so then you know what is wrong and don't have to have a complete debacle at the end with no reason why it doesn't work in IE.

[WebJoel]

A good, solid 'template' that validates, & re-set browser-specific elements to desired defaults ("p", "h1-h6", "* {margin:0; padding:0}", and use Firefox with IE-tabs extention (that is, the Trident rendering engine to view page 'as IE sees it), and TIDY validator to check syntax of code, and cross-check steps often between Fx/IEtabs.

[matt.ritter]

In addition to the ie-tab you might want to have a means of checking the site in IE6. About 40% of the users on many of our sites are using IE6.

[TJ111]

Get "Multiple-IE's" as well (google it). That way you can test on IE 6 even if you have IE 7 installed. As far as designing around the quirks, there's a few things you can do. Here's the thing that helps me the most:

at the VERY top of your CSS:

* {
margin: 0;
padding: 0;
}

Note: that will remove ALL implied margins and padding, so they must be declared for each item later on.

Mostly it's just learning as you go what works and what doesn't work in different browsers. After some experience, you'll find only minimal issues between browsers that require fixing.

[WebJoel]

The universal selector method above ( * {margin:0; padding:0;} ) eliminates probably half of all your future problems for x-browser issues.

[banksworld1986]

Just wanted to say thank you for the different views to all of you. I have a much better idea of how to approach web design now.

Thanks. :)

[drhowarddrfine]

The * universal selector has lost favor to the reset method mentioned above. The universal selector causes some minor problems here and there.

The very first thing, before you write anything else, is put down a proper, strict doctype.