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

666 Comments So Far

  1. Its like you read my thoughts! You seem to grasp a lot about this, like you wrote the ebook in it or something. I believe that you simply can do with some percent to force the message house a bit, however other than that, this is magnificent blog. A fantastic read. I’ll certainly be back.

  2. Great weblog here! Also your site a lot up very fast! What web host are you using? Can I am getting your associate link on your host? I wish my site loaded up as quickly as yours lol

  3. i like goood

  4. hvad er det her

  5. Many thanks for this insightful blog article I ultimately appreciate it.

  6. By boyo posted on April 23, 2012 at 7:49 pm

    thankss…

  7. i like goood

  8. By Maschmo posted on May 11, 2012 at 1:57 pm

    Also a good hack:

    display: inline-block; doest work in ie7

    instead you can use:

    zoom: 1;
    *display:inline;

  9. Pingback: Dicas Interessantes #4 | Alvo Conhecimento

  10. ray bans cheap company sale many ray bans cheap,all ray bans cheap low price and free shipping for you, our ray bans cheap store suppley many ray bans cheap products for everyone, ray bans cheap very hot sale in this time.buy ray bans cheap in our ray bans cheap give you most discount.

  11. i’d same on say because you at all times bid valid facts then i receive been one captivated reader of your section for quite any time.

  12. 11th September 2001 was an inside job

  13. Nice site,i liked it…

  14. Pingback: Dicas Interessantes #4 | Alvo ConhecimentoAlvo Conhecimento

  15. Many thanks for this insightful blog article I ultimately appreciate it.

  16. good your think ok fine. I check my web site my link is my name ok.

  17. ok
    thankss…

  18. I have read several good stuff here. Certainly price bookmarking for revisiting. I wonder how much attempt you put to make one of these magnificent informative web site.

  19. IRAN IRAN

  20. I reviewed your site, a quality of place is very beautiful and wish you continued success. Thank you

  21. Very useful CSS hacks

  22. Interestin Website for browser game developer

  23. I blog quite often and I seriously appreciate your content.
    Your article has really peaked my interest. I am going to book mark your website and keep checking for new details about once a week.

    I subscribed to your Feed as well.

  24. By Granted, although posted on May 5, 2013 at 8:53 pm

    Finally! If you believe that Obama will also provide Four billion retooling tax credits and loan guarantees for domestic auto factories and parts suppliers, so that the new fuel efficientautos can be built in the United States by American workers instead of overseas.

  25. Pingback: 國外轉過來十個最好的CSShacks | QiHi 前端技术分享

  26. I know this if off topic but I’m looking into starting my own weblog and was curious what all is needed to get setup? I’m
    assuming having a blog like yours would cost a pretty
    penny? I’m not very internet savvy so I’m not 100%
    positive. Any suggestions or advice would be greatly appreciated.
    Kudos

  27. Pingback: 10bestCSShacks - HTML/CSS - 开发者第1704384个问答

  28. Thank you for the auspicious writeup. It in reality was a amusement account it.
    Glance complex to far brought agreeable from you! However, how can we communicate?

  29. I read this article completely regarding the resemblance of
    most up-to-date and preceding technologies, it’s remarkable article.

  30. I’m amazed, I must say. Seldom do I encounter a blog that’s equally educative and interesting, and let me tell
    you, you have hit the nail on the head. The issue is
    an issue that too few people are speaking intelligently about.
    I am very happy I found this during my search for something relating to this.

  31. I’m really enjoying the design and layout of your site. It’s a
    very easy on the eyes which makes it much more enjoyable for me to come here and visit more often.
    Did you hire out a designer to create your theme? Fantastic work!

  32. Hi my family member! I wish to say that this post is awesome, nice written and include approximately all important infos.
    I would like to see more posts like this .

  33. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time
    a comment is added I get three e-mails with the same comment.

    Is there any way you can remove me from that service?
    Many thanks!

  34. Asking questions are really nice thing if you are not
    understanding anything completely, however this post offers
    fastidious understanding even.

  35. Super! Das war ein ausgesprochen eindruckvoller Artikel.

    Danke, dass sie diese Erklärung bereit gestellt haben.

  36. I ωas able to find gooԁ info from yοuг content.

  37. Treatment truly really should be studied if you’re recognized to be stricken with depression, as Phen375 will obvious up this, however what happens should you finish
    utilizing it. Shedding pounds pushed, as well as the Curvatures for females plan, oahu is the essential an area of the software.
    You’re getting the ideal fat burners when you’re advised to keep
    a healthy way of life by performing some exercises each day.

  38. Thanks. Good article.

  39. I leave a response each time I like a article on a website or if I have something to valuable to
    contribute to the discussion. Usually it is a result
    of the passion communicated in the post I read. And on this post 10
    best CSS hacks | StylizedWeb.com. I was moved enough to drop a
    thought ;) I actually do have a couple of questions for you if
    it’s allright. Could it be simply me or do some of these remarks appear
    as if they are coming from brain dead folks?
    :-P And, if you are posting on additional places, I’d like to follow
    you. Would you make a list every one of your social sites like your Facebook page, twitter feed, or linkedin profile?

  40. Haben Sie einen rss feed, den ich abonnieren kann?
    Ansehnliche Information, Sie haben einen neuwertigen Leser dazugewonnen.

  41. Howdy! Someone in my Myspace group shared this website with us so I came to give it a look.

    I’m definitely enjoying the information.

    I’m bookmarking and will be tweeting this to my followers!

    Superb blog and superb style and design.

    Here is my web blog – Farstone Coupon Code (Chance)

  42. I really wanna read your blog every day! – I really love reading blogs
    and also pay day loans.

  43. Howdy! I just would like to give a huge thumbs up for the nice data you

  44. Hi, i believe that i noticed you visited my website thus i came to go back the prefer?.I am
    attempting to find issues to enhance my website!I suppose its good enough to make use of a
    few of your ideas!!

    my webpage criminal defense attorney miami

  45. I love to share knowledge that will I have accumulated with
    the year to assist improve team functionality.

    Feel free to surf to my weblog – 律師

  46. very ı good very nice beatufull İstanbul ankara travesti yes

  47. With havin so much content and articles do you ever run into any issues of plagorism or copyright
    violation? My website has a lot of exclusive content I’ve either created myself or outsourced but it seems a lot of
    it is popping it up all over the web without my authorization.
    Do you know any solutions to help prevent content from being stolen?
    I’d certainly appreciate it.

    Also visit my weblog wholesale what is the best over the counter face moisturizer

  48. Hi there! I could have sworn I’ve beeen to this
    websitye before but after going through some of the articles I realized it’s new to me.

    Regardless, I’m definitely delighted I came across it and I’ll be bookmarking it and checking
    baqck regularly!

    Review my page: home remedies baking sooda for kidney infection pain (Roseanne)

  49. My brother suggested I would possibly like this web
    site. He was once totally right. This submit actually made my
    day. You can not consider just how a lot time I had spent for this information!
    Thanks!

  50. Aw, this was an exceptionally nice post. Taking the time and actual effort to make a top nnotch article… but what can I say… I hesitate a whole lot and never manage to get anything done.

    My bblog post – ouvrir un site internet gratuitement

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>