Douglas on Web Applications

Minimum CSS Required to Clear Floats

Minimum required CSS to clear floats across all modern browsers:

<pre lang="css">

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  height: 0;
  content: " ";
  clear: both;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

</pre>

Tags: clearfix, css, floats, minimum

Unobtrusive Rollovers with jQuery

 
$(function() {
  $("#nav img").hover(function() {
    $(this).attr("src", $(this).attr("src").split(".").join("_over."));
  }, function() {
    $(this).attr("src", $(this).attr("src").split("_over.").join("."));
  });
});
 

 
<ul id="nav">
<li><a href="#"><img src="button1.gif" /></a></li>
<li><a href="#"><img src="button2.gif" /></a></li>
<li><a href="#"><img src="button3.gif" /></a></li>
</ul>
 

Tags: rollovers, unobtrusive