Skip to main content
CSS is fun and cool and I like it.
Snippet

Cross Browser Opacity

These days, you really don’t have to worry about opacity being a difficult thing cross-browser. You just use the opacity property, like this:

.thing {
  opacity: 0.5;
}

0 is totally transparent (will not be visible at all, like visibility: hidden;) and 1 is totally opaque (default). Anything in between is partially transparent.

For historical reasons, this is how is we used to do it:

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* 
Read article “Cross Browser Opacity”
Snippet

Display a User Gravatar from an Email Address

<?php
  $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($comment_author_email) . '?s=32';
   echo '<img src="' . $gravatar_link . '" />';
?>

The variable $comment_author_email would be a string of a valid email address. If the email isn’t in the Gravatar database, it will return a default graphic. $comment_author_email is the default WordPress variable that populates from a cookie for people who have previously commented (if the theme supports it).… Read article “Display a User Gravatar from an Email Address”

Snippet

Cross-Browser Min Height

div { 
   min-height: 500px; 
   height:auto !important; 
   height: 500px; 
}

This works because (thankfully?) IE treats “height” how “min-height” is supposed to be treated.

Source: Dustin Diaz

Alternate Using Expressions (IE Only)

div {
   height: expression( this.scrollHeight < 501 ? "500px" : "auto" );
}

Sets the minimum height in IE to be 500px. Make sure that this.scrollHeight < 501 is 1 px greater than the minimum height that you want or you will get some strange results. … Read article “Cross-Browser Min Height”