I love CSS but I have spent countless hours swearing at my computer because of CSS… It’s a love/hate relationship really. Although web standards have been around for a while now, people still use tables and improper code to create websites. For the most part I’m not talking about professional websites, but for a lot of people, it’s easier/quicker to just write using traditional methods despite it’s obvious downfalls.

There were many reasons which I decided I was going to learn the standards and do it right but there are some things which I think would have been a LITTLE helpful to have known back then to make the process less painful. Without further ado..

1. IE less than or equal to IE6 CSS hack.

 

This is a very simple, I know I’ve read countless articles about this buzzword hack or that about this but here’s the rule: Internet Explore 6 & less don’t understand inheritance. So if you come across a situation where IE doesn’t behave like other browsers, you write your normal CSS rules as you would to accommodate IE, and then you write another using inheritance for the newer browsers.

Here’s an example:

#element{
  width:490px;
  padding:5px;
}

#divName > #element{
  width:500px;
  padding:5px;
}

 

Here’s an example of a hack that causes a .png image to show for all browsers better than IE6 and a .gif image to show for IE6 and lower. BTW I use this code to accommodate for lack of full .png transparency support in IE6 and older browsers.

#enginepng{display:none;}
#header > #enginepng{display:block;}

#enginegif{display:block;}
#header > #enginegif{display:none;}

 

To clarify, here is the XHTML used along with the CSS in the second example:

<div id="header">
  <img src="images/engine.png" id="enginepng" alt="diesel engine" />
  <img src="images/engine.gif" id="enginegif" alt="diesel engine" />
</div>

 

2. A floated element will always stretch around elements floated inside of it.

 

I’ve had terrible problems with getting CSS to stretch to 100% height, but with this I have been able to stretch my main container around the inner containers, just by floating both/all of them. You’ll have to read a little about floats first just to get it down. The article that helped me understand floats best is by Eric Meyer called “Containing Floats” in which he merely points out:

“The term “float” refers to the way in which an element floats to one side and down”

That’s it, these little pieces have switched on some lights for me in my journey through learning CSS & I hope you can get some use out of them as well.