Unhide a table row – a cross browser solution

When you need to hide an element on a web page, you would probably make use of the display: none style. But what if you have a table row hidden with display: none and you need to unhide it? Probably you would change its display property to table-row.
Regrettably, this solution may break down a table in IE7 or IE8. IE will show a table row in a proper manner with display: inline-block only. To make the layout compatible across multiple browsers, you may either opt for conditional comments or rely on style overriding:

Conditional Comments

Create two sets of styles – one tuned for IE and another for the rest of browsers, and load them according to the user agent, like below:
<!--[if IE]>
<style type="text/css">.ticker-row { display: inline-block; }
</style>
<![endif]-->
<!--[if !IE]> -->
<style type="text/css">.ticker-row { display: table-row; }
</style>
<![endif]-->
The style declared first works in IE, whereas the second works in the rest of the browsers. Please note conditional comments are not understood by the style sheet processor, so you are allowed to include them in HTML markup only.

Style Overriding

Browsers like Fire Fox, Chrome or Opera, unlike IE, all understand display: table-row, and will readily override display: inline-block in the following declaration:
.ticker-row { display: inline-block; display: table-row; }
IE is blissfully unaware that display may have table-row value so will ignore it.

Comments

Popular posts from this blog

CREATE DATABASE (SMO)

Enable JSON serialization in your Visual Studio 2010 project

jQuery | remove inline style