CSS Tips and Tricks: Make an image appearing as disabled.

At times, in your HTML pages, you would want user to display images as disabled.
For example, consider a Delete button in an HTML table where for a few rows you cannot allow delete operations (based on some criteria). In such cases, it would be a good (and self-explanatory) to display Delete image as disabled (instead of hiding the same). Following is the CSS for the same:

.disabledImage {
    opacity: 0.4;
    filter: alpha(opacity=30); /* msie */
}

Example usage:

<img src="../content/images/delete.png" title="cannot delete this entry due to dependency" class="disabledImage"/>

CodeProject

HTML/ CSS: FIX >> Contents do not appear on new line after floated DIVs.

When we use "float:left", or "float:right" styles in DIVs, we come across an issue due to which the contents after those floated DIVs is not appearing in new line, rather they start appearing immediately besides the completion of last floated DIV.

In order to make further contents appearing in new line, add following DIV after floated DIVs:

<div style="clear: both;"></div>