HTML should always be used for structuring your content.  You should try to avoid using it as a means of design.  Cascading Stylesheets (CSS) are for design, not HTML.  Listed are a few of the CSS oversights I see on a common basis.

Inline Styles

Most of the third party components I use contain inline styles.  This is where the stylesheet attributes are coded directly into the HTML tags.  This makes layouts harder to change as you have to touch all of the style attributes rather than editing one file.  It also adds more markup to your HTML file.  More markup means search engines have more code to digest than content, which can potentially hurt your ranking.  I end up going through the third party components and creating my own design friendly views.  This can be a pain, but someone has to do it.  So, when developing a web program for others, try to use standards and focus on content not design.  Your system will be much more portable and beneficial to it’s users.

The Overflow Problem

The overflow problem occurs when you are floating items.  Normally, in a column based layout you will wrap the columns in a div tag or some other tag that suits your needs.  The main div will contain a background color or image.  As the columns automatically populate, they overflow the main div.  This means if there is a height on the main div, the columns flow outside and the div does not automatically resize.  Some people will use the following code to solve this problem.

<br style=”clear”/>

This is perfectly valid. However, it integrates the content structure with the design.  This may cause issues when trying to apply a new, css based layout.  It also adds extra markup, which bloats your code.  The better way to solve the overflow problem is to apply the following style to the div wrapper:

overflow: hidden

This tells the wrapper to automatically flow with the floated elements.  Therefore, solving the problem without any extra HTML markup.  Wooo!

Browser Compatibility

It is extremely difficult to get most designs to render properly on all browsers.  Your main stylesheet will render on most browsers other than Internet Explorer (IE).  Many designers include one stylesheet for all browsers.  They either do not test in IE or the site worked in IE and they did not test other, more standards compliant browsers.  In almost every design project I have worked on, I have had to include IE only stylesheets.  This can be done with conditional comments.

<!–[if IE 7]> <link href=”ie7only.css” rel=”stylesheet” type=”text/css”> <![endif]–>

<!–[if gte IE 6]> <link href=”ieonly.css” rel=”stylesheet” type=”text/css”> <![endif]–>

Conditional comments are ready by IE.  Above, the first checks for IE version 7 and if it is present then the ie7only.css file is used.  The second checks for anything greater than IE version 6 and then renders the appropriate stylesheet.

You could then use a normal stylesheet for most major browsers and add modifications to that stylesheet in an IE only file.  Then, pull the IE file when necessary.

Conclusion

These were just some things I ran into this week between third party websites and client redesigns.  Hopefully, a designer or developer out there finds this useful.