CSS Tips and Tricks

Cross browser hack 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.
.some-selector {
  display:-moz-inline-stack;
  display:inline-block;
  zoom:1; *display:inline; /* for IE browsers*/
}

Targeting IE6 and IE7 and IE8

.some-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) */
}

Attribute-specific icons

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

Min-height hack

.selector {
  min-height: 500px;
  height: auto!important;
  height: 500px;
}

Overflow attribute + positioning

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;
}

Tableless forms using labels

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>

Vertical centering w/ line-height

.selector {
  line-height: 30px;
}

Print page breaks

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;
}

The New Bulletproof @Font-Face 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