10 Css Hacks
09:33
Posted by Karthick
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, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}
6. Scrolling Render IE
html {
background : url(null) fixed no-repeat;
}
7. Opacity
#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
8. PRE Tag
pre {
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
10. Good to know
@charset "UTF-8";
/* ----------------------------------------------------------------------
WinIE7
---------------------------------------------------------------------- */
*:first-child+html selector{property:value;}
/* ----------------------------------------------------------------------
WinIE6 & Mac IE
---------------------------------------------------------------------- */
* html selector{property:value;}
/* ----------------------------------------------------------------------
WinIE6
---------------------------------------------------------------------- */
/*\*/
* html selector{property:value;}
/**/
/* ----------------------------------------------------------------------
MacIE
---------------------------------------------------------------------- */
/*\*//*/
selector{property:value;}
/**/
Post a Comment