CSS & HTML - Written by admin on Wednesday, March 19, 2008 10:07 - 1 Comment
10 best CSS hacks
 (No Ratings Yet) Loading ... |
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://about.share4vn.com/2008/03/19/vertical-align-div/
2. Min-Height
selector {
min-height:500px;
height:auto; !important
height:500px;
}
min-height:500px;
height:auto; !important
height:500px;
}
3. PNG transparency
http://about.share4vn.com/2008/03/19/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 */
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:”;}
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;
}
background : url(null) fixed no-repeat;
}
7. Opacity
#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
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+ */
}
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]–>
<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;}
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}
/* ———————————————————————-
WinIE6
———————————————————————- */
/*\*/
* html selector{property:value;}
/**/
/* ———————————————————————-
MacIE
———————————————————————- */
/*\*//*/
selector{property:value;}
/**/
|
Read more:
»» Most used CSS tricks »» Vertical align div »» Make fancy buttons using CSS sliding doors technique »» Make fancy buttons using CSS sliding doors technique »» Matrix - Effect |
1 Comment
Most used CSS tricks « Share4Vn.com Blog
Leave a Reply
Most Popular Content
- Kopete, The KDE Instant Messenger
- Warning Signs You Can’t Ignore
- Robotic Jellyfish Swim and Fly at Hannover Fair
- The Real Indiana Jones
- Popular Wealth - Free Photoshop Brushes To Download
- 5 Ways To Combat Aging
- Inflatable robots could explore Mars
- Thinking the Way Animals Do
- Top 10 things to do in a blackout
- The most natural drug
- 30 Websites to follow if you’re into Web Development
- Please,I want you to help me with some of your books that will enable me to keep...
- You should also mention Ubercart (http://www.ubercart.org) a very powerful Drupa...
- Hello i am interessted on this script please can you contact me!?...
- Excellent article and oh so true.
Thanks...
- Well done.
If you use Ubuntu for, say, half a hour, you'll never go back to W...
- I own a "Super Battery" chinesse mobile phone, Chivak78, and I can assure you th...
- Thank You Very MUCH!!!
I had a working key, but the last time I reinstalled, it...
- Is this big deal end yet ?...
PHP, Tip & Tricks - May 30, 2008 3:20 - 0 Comments
Reuse Excel business logic with PHPExcel
More In Code
- Fetching a Web Page From Your PHP Code
- Computer Random vs. True Random
- Vertical align div
- How To Detect Internet Explorer Version With PHP
- computer marasms (90 photos)
Photoshop Tips - May 31, 2008 8:20 - 0 Comments
Popular Wealth - Free Photoshop Brushes To Download
More In How to ?
- Popular Wealth - Free Photoshop Brushes To Download
- FindSounds - Search the Web for Sounds
- 15 Handy Google Search Tricks
- Popular Desktop Applications And Their Online Alternatives
- 10 things your IT guy wants you to know
[…] CSS tricks Earlier before I have written an article about current best CSS hacks which you can see here. And now here’s the list of today’s most used CSS tricks – tips. I have added image examples […]