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.
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
2. Min-Height
min-height:500px;
height:auto; !important
height:500px;
3. PNG transparency
http://stylizedweb.com/2007/12/30/png-transparency-issues/
4. Autoclear
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;
/* End hide from IE-mac */
5. Reset CSS
fieldset,input,p,blockquote,th,td {
margin:0; padding:0;
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;font-weight:normal;
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:”;}
6. Scrolling Render IE
background : url(null) fixed no-repeat;
7. Opacity
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
8. PRE Tag
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
9. Li Background Repeat IE
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]–>
10. Good to know
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}/* ———————————————————————-
WinIE6
———————————————————————- */
/*\*/
* html selector{property:value;}
/**//* ———————————————————————-
MacIE
———————————————————————- */
/*\*//*/
selector{property:value;}
/**/
thanks for mentioning me