2 Useful CSS tips

"Don't look for water when something burns, just don't play with fire" - My Mom.

Preventing bugs before they happen, that's the key.
If you don’t prevent bug, they will start a snow ball that will force you on and on with ridiculous patch-work and what i basically call the "fire extinguishing loop", there will be a lot of them interacting with each other, making it difficult to figure out what’s what, and were it all began from.
The majority of bugs reside in JS differences between browsers and CSS and DOM interpretation, so i'll try to specify some methods and techniques we use here at my company, who make our lives a lot more easier.

CSS Resets

asterisk CSS selector:

* {margin: 0; padding: 0;}

But, it's too rough. Using this technique cause my forms to get messy and got me upset since i had to define every single padding and margin specification.
ince then, I’ve been using the popular CSS reset by Eric Meyer, which collects a set of such reset attributes, for several common HTML tags.
Of course i had to tweak it to fully match my needs, but still , it's a must-have baseline for cross browser CSS development.

Clearing floats

IE6 does not like floats too much, IE8RC1 is not a big fan either, especially when those floats are not clear.
Uncleared floats are often the cause of major bugs. however, it’s a bug that is easy to fix.
Setting an HR element with width of %1 and setting it to clear:both, will solve the problem.
<div id="container">
  <div class="floater">
    floating.
  </div>
  <div class="floater">
    floating.
  </div>
  <hr class="clear"/>
</div>
<span>I am below!!</span>

and the CSS:
#container{
}
.floater{float:left, width:60px; margin:6px; padding:6px; border:2px solid #888;}
hr.clear{clear:both;width:1%;}


ther clear:both definition orders the HR element to go down one line if the is any other element on it's left or on it's right, read more on the clear CSS attribute.