10 best CSS hacks

If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. I’ve written about some of them earlier on PNG transparency issues, Yellow fields in web form, Vertical align div etc..
Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.
1. Vertical align div
http://stylizedweb.com/2008/02/01/vertical-align-div/
2. Min-Height
 
selector {
min-height:500px;
height:auto; !important
height:500px;
}
 
3. PNG transparency
http://stylizedweb.com/2007/12/30/png-transparency-issues/
4. Autoclear
 
.container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */
 
5. Reset CSS
 
html,…

You Might Also Like...

  • chickenstrip

    10 CSS Snippets to Save Precious Time

    610 readersToday, I have compiled a set of 10 CSS snippets that can save you a lot of time and effort. These codes are needed frequently when developing CSS-based websites or themes. Just bookmark these codes (Ctrl + D) so that you don’t have to look for them on the Internet every time. 1. CSS Tooltips

  • Thumbnail Based Archives

    2666 readersHere at Digging Into WordPress, we’ve attached thumbnail images to every single (non-link-style) post since day one. We started before WordPress 3.0 had the specific feature for thumbnails. We did it just by attaching a file path to the thumbnail image as a custom field. We clearly display each of those thumbnails in the design

  • example

    CSS Browser Selector

    453 readersThe basic idea for this comes from this question "What if you won't have to code those ugly CSS hacks for those browsers that just won't show you what you want them to?". Again writing about cross browser problems and solutions like on "IE7 JS library review". I've ran into two solutions for this. I personally

  • Screen shot 2009-12-08 at 11.00.03 PM

    Make a transparent admin bar across your site (with logo!)

    1014 readersIn this short tutorial we'll give you some .css to improve the look of your admin bar and add your own logo to it!

  • How to easily create charts using jQuery and HTML5

    1168 readersFor years, Flash was the only solution to display a dynamic chart on a website. But thanks to modern techniques, the dying Flash isn't needed anymore. In this tutorial, I'll show you how easy it is to transform a basic HTML table into a profesionnal looking chart using visualize.js, a very useful jQuery plugin.Like CatsWhoCode?

  • Top 10 best practices for front-end web developers

    1896 readersFront-end web developent can seem to be easy at first, but producing a clean, semantic, and cross-browser code is definitely a hard job. In this article, I have compiled the top 10 best practices that have been useful to me in the past 3 years.Like CatsWhoCode? If yes, don't hesitate to check my other blog

  • CSS Tutorials

    Understanding Floats in CSS – Making a 3-column layout

    403 readersSharing knowledge is cool and if your audience is willing to learn – its Uber cool! With that note, here is my little contribution towards the code monkeys. This article is meant for the people who are beginners or are in the mid-way of learning CSS (Cascading Style Sheets). When I started learning CSS, the

  • Animated background image with jQuery

    565 readersIf you're used to work with the jQuery library, there's no doubt that you know how powerful it is. In this tutorial, we are going to create a basic web page layout which includes a super cool animated background image, using jQuery.Have you checked out the highly recommended Digging into WordPress book by Chris Coyier

  • CleanR – Multi purpose template (Creative)

    782 readersCleanR Multi purpose HTML theme. This theme comes with 9 different pages, clean ,crisp look and 2 color variations (black&white) Preview White Version Preview Black Version Features: Smooth animations Jquery equal height boxes NO ...

  • How to Hide the WordPress Stats Smiley the Right Way

    1561 readersFor anyone who uses the WordPress.com stats plugin, you’ll notice it inserts a small smiley image in your footer. This image needs to be loaded to track the stats. Some people might think this little smiley face is “cute”. The rest of you will find the smiley image unsightly (and possibly evil looking) and