Showing posts from April, 2012

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 s…