25 01/2010Damien Buckley Firefox & Safari incorrectly sizing table on hide/show

Data tableI came across an odd bug while working on a hide/show behaviour with a data table, specifically a set of summer / winter ferry timetables.

The tables in question have a fixed width and render perfectly without the hide/show mechanism and also (bizarrely) render correctly with the hide/show engaged in IE(Internet Explorer) but in Firefox and Safari, we get an odd gap on the right hand side of the table.

I’m using a simple jQuery slideToggle function which works perfectly elsewhere but in this case the data tables were creating a bug somewhere.

After checking the markup thoroughly and ensuring the page validated I spent an hour or so tooling around with the CSS to ensure I wasn’t causing the problem myself but to no avail.

I finally came to the conclusion that the faulty browsers are incorrectly calculating the table cell widths when switching from display:none to display:block.

Data tableI eventually resolved this by wrapping the table in a div and collapsing that instead of the table itself. Not exactly the most streamlined approach but it works.

Original code…

<table id="winter"…

Working code…

<div id="winter"><table…

Hope this helps if you encounter the same problem and would love to hear if anyone has a solution without the additional markup.

Happy hunting.

Like this? Share it!


  1. Simon Foust commented at 19:52 PM on 25 Jan 2010

    Wow nice catch. It’s definitely surprising when IE gets something right!

    On another note, imagine how much easier our job is going to be in a few years when we won’t have to rely on jQuery to do stuff like this. Can’t wait!

Recent Projects

  • The 'New' Stradbroke Island Beach Hotel Website

    Stradbroke Island Beach Hotel

    We dont often share single website launches but in this instance there is a degree of history behind it which speaks to a return on investment not normally associated with websites.

  • Brown Brothers Engineers New Zealand

    Brown Brothers Engineers New Zealand

    December 2013 saw the launch of a new Brown Brothers Engineers Australia website. October 2014 sees the turn of New Zealand parent company Brown Brothers Engineers.

  • RedFest 2014


    Read about Propeller’s 2014 responsive reboot of the RedFest website.

  • Into Harmony Health Services

    Into Harmony Health Services

    Into Harmony Health Services are located in Bayside, Brisbane. Melanie Young has been passionate about health and wellness for over 30 years. Following a substantial period of rehabilitation following a car accident and surviving cancer in her late twenties, Melanie has dedicated years of personal development and training to assisting other people with their health challenges.

Get The Latest!

Subscribe to our free e-newsletter for our latest news and offers - direct to your inbox.