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
min-height:500px;
height:auto; !important
height:500px;
}
3. PNG transparency
http://about.share4vn.com/2008/03/19/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%;}
.container {display: block;}
/* End hide from IE-mac */
5. Reset CSS
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
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;}
/**/
|
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
- 8 Best Open Source Shopping Carts
- Effect Foot Body on Flash
- PNG transparency issues
- How To Detect Internet Explorer Version With PHP
- SQL Injection Attacks by Example
[…] 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 […]