What are Divitis and Classitis?

The terms Divitis and Classitis were first coined by Jeffrey Zeldman, in his book “Designing With Web Standards” (thanks reader John). There is a pretty good explanation of what it is at Tyssen Design:

‘Divitis’ is a term used to describe an error common amongst newcomers to building CSS-based sites whereby they use too many divs for everything. Divitis is related to ‘classitis’ and ’span mania’, both terms used to describe the practise of combining spans with a class to style content when a more appropriate tag is available

Why is it wrong?

Here are three reasons, why you shouldn’t use too much divs or spans:

• It is not semantic
  Semantic coding, is using an element the way it’s meant to be used. For example: using tables for a design is wrong. Tables are meant for structuring tabular data only.
• It is bad for SEO
  Search engines pay attention to certain elements, like <h#>. If you not specify the content by using a neutral element like <div>, the search engines don’t know whether that content is important.
• It is superfluous
  Using unnecessary tags means more code, more code means a larger file and a larger file means more bandwith use and slower pageloads.

Examples

Header

On a lot of site’s the following code is used for the header of the page:

<div id="header>
<img src="logo.jpg" alt="My site name" />
</div>


But it’s more semantic to use a <h1>-tag like this:

<h1>My site name</h1>

And the following CSS code:

h1 {
background:url(logo.jpg);
text-indent:-9999px; /*(that will remove the text from the page)*/
width:800px;
height:150px;
}

We just changed the <div> into a <h1>. This is good for SEO, for the search engine now sees that header image is the most important part of the page. And it’s more semantic to: the <h1> is meant for the most important header of the page, in this case the site name.

Navigation

I often see divs and spans used for navigation, while using a list is much easier. For example:

HTML:
<div id="menu">
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
</div>

CSS:
#menu {
/* your style*/
}
.menu_item {
/* your style */
}

First of all, there is no need to add a class to the span tags. You can easily target the <span> with CSS without a class. Like this:

HTML:
<div id="menu">
<span>Menu Item</span>
<span>Menu Item</span>
<span>Menu Item</span>
<span>Menu Item</span>
</div>

CSS:
#menu {
/* your style*/
}
#menu span {
/* your style */
}

But it would be more appropriate to use an unordered list (ul). You can see that you can very easily decrease the amount of code you use on your page.

HTML:
<ul id="menu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>

CSS:
#menu {
/* your style*/
}
#menu li {
/* your style */
}

Other elements

The previous examples are very basic, but even advanced CSS users don’t always use the right elements. Do you use <adress> for your contact data? Or <abbr> for you abbrevations?

Conclusion

Divitis, Classitis and over-using of spans are some of the most common CSS mistakes, but they are also easy to cure. Think a bit further that divs and spans and you’re almost there!

Further Reading

• CSS Adjacent Sibling Selector; this CSS selector is not well known but can be used to target some specific elements, and you don’t have to give them a class if you use this CSS selector.
• CSS Creator Divitis: What It Is And How To Cure It
• What is Divitis? – Tyssen Design

Reset your CSS

All browsers have default styles applied to certain HTML elements. For example, a h1 element is bold and larger by default, and has some margin too. The problem is that all browsers have different default styles so your h1 won’t look the same in every browser. The font-size isn’t really

The solution is to reset the default styles of each browser and build it up again with your own styles. Because you’ve removed the standard browser styles, there won’t be any difference between the browsers. It’s like starting on a clean sheet.

There are a lot of CSS Resets available but Eric Meyer’s CSS Reset is the most popular, according to a poll on CSS-Tricks. A round up of the most used CSS Resets can be found on here.

The disadvantage of a CSS reset is that you have to write a lot more code. Every element you reset, has to be build up again. That’s the reason why a lot of designers use a custom CSS Reset (13% according to the CSS-Tricks poll) or no CSS reset at all. Veerle Pieters showed her limited CSS Reset in a reply to a question of mine.

A CSS Reset is important for cross browser compatibility, but you have to decide for yourself how far you must go when resetting your CSS file.

Using supported techniques

CSS offers a lot of techniques, but not all of them are good supported by every browser. For example the :before and :after pseudo selectors, which don’t work in any version of Internet Explorer, shouldn’t be used.

Nor should the attribute selectors (like a[href $='.pdf']), for their bad browser support. If you want to use the attribute selectors, use jQuery instead of CSS. jQuery is a good way to imitate CSS selectors. It can be downloaded here.

A good overview of CSS Selectors and their browser support can be found here.

Validate

I think this one is obvious: Take the time to validate your CSS styles. Cross browser compatibility is way easier with good and valid CSS. You can validate your CSS file using the W3 CSS Validator.

Summary

Follow these three guidelines and your CSS file will have a lot more browser support:

• Reset your CSS,
• Use only supported techniques and…
• Validate!

What are the techniques that you use to assure cross browser compatibility? Please leave a comment and share your thoughts.

Further Reading

• Make your site cross browser compatible in 5 steps
• CSS hacks inside CSS

Articles

How to structure large css files
An extensive article whith a lot of tips and tricks to structure large CSS files.

Write a well structured CSS file without becoming crazy
A great article on Woork explaining how to be simple, methodic and “elegant-code” oriented.

Optimize your CSS files to improve code readability
Another article on Woork, very clear with much example code.

Top-Down approach to simplify your CSS code
What is the correct approach to design a CSS file? Well, it’s the Top-Down approach. It’s about minimizing the number of CSS elements and using standard HTML tags (like h1, p, ul, …)

CSS Formatting Screencast
A screencast on CSS Tricks, showing how to format your CSS very clearly. You should watch this one.

Efficient CSS with shorthand properties
This is a really great article on 456 Berea Street explaining all shorthand properties. A guide for all webdesigners who want to code efficiently.

Optimize Your CSS even more
Paul Stamatiou wrote this article about optimising your CSS file by compressing it. He uses PHP to compress the CSS file into a .gz format.

Tools

Review of CSS optimization Tools
This review on BloggingPro shows clearly the advantages and disadvantages of the most common CSS optimization tools. You should read this before using one. This article tells you that “Icey’s CSS compressor” is the best one.

The most used CSS optimization tools are:

• Clean CSS
• Robson CSS compressor
• CSS Optimiser.com
• Flumpcakes CSS Optimiser

Conclusion

With this articles, you can easily optimise and organize your CSS file. If you don’t have time to do it your self, you can use one of the great CSS optimization tools. Have I omitted an article or a tool, please tell me.

Designing

Unfortunately you can only apply a limited amount of properties to a first letter. According to w3schools only font, color, background, margin, padding, border, float and some other properties can be applied. Still you can make a nice drop cap with CSS.

I used this CSS code:

p:first-letter {
display:block;
float:left;
border:1px solid black;
padding:5px;
margin:4px 5px;
background:url(firstletter1.png);
font-size:73px;
}

This image of Wikipedia Commons was used for the background image. Click here to view the example page.

I have some issues with this in Opera: the background doesn’t have the same height as the text. I don’t really know how to fix this, because there is no way to specify the height of the first letter in CSS. It works good in all other major browsers.

The Idea

The idea is a <div> with a specified width and height (the same as the icon). This icon (you might not see something, because it’s white) is set as the background image of the <div>. You’ll also have to set a background color, that will fill the RSS icon. If you don’t really get it, see this explaining illustration I made.

The Code

For this icon you’ll need the image and some CSS and HTML code:

CSS:
.rssicon32 {
width:32px;
height:32px;
background-image:url(rss32.png);
background-color:red;
}

HTML:
<div class="rssicon32"></div>

I’ve have made an extensive EXAMPLE PAGE, where you can see some of the icons. The image i linked to previously is used on this in three different sizes (16×16, 32×32 and 64×64).

Improving the technique

This technique has a lot of benefits, like you can use the same image for a hover effect, only changing the background color, which makes it quick and light weight. Another benefit is that you don’t need to change the image if you want a new colour. But there are also some disadvantages: this image works only on white and you can say that this technique is less SEO friendly than a regular image.
a
Making it SEO friendly with CSS image replacement
There is however a simple way to make this technique more SEO friendly. I will be using CSS image replacement. CSS image replacement is a technique often used to display images instead of text in a SEO friendly way. If you, for example use a header image instead of a <h1>-tag, that’s not very good for SEO, but if you replace the <h1>-tag with an image, you’ll have a SEO friendly and nice header. There are several techniques for CSS images replacement and a good overview can be found on CSS Tricks. You can choose the technique which you think is best, but in this case, I’ll go for the negative text-indent. I have added some text inside the div, which is hidden, because of the negative text-indent.

HTML:
<div class="rssicon32">Subsribe my RSS feed</div>
Making it compatible for every background
There is a way to make this RSS icon compatible with every background, but you’ll loose the rounded corners that way. So there are two options: change the colour of the rounded corners manually with photo editing software or drop the rounded corners. Both ways are displayed on the EXAMPLE PAGE.

Conclusion

I really like this technique and the opportunities of it. You make nice visual effects and still it’s very light weight and it will save you bandwidth. If you have something to say about this article, please share your thoughts and place a comment.

What exactly is an adjacent-sibling selector and what is the syntaxis?

An adjacent-sibling selector targets an element directly after another element with the same parent. For example you can target every <h3> that is directly after a <h2>. A really clear explanation of this selector can be found on Selectutorial. The syntaxis of this selector is the +. For example:
h2 + h3 {
color:red;
}

As you can see here the <h3> which comes directly after the <h2> becomes red.

How can you style this list with the adjacent-sibling selector?

With the adjacent-sibling selector, you can target any of the <li>-element without giving them any classes or id’s. That saves time and also bytes. So it’s convenient and cheaper. Let’s put it into practice. The plan is to give the first three countries another color and a medal. So USA get’s a gold medal, China a silver one and the bronze one is for Russia. I will use these images:
.

But first, let take a look at the CSS that will target the different countries:
li {
/* 1st : U.S.A. */
}

li + li {
/* 2nd : China */
}

li + li + li {
/* 3rd : Russia */
}

li+ li + li + li {
/* every other li element*/
}

You may ask yourself why the fourth selector is there, as we don’t want to style the fourth element. But pay attention that li+li+li targets every element that has at least 2 other li elements of the same parent before itself, you must set the color and other elements back to default or all other li elements will be styled like the third one. Now you have the selectors, you can be creative in order to style the list. This is my outcome.

The CSS I used to make this list:

li {
background:url(gold.gif) no-repeat;
background-position:70px 50%;
color:gold;
font-size:1.1em;
font-weight:bold;
}

li + li {
background:url(silver.gif) right no-repeat;
color:silver;
background-position:70px 50%;
}

li + li + li {
background:url(brons.gif) right no-repeat;
color:#8B5A2B;
background-position:70px 50%;
}

li+ li + li + li {
font-weight:normal;
color:white;
background:none;
padding:0;
font-size:1.0em;
}

position:static

Our example file is a simple page with one div, which has two nested divs inside it. Click here to view. There is no position specified in the CSS so the default value is applied: position:static;. There is no need to specify that in the CSS-file unless you need to override a positioning that had been previously set.

position:relative

You can use relative positioning to position an element relative to where it would normally be. For example we move div one-one 40 pixels to the left and also 40 pixels to the top. The CSS code:
.one-one {
position:relative;
left:40px;
top:-40px;
}
You can also use bottom:40px; instead of top:-40px;, but most webdesigners always specify left and top. Let’s take a look at the result. You see that the div one-one has moved 40 pixels to the left and 40 pixels to the top. The div is moved, but this hasn’t affected the flow of the page. The space where the div was before we moved it, is empty.

position:absolute

With absolute positioning, the div is removed from the page flow and moved exactly to the specified place. Let’s move div one-two to the upper-right corner. You’ll need this CSS code:
.one-two {
position:absolute;
right:0;
top:0;
}
There is no need to say 0px, because 0px is exactly the same as 0cm or 0%.
This is what the result looks like. The space which was used by div one-two is now empty.

relative + absolute

This is one of my favourite tricks. By using relative and absolute positioning, you can place div one-one in a corner of div one. The code:
.one {
position:relative;
}
.one-one {
position:absolute;
right:0;
top:0;
}
By setting div one to relative, div one-one is placed in the upper-right corner of div one. Click here to view.

float:

float: is also a very convenient CSS attribute position elements. With float:, you can float an element against the left or right border of it’s parent element. In this example, we’ll let div 1-1 and div 1-2 float inside div 1. The CSS code:

.one {
width:600px;
}

.one-one {
float:left;
width:200px;
}

.one-two {
float:right;
width:200px;
}

See the outcome here. Thanks to David Karasek for remembering me of the float: attribute. If you want some more detailed information about positioning, see this 10 step tutorial.

Please digg this article if you liked it or share your thoughts in a comment.

These hacks all use valid CSS.

Hide From Internet Explorer 6

Internet Explorer 6 is causing much bugs. It often does not handle CSS correctly and that can cause some trouble. You can however easily hide some (adjusting) rules from Internet Explorer 6. This is how:

#text {
color:green; /* The color is set to green */
}
html>body #text {
color:red; /* The color is adjusted to red, but IE6 doesn't see this rule */
}

The text will be red in all browsers, except Internet Explorer 6. For example you can use this hack to adjust the margin or padding if that’s wrong in Internet Explorer 6.

Hide From Internet Explorer 7

This is the same code as before, but we’ve added a comment between the selectors. IE7 doesn’t see this so the rule will be ignored.

#text {
color:green; /* Color is set to green */
}
html>/**/body #text {
color:red; /* Color is set to red, but NO version of Internet Explorer sees this */
}

Result

I added the 2 examples into one HTML file.
See the result (Look at the difference between Internet Explorers and other browsers)

And this is the complete source code:

<html>
<head>
<title></title>
<style>
#text1 {
color:green; /* The color is set to green */
}
html>body #text1 {
color:red; /* The color is adjusted to red, but IE6 doesn't see this rule */
}
#text2 {
color:green; /* Color is set to green */
}
html>/**/body #text2 {
color:red; /* Color is set to red, but NO version of Internet Explorer sees this */
}
</style>
</head>
<body>
<p id="text1">If this text is green, you are using Internet Explorer 6 (or older)</p>
<p id="text2">If this text is green, you are using Internet Explorer 7 (or older)</p>
</body>
</html>