Tuesday, May 09, 2006

Empty table cells and Internet Explorer

Now I understand why cross-browser development is the experience mostly.
In nonogram I needed an empty cell (TD HTML object) with fixed size, and the cell can have several different backgrounds. And I'm building the table on fly with JavaScript.
I'm doing all testing in FireFox, and I was surprised after I checked the game in IE and Opera - empty cells don't have borders.
I tried to use CSS method - "empty-cells: show;", it helped with Opera, but not with IE.
I tried to put nbsp in the cell - size of cell became larger than I wanted.
I put 1x1 transparent gif in each cell, that helped, but it took around 8 seconds to load/render the table in IE (1.5 sec in FF).

So the current solution is to have a small char in the cell, say '.', with the same color as background of the cell. And set the cursor for cells as "cursor: default;".

Loading and rendering times now are:
3 sec in IE, 0.85 sec in FF and 0.4 sec in Opera.
Speed is still slow, but more acceptable. Maybe it makes sense to generate the table on server side.

I still not sure how it will work with older versions of browsers. :)

Labels: ,

1 Comments:

Anonymous Anonymous said...

try
border-collapse: collapse;
empty-cells: show;

at table level in your css

regards,
boris

4:25 AM  

Post a Comment

<< Home