Focussing on Style Sheets and Cross Browser Compatibility.

Question

Hello everyone,

Let me begin this topic by explaining my background experience with web design. I have always been more of a back end programmer, with PHP and SQL and things. However I do have a shallow background with HTML and CSS. The problem is, I don't know it all. What I do know is, when it comes to designing (not back end dirty work) I understand basic CSS properties and I also understand HTML and I can usually throw together a sloppy web page with the two and a couple bazillion DIV tags.

Anyways..

The problem I always have encountered is that when I design a website in a browser such as IE7 (and then it looks perfect on IE7), and then look at it on IE8 or IE6 or Mozilla (etc.) it gets all spacey and ugly and looks totally different than the way it should look on IE7.

Question one:

Basically, what I am asking everyone is what route should I take to learn how to properly build the website? Build as in put it togehter with CSS standards and HTML standards that will make my site look the same on every brwoser. (Not only learning standards but where can I learn to properly write my code?) Where is a strong free resource I can use to learn how to these things?

Question two:

How do I properly code my website? Do I use all external style sheets to make dynamic page design simplistic or do I hard code some things into the DIV tags on each page? What is proper?

Oh, and if anyone has any tutorials on how to properly design a complete layout feel free to throw it in a response somewhere.

Thank you for taking the time to read my questions, and hopefully you will understand what I am trying to get out to everyone. I need to get on the right route of the designing side of web programming so that I will know how to create successful websites in the future.

Thank you, Sam Pardee

Answer 1

First, I recommend NOT starting with IE as your "development" browser. Start in Firefox, say (which gives you the advantage of tools such as Firebug and the web developer toolbar), and then get it right in IE afterwards.

Second, definitely user external style sheets; it results in much cleaner code and a much simpler way to make style updates. Definitely recommended. Also external CSS files can be cached by the browser, so they won't increase the page download size as users go from page to page in your site or application.

Lastly, start by defining your content using simple HTML, basing the structure on the meaning of the content (often called "semantic" HTML), not on how you want it to look. Use a <ul> tag for something that is a list of items, for example, even if you don't want to display it as a "bullet list" (the default styling for <ul>). Then start adding styles to make it look right. This will result in very clean HTML that can support a variety of formats and layouts (take a look at CSS Zen Garden to see what I mean) and will also help push you towards a layout that reflects the structure of your content, which will be easier to read and comprehend.

In terms of books, you can't go wrong with Eric Meyer. HTML is easy, of course, and I don't recommend doing fancy stuff with HTML, so put your learning effort into CSS (Eric is the CSS guru).

Answer 2

Cross-browser compatibility is always an issue. It's a staple of web development, sadly, and there is no magic bullet. Luckily, the main offender, IE6, is finally starting to fade.

A1.

When starting work on a new site, first take every piece of content that needs to be on the page and paste it into a text file. Then put it in a rational order (thinking "If I had to use a text browser to use this page, how would I want it to be arranged...").

Then start wrapping HTML tags around each piece of content. For each piece, think "What type of information is this?" A heading? h1/h2/etc tags. A paragraph? A quote? A table? p,quote,table. Essentially, use HTML tags that describe what kind of information each piece of content is. When I do this, I pay no attention to how it actually looks in the browser at this point.

Once the content is all marked up, begin writing the CSS. If at all possible, try not to touch the markup during this step. Sometimes that isn't possible, though, and throwing a div or span around some elements is unavoidable. The less meaningless markup, the better.

In my experience, this approach keeps things very clean and tidy, and makes debugging layout issues a lot easier.

A2.

Building the styles into your markup using the "style" attribute is fine for prototyping, but beware, the temptation to leave them there once it works is strong. The best practice is to have all of your styles in external stylesheets. I'm interested to hear any alternative viewpoints.

Some great web standards/CSS resources:

• http://www.csszengarden.com/
• http://www.alistapart.com/
• http://www.thenoodleincident.com/
• http://www.quirksmode.org/css/contents.html (useful reference for selector-compatibility)
• http://centricle.com/ref/css/filters/ (good reference for css hack compatibility)
• http://www.zeldman.com/
• http://meyerweb.com/

Hope this helps!

Answer 3

There are TOO many site out there that have really great tutorials for HTML and CSS. They will give you all of the information you are asking for. I would start doing some reading of the great gurus of HTML/CSS:

Simon Collison
Andy Budd
Molly Holschzag
Dan Cederholm
Jason Santa Maria
Eric Meyer
Jeffrey Zeldman
Cameron Moll

Any book or article you can fond from these folks will steer you in the right direction; you can't go wrong!

As for sites that will give you the proper methods/concepts/training for web standards compliant sites:

http://www.w3schools.com/default.asp
http://www.webstandards.org/
http://www.smashingmagazine.com/
http://www.webdesignpractices.com/
http://www.designmeltdown.com/default.aspx
http://www.cameronmoll.com/
http://www.alistapart.com/
http://www.cssnewbie.com/
http://www.css3.com/
http://htmldog.com/
http://css-tricks.com/
http://simplebits.com/
http://www.colly.com/
http://glish.com/css/#tutorials
http://meyerweb.com/
http://jasonsantamaria.com/

The one of the best books I've bought so far to help with HTML and CSS coding PROPERLY is Beginning CSS Web Development by Simon Collison. Great, easy to understand, and not too slow. Great examples to follow along. After that, buy CSS Mastery - Advanced Web Standards Solutions, also by Simon Collison, and Andy Budd and Cameron Moll. This book gets you up to speed with some advanced techniques that you'll see on the many of the web sites right now, some of which were invented by the authors.

Answer 4

Here are the basic tips for cross browser compatibility which will definitely help you.