Browser support for empty looking table cell

[keyplyr]

I am using a table with a couple dozen cells I want to appear empty. IE6 renders them empty with only a space inside the tag, but I am worried about cross-browser, backward support.

I vaguely remember some discussion about Netscape4 (?) needing something inside the TD tag other than a space (like a clear .gif file.) Would someone please elaborate on this?

[pageoneresults]

Yes there are issues with empty cells in IE vs. NS. I believe there are two ways to address this; one using the clear.gif method and the other using the nbsp between your <td></td> tags.

P.S. Add & before nbsp and ; after. I could not get it to work in this message. The clear.gif method gives you total control over the size of the cell. I would imagine this can be done with .css also, but that one is outside my realm of knowledge.

[keyplyr]

Thanks pageoneresults, yes it's all coming back to me now - LOL

I used the clear .gif files opting for browser stability, but the page just gained 9k in code/image weight - oh well. One of these days I will sit down and get deeper into CSS.

[bird]

but the page just gained 9k in code/image weight

You can just as well use an empty img tag for this purpose:

<img width="1" height="1">

It's not 200% standards compliant, but appears to be without any bad side effects. Limiting the height to 1 will also avoid the display of the ugly icon when images are not loaded. An empty img tag is slightly more code than the nbsp, but takes almost no space in the layout when this is an issue.

[keyplyr]

>You can just as well use an empty img tag for this purpose

hmmm, interesting. Thanks bird.

[andron]

like this?

<table>
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table>
 <tr>
 <td>&nbsp;</td>
 </tr>
</table>

(edited by: andron at 7:57 pm (utc) on Feb. 5, 2002)

(edited by: andron at 7:57 pm (utc) on Feb. 5, 2002)

(edited by: andron at 7:58 pm (utc) on Feb. 5, 2002)

[pageoneresults]

I don't think NS4 supports the empty <td> </td> element, therefore the use of nbsp and clear.gif. Meaning that if you have a cell that has a background color and it contains the empty <td> element, NS4 shows the cell as white (no content). Once you place the clear.gif or nbsp in that <td> element, the cell properties now take effect.

P.S. I would not use an image with a 1x1 dimension if I absolutely did not have too. There has been too much heated debate on this one (hidden links, keyword stuffing, etc.) and I'm staying away from it just in case!

[circuitjump]

I had problems doing &_nbsp;

So what I do is just make a background-colored image 1x1 pixels and use that.
I don't have any problems after that.

It's all for the NS 4.x

(edited by: circuitjump at 7:54 pm (utc) on Feb. 5, 2002)

[mivox]

I've always used <td>& nbsp;</td> (delete the blank space) with no noticable problems in any browser.

No need to clutter things up with a bunch of gifs if you don't have to.

[Crazy_Fool]

using & nbsp ; is fine with NN4. there is another NN4 problem with the tables displaying a gap between cells and this could screw your display up. to avoid the problem, dont put new table / tr / td tags on new lines. continue the lines as far as is practicable. ie:

<table><tr><td>& nbsp ;</td><td>text goes in here</td></tr><tr><td>this is the first cell on row2</td><td>another cell on row2</td></tr></table>

also make sure you html code is 100% correct with NN4 - check you haven't missed any tags. if all is correct, your table should display ok using & nbsp ; in empty cells.

[pageoneresults]

Crazy_Fool, actually I think the gap you are referring to occurs when the </td> tag is not on the same line with the <td> tag. Similiar gap issues also occur when your </p> tag is not on the same line with your <p> tag.

About a year and a half ago I went through all the sites that I manage and did a major overhaul on the html. All of my tags are now unbroken with no indents, tabs or spaces. You should be able to break your <tr> tags onto separate lines, its the <td> that causes the problems.

[joshie76]

>>So what I do is just make a background-colored image 1x1 pixels and use that.

One of the most useful tools is the 'shim.gif'. This is a 1x1 pixel transparent image... so you only ever need use that one, no matter what the background. You can resize it to be a spacer of any size you like using the width and height attributes in the img tag.

Right click here [hrmsoftware.com] and choose 'Save Target As'* if you want it.

* depending on your browser