A wee CSS / JS tip 10 Oct, 2008
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.
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#
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: blockdid horrible things until I figured out this tweak (not to mention the fact thatblockisn’t nice in any case). Thanks for the post!Ben Poole#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#
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#
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: blockthrew 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-rowdirective for those browsers solved the issue.Ben Poole#