Skip to the content

Labs » CSS Hackarounds

Tips, tricks and the such

  1. Cross browser hack for inline-block styling

    http://blog.izs.me/post/146672448/cross-browser-support-for-inline-block-styling

    Inline-block layout solves a lot of problems. It lets you do some cool stuff previously thought impossible with CSS. It makes vertical alignment work properly. And sadly, it’s supported pretty badly.
    .selector { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; /* for IE browsers*/ }
  2. Targeting IE6 and IE7 and IE8

    http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/ http://snook.ca/archives/html_and_css/targetting_ie7 http://www.ejeliot.com/blog/63 http://paulirish.com/2009/browser-specific-css-hacks/

    .selector { border:1px solid green; /* works in all */ border:1px solid pink\9; /* targets IE6, IE7, IE8 *border:1px solid red; /* targets IE6 and IE7 */ _border:1px solid blue; /* targets IE6 */ border/**/: 1px solid yellow /* Everything but IE6 */ border/*\**/: 1px solid maroon\9; } /* IE7, IE8 */ border: 1px solid brown !ie; } /* IE6, IE7: acts as an !important (string after ! can be anything) */ }
  3. Attribute-specific icons

    http://www.webspeaks.in/2010/07/25-incredibly-useful-css-tricks-you.html

    a[href$='.doc'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/doc.gif) no-repeat center right; }
  4. Min-height hack

    http://www.dustindiaz.com/min-height-fast-hack/

    .selector { min-height: 500px; height: auto!important; height: 500px; }
  5. Overflow attribute + positioning

    http://snook.ca/archives/html_and_css/position_relative_overflow_ie/

    Positioning elements in an overflow:scroll enabled container causes layout errors in IE6 and 7. To solve this, add position:relative to the container.

    .container { overflow: scroll|auto; (*)position: relative; }
  6. Tableless forms using labels

    http://www.webspeaks.in/2010/07/25-incredibly-useful-css-tricks-you.html

    form label{ width: 100px; float: left; margin-right: 10px; text-align: right; }
    <form action="/" method="post"> <label for="username">Username</label> <input id="username" name="username" type="text"> <label for="password">Username</label> <input id="password" name="pass" type="password"> <input type="submit" value="Submit"> </form>
  7. Vertical centering w/ line-height

    http://www.webspeaks.in/2010/07/25-incredibly-useful-css-tricks-you.html

    .selector { line-height: 30px; }
  8. Print page breaks

    http://www.webspeaks.in/2010/07/25-incredibly-useful-css-tricks-you.html

    While most of the internet users prefer to read content online but some of your users might like to print your article. With CSS you can control the page breaks within content just add this CSS class to your stylesheet and add this class to any tag which you would like to print on next page
    .selector { page-break-before: always; }

References

Control Panel
  • Theme: