WorkingPoint

Top 10 CSS Gotchas

I have been doing CSS/XHTML for almost 5 years now. And from my experience, here are the 10 most common "gotchas" for anyone trying to learn CSS.

• 1. Use a CSS reset

  One of the first thing I do before starting any page is include my reset.css. A reset css helps you by normalizing all the default styles across all common browsers. Without a reset library, you are guaranteed to run into browser compatibility problems down the line. It is also important to include your reset.css as the first css file in your header, and not only that, you must also include your reset.css before beginning any work. This way the reset file will take affect before any specific style is written. Here are two popular css reset libraries: YUI Reset, blueprint.

  Want to see what I mean? Click here: to remove this page's reset css.

• 2. Clear things up

  Wrapper DIV

  Many CSS noobs run into this problem: floating elements flying all over the place. The WorkingPoint logo on the right is floated left inside of a blue "Wrapper DIV". Without properly clearing the floated logo image, the DIV would collapse.

  Try it, remove the clearing DIV.

  You must learn to clear things up. I prefer an inline clear class.

  .clear { clear: both; }

  But you can also use the infamous clearfix.

• 3. Margin vs. Padding

  Nothing new here, this is most commonly known as the box-model. I don't want to go into too much details here because it's been covered elsewhere. But here is a fun live example for your viewing pleasure: See IE Mode

  

  The solution? Use a wrapper DIV and give the wrapper DIV a padding.

• 4. i can hasLayout?

  You can try to understand it, but it's probably better that you don't. (if you must: here, eat your heart out)

  The point is, if something goes wonky with your work, and it only happens in IE, chances are, it's hasLayout. Some of the things I have seen over the years include: elements that disappear to the upper left corner of the browser window, empty DIVs taking up space, elements that won't respect height and width attributes, list items that will only appear if you hover over a certain area of the screen, and so so so much more...

  If you are using IE: fix it.

  If you are using Firefox: simulate it.

  How did I fix it? add

  zoom: 1;

• 5. Get Firebug

  You have not experienced the internet, until you have Firebug. It is not only a great developer tool, it is an all in one hacker tool. In fact, I am so serious about you getting firebug, the rest of this page is hidden. If you don't have firebug, you won't see it. Look at the screenshot to see how to reveal it using firebug.

  

• Congratulations! You have unlocked level II. Rawr...

• 6. Set the Table

  Having a table for data is great. But it is annoying when your table does not align properly with your content. See this example:

  Long Column - Supposed to be 500px

  ReallyLong300pxColumnThatShouldNotBeThisLongButTheBrowserDoesNotKnowThat FixIt

  Short Column

  What's the magic? A little piece of css:

  table { table-layout: fixed; }

  But remember one VERY IMPORTANT note about tables: the first ROW always set the width for the entire table. So don't go setting width on any other rows besides the first one.

• 7. making a List and checking it twice!

  • Spoon
  • Fork
  • Spork
  • Chopsticks

  If you are using Firefox, you are probably wondering why the little dots are hanging out the bound of the page. If you are using IE, you are probably wondering what I am talking about. Fix it.

  li { list-style-position: inside; // or outside }
li { margin-left: 1em; // or use a margin }

• 8. Position. Position. Position.

  In real estate, it's all about location, location, location. In CSS, you must understand position. You can read all about it here. But let me try and explain to you two very important positions: relative & absolute.

  The blue position-absolute box can be placed anywhere on a page with a top/left attribute.
  However, because it is inside this position-relative box (inside the grey border), "top: 0; left: 0;" is at the top left corner of this box. Think of it this way, position-relative traps position-absolute elements inside it's borders.

  Get it? Oh by the way, when something is position-absolute, it is automatically position-relative also.

  See what happens you remove "position: relative" from the containing box.

  I am absolute!

• 9. zhee-Index

  If you did not read number 8, don't bother trying to understand this - move it.

  If you are using IE, you will not see the yellow box.

  This is because in IE, z-index order is dependent on the location of the element. Because the yellow box is a child element of the red box, it's z-index is relative to the z-index of the red box. There we go, that relative thing again... That reminds me, if you want to z-index something, you have to give it a position.

  Basically, the whole point of this example is to show you that in IE, you can not rely only on the z-index for layering. You must take into account the location of the element also.

• 10. Validate your freakin' CSS/XHTML

  Do not ask anyone for help until you validate your CSS/XHTML. Trust me, you will be embarrassed greatly if you don't.

  A good majority of bugs developers cause are because of missing closing tags. This is the sort of thing validation can help you find. Nothing is more embarrassing than spending an hour debugging only to find out it was because you forgot to close a DIV.

  This page is not valid, I know. Sometimes you can not validate for technical reasons, but you should run validation anyways to find any mistakes. I found a couple of mistakes on this page when I ran validation.