- blog n.
- Website on which an individual or group of users produces an ongoing narrative.
25 01/2010
Firefox & Safari incorrectly sizing table on hide/show
I 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.
I 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.
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!