How to make a horizontal definition list (dl, dd, dt)

CSS posted 12 months ago by christian

   1  dl { float:left; width:100%; }
   2  dt,
   3  dd { float:left; width: 50px; margin:0; padding:0; }
   4  dt { padding-right:0.5em; }

Tagged definition list, dd, dl, horizontal

Trigger hasLayout for IE

CSS posted about 1 year ago by christian

   1  <!--[if IE]><style>
   2  .layout {
   3  	height: 0;
   4  	he\ight: auto;
   5  	zoom: 1;
   6  }
   7  </style><![endif]-->

Tagged haslayout, ie6, ie7, ie, browser, bug

How to make a DIV element fill the browser window

CSS posted about 1 year ago by christian

   1  <html>
   2  <body>
   3  <style type="text/css">
   4  html, body {
   5    height: 100%;
   6    margin: 0;
   7    padding: 0;
   8  }
   9  #container { /* div you want to stretch */
  10    background-color: green;
  11    height: 100%; /** IE 6 */
  12    min-height: 100%;
  13  }
  14  </style>
  15    <div id="container">
  16      This div should cover the whole page.
  17    </div>
  18  </body>
  19  </html>

Here’s an example with header and footer.

Tagged fullscreen, div, window, height

Cheat sheet for calculating CSS specificity

CSS posted about 1 year ago by christian

   1  *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
   2  li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
   3  li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
   4  ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
   5  ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
   6  h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
   7  ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
   8  li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
   9  #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
  10  
  11  style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
  12  

From the CSS specificity calculator

Note that using the !important CSS declaration raises the CSS specificity so avoid it.

Tagged css, specificity, calculator, important

How to localize Rails routes

CSS posted about 1 year ago by christian

I forget this all the time:

   1  map.resources :products, :as => 'productos', :path_names => { :new => 'nuevo', :edit => 'editar' }

Documented here….

Tagged resources, routes, localize, rails