StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

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. 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://stylizedweb.com/2008/02/01/vertical-align-div/

2. Min-Height
  1.  
  2. selector {
  3. min-height:500px;
  4. height:auto; !important
  5. height:500px;
  6. }
  7.  
3. PNG transparency

http://stylizedweb.com/2007/12/30/png-transparency-issues/

4. Autoclear
  1.  
  2. .container:after {
  3. content: ".";
  4. display: block;
  5. height: 0;
  6. clear: both;
  7. visibility: hidden;
  8. }
  9. .container {display: inline-table;}
  10. /* Hides from IE-mac \*/
  11. * html .container {height: 1%;}
  12. .container {display: block;}
  13. /* End hide from IE-mac */
  14.  
5. Reset CSS
  1.  
  2. 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 {
  3. border:0pt none;
  4. font-family:inherit;
  5. font-size:100%;
  6. font-style:inherit;
  7. font-weight:inherit;
  8. margin:0pt;
  9. outline-color:invert;
  10. outline-style:none;
  11. outline-width:0pt;
  12. padding:0pt;
  13. vertical-align:baseline;
  14. }
  15. table {
  16. border-collapse:separate;
  17. border-spacing:0pt;
  18. }
  19. caption, th, td {
  20. font-weight:normal;
  21. text-align:left;
  22. }
  23. blockquote:before, blockquote:after, q:before, q:after {
  24. content:"";
  25. }
  26. blockquote, q {
  27. quotes:"" "";
  28. }
  29. strong {
  30. font-weight:bold;
  31. }
  32. em {
  33. font-style:italic;
  34. }
  35. * {
  36. margin:0pt;
  37. padding:0pt;
  38. }
  39.  
6. Scrolling Render IE
  1.  
  2. html {
  3. background : url(null) fixed no-repeat;
  4. }
  5.  
7. Opacity
  1.  
  2. #transdiv {
  3. filter:alpha(opacity=75);
  4. -moz-opacity:.75;
  5. opacity:.75;
  6. }
  7.  
8. PRE Tag
  1.  
  2. pre {
  3. white-space: pre-wrap; /* css-3 */
  4. white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
  5. white-space: -pre-wrap; /* Opera 4-6 */
  6. white-space: -o-pre-wrap; /* Opera 7 */
  7. word-wrap: break-word; /* Internet Explorer 5.5+ */
  8. }
  9.  
9. Li Background Repeat IE
  1.  
  2. <!--[if lt IE 7]>
  3. <style>
  4. #leftnav li { zoom: 1;} /* haslayout=true */
  5. </style>
  6. <![endif]-->
  7.  
10. Good to know
  1.  
  2. @charset "UTF-8";
  3.  
  4. /* ----------------------------------------------------------------------
  5. WinIE7
  6. ---------------------------------------------------------------------- */
  7. *:first-child+html selector{property:value;}
  8.  
  9. /* ----------------------------------------------------------------------
  10. WinIE6 & Mac IE
  11. ---------------------------------------------------------------------- */
  12. * html selector{property:value;}
  13.  
  14. /* ----------------------------------------------------------------------
  15. WinIE6
  16. ---------------------------------------------------------------------- */
  17. /*\*/
  18. * html selector{property:value;}
  19. /**/
  20.  
  21. /* ----------------------------------------------------------------------
  22. MacIE
  23. ---------------------------------------------------------------------- */
  24. /*\*//*/
  25. selector{property:value;}
  26. /**/
  27.  

Leave a comment on Stylized Web Have some feedback? Leave a comment

649 Comments So Far

  1. Useful and great list of hacks that as you said all coders should be aware of. Thanks for the great resource.

  2. Thanks! Very useful!

  3. Excellent resources, very useful for beginners like myself. Thanks

  4. Pingback: css Hack | Stan's Notes

  5. thank you wery much

  6. Muito bom este Post. Estous fazrndo um site de pizza em bh, belo horizonte brasil e sua dica realmente vai ser util.

  7. Realmente este blog deveria estar entre os melhores.

  8. CSS hack? woow

  9. Excellent resources, very useful for beginners like myself. Thanks

  10. I think it’s the one I need.

  11. Realy Nice, Big Thanks its realy usefull.

  12. Good article,thanks for share info

  13. Realy Nice, Big Thanks its realy usefull.

  14. I read with great interest.Your article looks nice,thank you for sharing with us!

  15. Placement: Footer of theme

  16. Achievement presents the only genuine delight in life

  17. 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.

    http://www.parka-outlet-2010.com,canada goose jacket.

  18. To a women,It goes without saying that the importance of bag to a women,we offer the cheap bags but top quality,hermes birkin.

  19. What a fantastic site! Thankyou for making it easy for beginners like me.

  20. Thanks for the usefull info at the blog.

  21. Thank you very much for sharing this.

  22. Hello…beautiful and the quality of a site

  23. Had the opportunity to review your site, you can share a little bit more up to date.Have a wonderful site.

  24. A beautiful and high quality information.this paper is accurate to be useful. Thanks to the author

  25. QUALITY POLICY;
    Always trust and cooperation based on the concept of customer, employee and partners maximize the satisfaction of the current technology and international standards, offering great service to the community and environmentally sensitivemanner,

  26. Nice site thank you for the usefull content

  27. Thankk you (:

  28. the current technology and international standards, offering great service to the community and environmentally sensitivemanner,

  29. the current technology and international standards, offering great service to the community and environmentally sensitivemanner,

  30. nice site thank you :)

  31. Thank you for sharing!Good!

  32. louboutin uk

  33. Our intention can be to evaluation problems identified according even although in the path of distinctive genres of composing.

  34. great post. i liked it…

  35. I beays by dre,beays by dre believe that we are not real social workers.

  36. Nice site thanks a lot

  37. Our intention can be to evaluation problems identified according even although in the path of distinctive genres of composing.

  38. Thanks for the content. Our intention can be to evaluation problems identified according even although in the path of distinctive genres of composing.

  39. I’ve been exploring for a little bit for any high quality articles or weblog posts on this sort of space . Exploring in Yahoo I eventually stumbled upon this web site. Reading this info So i’m glad to exhibit that I have an incredibly just right uncanny feeling I discovered just what I needed. I such a lot unquestionably will make certain to don?t put out of your mind this website and give it a look on a relentless basis.

  40. By søkmotoroptimalisering - billig seo fra Norge posted on December 20, 2011 at 7:57 am

    The auto clear function is just awesome. Thanks so much – it saves much time and makes css file smaller. Great article. http://lenkeguiden.blogg.no/

  41. By bra seo billig posted on December 20, 2011 at 8:03 am

    This was just awesome guys. Thanks. I used some of the functions on my søkemotoroptimalisering page

  42. In A, B, C, high levels of vitamins and beta carotene barındıran­African Mango, form meets guidelines as well as the effect of contributi­ng to the beauty of your hair and skin. Beta Carotene, to ensure the beauty of the skin, night vision to strengthen the immune system against disorders, a variety of infections contribute to the substance.­Those who want to enter the world healthy and permanent form, which is a product of choice for African Mango, now in Turkey. Because people prefer to use a 100% herbal product that helps people to enter the African Mango form a single product.

  43. Really nice information this is very help ful
    THanks for sharing…

  44. I used to be recommended this website by means of my cousin. I am now not positive whether or not this publish is written via him as nobody else know such detailed approximately my difficulty. You’re amazing! Thanks!

  45. Great post. I used to be checking constantly this weblog and I am impressed! Extremely useful information particularly the ultimate phase :) I care for such information a lot. I used to be looking for this particular information for a long time. Thank you and good luck.

  46. By Jai baghel posted on January 16, 2012 at 1:30 pm

    Nice site Thank you

  47. Wonderful items from you, man. I’ve take into accout your stuff previous to and you’re just extremely fantastic. I actually like what you have received here, really like what you are stating and the way in which you say it. You’re making it enjoyable and you continue to care for to stay it sensible. I cant wait to read far more from you. That is actually a great web site.

  48. Tremendous things here. I’m very satisfied to see your post. Thank you a lot and I’m looking ahead to touch you. Will you kindly drop me a e-mail?

  49. Yes, thats my opinion

  50. hello!,I really like your writing very much! percentage we communicate more about your post on AOL? I need an expert in this space to unravel my problem. Maybe that’s you! Taking a look forward to look you.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>