Resources for Web Development Students @ Robin’s Blog

As you start to build your own Web sites you will more than likely come across a few CSS browser bugs. You ma y encounter the “float drop bug”, the “3 pixel jog”, or the “IE double margin float bug” to name a few. Before you pull your hair out with frustration, read the articles below which contain many of the common CSS issues and solutions.

If you print any of these articles in the classroom do not print the comments. You can view the article in Print Preview mode by selecting File > Print Preview, scroll down the page until you see the last page of the article and the first page of comments and note the page number. Click the Print button and set the Print Range to Pages and enter the specific ending page. Select the HP LaserJect 2420 PCL 6 as the Printer and click the Properties button. Click the Finishing tab and select Print on both sides. Click OK twice.

Mastering CSS Coding: Getting Started – Great beginners article that covers the following: Padding vs. margin, Floats, Center alignment, Ordered vs. unordered lists, Styling headings, Overflow, Position, Background images, Image enhancement, PSD to XHTML. This article also includes tips on how to fix bugs and how to avoid them all together.

Using CSS to Fix Anything: 20+ Common Bugs and Fixes – Includes IE 6 bugs and fixes, column issues, centering horizontally and vertically, CSS positioning, floats, CSS forms, and CSS tricks.

The Mystery Of The CSS Float Property – An overview of CSS floats, bugs and solutions, sample layouts, and working with lists and form elements.

CSS Float Theory: Things You Should Know – A detailed introduction to using floats. This articles also covers issues, bugs you may encounter when you are working with floats and “fixes”.

All About Floats – Detailed information about floats, common issues, and fixes. There is also a screencast about float concepts at the end of this article.

Liquid three column layout tutorial – If you need a starting point for a three column design this is a good tutorial.

The CSS Overflow Property – Discusses the overflow property and its uses.

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

9 Most Common IE Bugs and How to Fix Them

CSS Differences in Internet Explorer 6, 7 and 8 – – This article describes the differences in CSS support IE6, IE7, and IE8. This article also covers any known bugs. This article may also introduce students to some properties they haven’t used before.

Backgrounds In CSS: Everything You Need To Know -Detailed information on how to use backgrounds in CSS.

Create Sidebars of Equal Height with Faux Columns

Center Absolute Positioned DIV

CSS Box Model: The Foundation For Improving Your CSS

Additional CSS Resource Sites

The Difference Between ID and Class – IDs vs. classes confuse many people who are new to CSS. This is a great article that explains the difference.

SitePoint CSS Reference – A great, searchable CSS reference site.

Max Design – Tutorials for CSS floats, lists, and selectors.

Position is Everything – CSS bugs found in Web browsers and advanced CSS techniques.

CSS-Tricks – CSS Articles, freebies, code snippets, and forums.

quirksmode.org – CSS browser compatibility, information on conditional comments and information on quirks mode and strict mode.

Layout Gala – 40 HTML and CSS Layouts