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; }
  9. The New Bulletproof @Font-Face Syntax

    http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

    Internet Explorer < 9 has a bug in the parser for the src attribute. If you include more than one font format in the src, IE fails to load it and reports a 404 error. The reason is that IE attempts to load as a file everything between the opening parenthesis all the way to the very last closing parenthesis. To deal with that wrong behavior, you merely declare the EOT first and append a single hash mark. The hash fools IE into thinking the rest of the string is a URL fragment and loads just the EOT file. The other browsers follow the spec and select the format they need based on the src cascade and the format hint.

    .container { @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot#') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#webfontFqDaNIX6') format('svg'); }

References