table cell widths and shims. And heights

[gulliver]

I'm not a pro-coder - and struggle with much of my own stuff.

For reliability I'm continuing to use tables rather than CSS. I specify pixels rather than percent.

I'm confused over suggestions to shim table cells to ensure a specified width.

I've to date worked on the belief that specifying the width of the table and all the individual columns will produce a layout which displays correctly across all browsers.

Example - a 500px wide table with colums of 230, 40 and 230. I'll dump text in the two wider cols and a single non-breaking space in the other to keep them apart.

Height seems to be a different issue...

Specifying a height only seems reliable when it's greater than the fontsize.
Example height="40" gives me whitespace control.

Specifying small heights is reliable when using shims.
Example, for a thin horizontal line I'll replace the single non-breaking space in a row with a single pixel gif - of an appropriate color and coded to stretch to the desired size.

Am I right - or am I deluded and producing layouts which don't work?

Advice appreciated. Please and thanks.

[isitreal]

You are right, tables cells will expand vertically to fit their content, also horizontally if for example you put in an image larger than the cell. If you use CSS to declare the widths and heights browsers tend to treat this a little more strictly.

Consider instead of using a single pixel cell to create a border just using CSS, it's easier and more maintainable:

td#cell1 {border-bottom:1px solid #000000;}

no need to generate little gifs, no need to worry about collapsing table cells.

Or simply put in a small spacer gif, 1 x 1, transparent, then declare the background color on the 1 px cell in CSS, like

td#cell1 {background-color:#000000;

[gulliver]

Thanks. You raise some good points on CSS - which I use where appropriate... currently sparingly to ensure max compat with 98-era browsers like NN4. (Along with amazon, apple, microsoft etc)

Using fixed width tables for layout and restricting CSS to non-critical embelishments I can be more sure of the layout not falling apart.

[isitreal]

If you are still supporting NS 4 be very careful if you use things like margins on images or table cells, those tend to fatally crash NS4, sometimes to the degree you have to reboot to get it running again.

Protect your CSS code against this by this:

td#cell1 {
padding:20px;
/*/*/
margin:10px;
border:1px solid #ccc;
/* */
}

the stuff within the /*/*/ and /* */ won't be run by netscape, which doesn't really support borders at all, not to mention crashing on margins.

There are so few netscape users out there now though that presenting them with a slightly toned down page look should not be considered a real problem.

[gulliver]

Thanks.

I use a simple stylesheet for NN - just the bgcolor and font face, color and weight tags.

Other stuff is covered by @import of more complex sheets.