Wednesday, June 8, 2011

Google Chrome Layout Bug

It seems that the em calculations in Google chrome are slightly off track. Following is a small piece of HTML using DOJO toolkit’s default CSS. Its font size and line height calculations are based on

  1: <!DOCTYPE html>
  2: <html>
  3:   <head>
  4:   <style>
  5:   @import url("");
  6:   </style>
  7:   </head>
  8:   <body>
  9: <blockquote>
 10: Testing dojo blockquote.
 11: </blockquote>
 12:   </body>
 13: </html>


The relevant CSS is presented below:

  1: body { 
  2:   font: 12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif; 
  3:   *font-size: 75%;
  4: }
  7: blockquote { 
  8:   font-size: 0.916em; 
  9:   margin-top: 3.272em; 
 10:   margin-bottom: 3.272em; 
 11:   line-height: 1.636em; 
 12:   padding: 1.636em; 
 13:   border-top: 1px solid #ccc; 
 14:   border-bottom: 1px solid #ccc;
 15: }


Now if we look at this block-quote’s layout in Firefox (4), it looks like as follows:


While the layout in Google Chrome (11.0) looks like:


You can notice that Firefox reports the padding to be 18 pixels, while Chrome reports it to be 17 pixels. Similarly, Firefox says the margin to be 36 pixels while Chrome considers it to be 35 pixels.

I think at least one of them is wrong.

Looking at the stylesheet, the computation goes like this:

font-size  = 12 * 0.916 = 10.992 pixels

padding = line-height = font-size * 1.636 = 17.983 pixels

margin-top  = margin-bottom = font-size * 3.272 = 35.965 pixels

Looking at computed styles, we can notice that for both Firefox and Chrome, the font-size is coming out to be 11pixels. It looks like Chrome is truncating margins and padding while it is rounding the font size.

Monday, June 6, 2011

Browser-Specific Styles with the Dojo Toolkit

Browser-Specific Styles with the Dojo Toolkit

I was fascinated to learn how dojo.uacss.js adds browser specific CSS classes to html element which make writing maintainable CSS straightforward by providing simple ways to write browser specific CSS customizations.

Read more above.