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

683 Comments So Far

  1. John Deere Bulldozer Puzzle—Want a toy that will help
    with your child’s critical thinking development.
    Spacify`s range of Modern Kids Furniture is diverse enough
    to suit different tastes. Lego is always a great place
    to start in this area and they have a specific theme devoted to Fire fighters.

  2. Pretty component to content. I just stumbled upon your web site and in accession capital to claim that I
    get in fact enjoyed account your blog posts. Anyway I’ll be subscribing for your augment and even I achievement you access consistently quickly.

  3. Thanks for sharing your thoughts about harry agganis. Regards

  4. Hello! I know this is kind of off topic but I was wondering
    which blog platform are you using for this website? I’m getting tired of WordPress because I’ve had issues with hackers and I’m looking at alternatives for another platform.
    I would be fantastic if you could point me in the direction of a good platform.

  5. Thanks for ones marvelous posting! I quite enjoyed reading it,
    you might be a great author. I will be sure to bookmark your
    blog and definitely will come back sometime soon. I want to encourage you to ultimately continue
    your great posts, have a nice holiday weekend!

    Here is my page :: maximuscle

  6. Excellent post. I was checking continuously this blog and I’m impressed!
    Extremely helpful information particularly the last part :) I
    care for such information much. I was seeking this certain info
    for a long time. Thank you and best of luck.

  7. For newest news you have to pay a visit web and on web
    I found this web site as a best website for hottest updates.

    Also visit my blog post after effects Optical
    flares intro (8767f.com)

  8. This site really has all the information I wanted concerning this subject and didn’t know who to ask.

    My page … best xbox one games

  9. One of the unique features of VPS Hosting is its capability to
    offer a dedicated like environment to users. Because, if
    you open a physical shop, we have a very simple mathematics – a percentage of the people who enter your
    shop, will buy something. Nonetheless, I know it can help
    us in our mission-critical efforts to grow the business.

    My web site :: how to buy VPS hosting

  10. By entering the domain name in the tackle watering hole, a person will get to learn about
    business enterprise as it will open the web site of the enterprise.

    This package also comes with 24×7 customer support and 30 days money back guarantee.
    Then the CMS itself that will show her works online.

    Here is my website; free Drupal hosting

  11. You’ll benefit from VPS hosting India solution because
    it’s still cheap compared to the cost of a full-blown dedicated server and being marginally more expensive than the usual shared hosting package.
    VPS hosting is generally a little more cost effective than dedicated hosting but is in a sense
    a form of shared web hosting in that your account is partitioned on a shared web server with other websites.
    There are billions of people on planet Earth and thousands more are born every day in countries al over the world.

    Here is my webpage :: transfer files between hosting accounts

  12. The best thing about Joomla software is that is available
    free of cost on the internet. Most of the time, creating an e-commerce website
    requires a lot of caution than others mostly due to its business nature that involves
    mostly with unique customers. Hiring professional Joomla programmers has become quite convenient and cost-effective.

    Feel free to surf to my web site … joomla web hosting

  13. Sweet blog! I found it while searching on Yahoo News.
    Do you have any tips on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there!
    Thank you

    Also visit my web page … Ken Brackett Delaware

  14. Choose interesting easy to draw stencils rather than complicated stencil designs may helps.

    You are part of the force that runs the entire economy.
    com app is now ready for download in the Apple App Store or Google
    Play.

    Feel free to surf to my site: hunger games audiobook

  15. What’s up everybody, here every person is sharing these
    familiarity, thus it’s good to read this webpage, and I used to
    go to see this web site everyday.

  16. Oh, if yours is already taken, then just get it close it
    resembling it like “Daveand – Michelle – Lovett. You will want a service that has an adequate amount of space to allow for coming expansion as well as enough bandwidth to control the leads that growth will produce. If not, they might be susceptible to viruses and malicious attacks.

    Here is my blog … free WordPress hosting

  17. I am regular reader, how are you everybody? This piece of writing
    posted at this site is genuinely nice.

  18. Dining chairs often feature planked backs and seats, which can be harmonized with
    decorative cushion to make them a bit more relaxing.
    Local wood was used in creating the furnishings as provincial pieces are typically
    made of oak, walnut, fruit tree wood and beech.
    A healthy lifestyle is important, as it allows you to focus on showcasing your beauty instead of hiding your flaws.

    my weblog http://www.facebook.com

  19. It’s nearly impossible to find well-informed people about this topic,
    buut you sound like youu know what you’re talking about!

    Thanks

    Feel fdee tto surf to my web-site -Hair loss care Products

  20. Amazing! Its genuinely amazing post, I have got much clear idea concerning from this piece of writing.

  21. Tɦanks for finally writing about > StylizedWeb.com

  22. This websitre was… how do yoou say it? Relevant!!
    Finally I’ve found somethijg that helped me.
    Thanks!

  23. It can make it the first choice with the
    users and the most wanted and cozy P2P torrent engine ever produced in the world.
    In most the events the lenders may find it hard to meet up with with
    your specific requires of customers. Alexander, starring Colin Farrell, Anthony Hopkins
    and Angelina Jolie and directed by Oliver Stone
    included shots from Valletta’s Grand Harbour.

  24. Thanks for sharing your thoughts. I really appreciate your efforts and I will be waiting for your next post thank
    you once again.

  25. During rites of spirit-conjurations and evocations, shamans and those involved with Islamic occultism here in Indonesia often appropriate
    the Apel Jin oil for facilitating the contact. His emergency treatment
    was to get the patient to drink a cup of cayenne tea and
    within minutes the danger has passed. Do you want to add this
    to your spiritual tool box. Your taking place miracle sequences are
    usually congratulations, we have a cameo look
    and feel by your good Billy Mc – Combe plus the Miracle Fort is usually there being host to
    tricks. Inhalation: You can either apply the oil directly to your hands, rub them together and then cup your hands over your nose and inhale deeply.

  26. Goede dag ! ik gewoon willen bieden u een enorme thumbs up voor uw groot info je hier
    op dit bericht. I be terugkomen naar uw website voor meer binnenkort.
    te
    hallo daar en dank u voor uw info – Ik heb
    zeker opgepikt niets nieuwe van rechts hier. Ik deed echter deskundigheid aantal
    punten gebruik van deze website , omdat ik ervaren om de
    herladen website veel keer eerder aan dat
    ik kon krijgen om te laden correct. Ik was benieuwd of je webhosting is OK?
    Niet dat Ik ben klagen, maar trage laden gevallen tijden zullen heel vaak invloed op uw plaatsing in google en kunnen beschadigt uw
    hoge -kwaliteit scoren indien reclame en marketing
    met Adwords. Nou ik ben toevoegen van deze RSS aan mijn e-mail
    en kunnen uitkijken voor veel meer van uw respectieve fascinerende content.

    Zorg ervoor dat u deze weer updaten Binnenkort .

  27. Thanks for finally talking about > StylizedWeb.com

  28. Hi there colleagues, its fantastic paragraph on the topic of teachingand
    completely defined, keep it up all the time.

  29. I know this site provides quality based content and other data, is there any
    other site which offers these kinds of information in quality?

  30. It’s in reality a nice and useful piecee of info. I’m satisfied that you just shared this useful information with us.
    Please keep us informed like this. Thanks for sharing.

  31. Hi there mates, how is everything, and what you would like to say concerning
    this piece of writing, in my view its really remarkable for me.

  32. This is a very good tip particularly to those new to the blogosphere.
    Simple but very precise information… Appreciate your sharing this one.
    A must read article!

  33. Thankfulness to my father who informed me about this webpage, this web
    site is actually awesome.

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>