Hiding a DataTables column without removing it from the DOM

Sometimes you want to hide a column in a DataTable but keep its data in the DOM – maybe you need it for export, for a tooltip, or for some other operation that happens after the table renders. Removing the column entirely means losing that data, which isn’t always an option. The fix is embarrassingly simple: CSS. The setup Add a class to the column you want to hide using the sClass option in your DataTables initialisation: ...

Flash z-order — always on top?

I had a JavaScript pull-down menu that overlapped with a Flash movie. No matter what z-index I set, the menu always rendered behind the Flash content. Classic problem. The fix is to set wmode to transparent on both the <object> and <embed> tags: <object ...> <param name="wmode" value="transparent"> <embed ... wmode="transparent"></embed> </object> This tells the Flash player to respect the browser’s stacking context instead of rendering in its own window layer. The menu displays correctly over the Flash movie after that.

CSS Browser Compatibility Improvement Tip

Different browsers apply different default padding and margin to the <html> and <body> elements. If you don’t reset them, you’ll get unexpected whitespace that varies from one browser to another. The fix is to simply zero them out at the top of your stylesheet: html { padding: 0; margin: 0; } body { padding: 0; margin: 0; } This is the first rule I add to any new project.

CSS fail

Never do this: position: absolute; left: 99px; It feels like a handy quick fix to shove an element where you want it, but it never actually works. The layout breaks as soon as the content changes, the screen resizes, or anyone else touches the code. I learned this the hard way more times than I’d like to admit.