Category Archives: CSS

Vertical Text Align Issue In Chrome

24 May 2012

(UPDATE: The good people at chromium have pointed out that Safari 5 fails on this too, and so this is a WebKit error not unique to Chrome).

Stumbled upon this one today in Chrome (submitted to the Chrome bug list on 7/3/12) – given the right set of circumstances vertical text alignment of italicized text will drop below the baseline. The complete list of circumstances that must be present to see this are:

  • At the time of this writing you must be using Chrome build 19.0.1084.46 m on Windows. I’m using Vista64.
  • Text must exist in a table cell
  • The text must not be wrapped by any other element
  • A portion of text must be italicized via the EM element
  • A portion of text must be superscripted via the SUP element
  • The wrapping TD element must have its VALIGN attribute set to “top”

Obviously this is pretty obscure. The key to producing this is the td/valign and the EM and SUP elements. The EM’d and SUP’d text must be on the same line and not be wrapped by anything at all within the TD. By either removing the SUP element or the TD VALIGN the issue goes away. Here are the test cases:

...
  // view this code in chrome and the emphasized "Motor Trend" will appear below the baseline
  
  </tr></table>
  
  // Next, lets remove the TD valign - and everything appears normal in Chrome
  
2012 Motor Trend Car of the Year®
2012 Motor Trend Car of the Year®
// Next, lets remove the SUP element and return the TD valign - and everything appears normal in Chrome
2012 Motor Trend Car of the Year®
// this is the "control" - outside of a table everything is on the baseline.

2012 Motor Trend Car of the Year®

...

And a screen shot of the above (or view it here):

This behavior only happens in Chrome. IE 7, 8, 9 and FireFox don’t exhibit this behavior. My fix to this problem was to set the vertical alignment of the EM element like so:

...

  (function fixChrome(){
     if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1){
       document.write('');
     }
  })();

  
2012 Motor Trend Car of the Year®
...

And with that, the above scenario displays as desired within Chrome.

Prevent Element Hilighting via CSS

17 May 2012

This is a tip that a guy in our office provided to me – preventing elements on a page from being hilighted if clicked on multiple times. This is useful if you bind events to elements that are being used as interface widgets such as navigation controls/buttons but you do not want the element to become hilighted if the user clicks more than once on them. This will happen if you have for example a DIV as a button container where the background of the DIV is the button art.

[edit 1/21/2014]

I added -webkit-touch-callout, -ms-user-select and the IE-specific JS.

...
#your_element_id{
    -webkit-touch-callout: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
::selection {
    background: transparent;
    color: none;
} 
::-moz-selection{
    background:transparent;
    color: none;
}
...

IE is a little different – in IE 8 (at least) you can use this bit of javascript:

document.onselectstart = function(){ return false };

Logo

All content © 2012-2017.