PreviousNext…

A wee CSS / JS tip

You live and learn. I thought I knew quite a lot about CSS but I found out something new a few weeks back.

Whilst doing some CSS and Javascript work to make an IE-only site play nice with WebKit and Gecko (urgh), I discovered that there is another CSS display attribute, in addition to the usual none, inline and block. We also have display: table-row;

This is quite an important one, if you want to avoid weird display issues in browsers other than IE6. If you use Javascript functions to hide and reveal page elements, you’ll want to change your code to cater for the table-row attribute type (this only applies of course, if your dynamic elements are in HTML tables).

Most hide / reveal functions out there just toggle the attribute between none and block, but this is not enough. Your carefully laid-out table will freak in any sensible browser if you apply display: block; to one or more table rows.

(Note that I’m setting aside arguments about using HTML tables in the first place—they do have their place you know, so long as you’re not using them for layout purposes :-p)

Be warned however, that IE6 knows nothing about this attribute, so you still need to use display: inline; (or whatever) for older versions of Internet Exploder. In the Javascript function provided, I do the simple document.all test for IE to work with this, but you may want to use your own browser sniffer here.

Anyway, here’s the example function for hiding / revealing a table row. A suggested improvement? Instead of having a function specific to table row elements, have a generic show / hide function which is clever enough to test a given element—if said element is a table row, do the table-row thing, otherwise block or inline—you get the idea.

function showHideTableRow(el)
{
  var styleType = "table-row";
  // Different for IE
  if(document.all) styleType = "block";
  tr = document.getElementById(el);
  tr.style.display = (tr.style.display=="none" ? styleType : "none");
}

By the way, you can read more about this attribute in a thread on the Velocity Reviews forum.

Comments

  1. Hey Ben

    Got me thinking now …. I stopped using "block" a good long time ago as it's not recommended for cross-browser compatibility. I use either '' or 'none' - where '' does a reset on some browsers and a removal of attribute on others - effectively rendering it displayed.

    Did you try this instead? I've not had the problem you're describing above and use TR, TD hide/display without any probs cross-browser.

    Just a thought!

    Regards

    Mark
    LogicSpotMark Haller#
  2. Interesting—recently I’ve noticed people doing display: "" so you’re probably right. Like the post says: we live and learn!

    The bug is quite subtle: we have a table nested within a table, with lots of CSS to pad out cells and all sorts (it’s nasty), and display: block did horrible things until I figured out this tweak (not to mention the fact that block isn’t nice in any case). Thanks for the post!Ben Poole#
  3. Hehe, it's a nightmare when you get to the stage of a behemoth of CSS - engineering over engineering verbatim … and you want to "start again" but wonder what "you'll break" … ahh!

    I love CSS and there's not much I've not tried to crack with it or it's tried to crack me with :-)

    Take it easy,

    MarkMark Haller#
  4. I now use a class to hide an element instead of setting the display property. I haven't had any problems using a class to hide multiple rows in a table with IE, Firefox, Safari and Opera. What problems were you having with the tables?

    Also I use the following from Dean Edwards to sniff for IE since Opera also supports document.all.

    var isMSIE = /*@cc_on!@*/false;
    Tanny O'Haley#
  5. Good tip Tanny, thanks. The table issue was a real edge case:

    The first row of a table embedded within multiple tables was initially hidden. An Ajax call further up the page triggered a load of code, and depending on what happened there, also triggered a standard show / hide Javascript toggle on the aforementioned hidden table row. We found that firing this code, which then set the table row to display: block threw the whole page out of whack, and the table row was not sized correctly. This was reproducible in Firefox and Safari, didn’t cause an issue in IE.

    Updating the code to use the correct display: table-row directive for those browsers solved the issue.Ben Poole#

Comments on this post are now closed.

About

I’m a software architect / developer / general IT wrangler specialising in web, mobile web and middleware using things like node.js, Java, C#, PHP, HTML5 and more.

Best described as a simpleton, but kindly. You can read more here.

";