Home > CSS > 10 best CSS hacks

10 best CSS hacks

by Dejan Cancarevic

http://stylizedweb.com/

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

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

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote,th,td {

margin:0; padding:0;

}
table {border-collapse:collapse;border-spacing: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

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

<!–[if lt IE 7]>
<style>

#leftnav li { zoom: 1;} /* haslayout=true */

</style>
<![endif]–>

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;}
/**/
Advertisements
Categories: CSS Tags: ,
  1. February 20, 2008 at 11:15 am

    thanks for mentioning me

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: