Little Gaps Between Tables 1

[doctorChuckles]

Hi,

I'm a do-it yourself web-page author. I'm upgrading my old site, which I made with a simple HTML editor. I'm learning to use CSS. That's going okay, but I'm stumped on a tiny item that's driving me nuts. Please help!

I'm using table cells with background-color or background-image to add some color and design to the pages. Standard stuff... Some of the table cells have html in them. Others are empty except for a background color or image. They just serve as decorative borders.

I'm seeing little gaps between the edges of table cells, table rows and different tables. They look two or three pixels wide. I'm pretty sure they are the same color as the background-color of the page as a whole. I've done the sensible things to make them go away. I've been careful to set all borders to "0". That didn't do any good. I tested the possibility that these gaps are borders by setting the border-color to black. The borders showed up adjacent to the gaps. That means these mysterious gaps are not borders. I've eliminated all <br> characters.

I'm setting the width and height of these cells using the width and height CSS specifications. I haven't done that before. I'm wondering if that involves a gotcha. That's just a wild guess. I could try setting the widths with spacer.gif instead.

I'm previewing these pages in Firefox, Safari, Explorer and the preview window in PageSpinner. They look the same way on every browser. All the CSS specifications are working, so I'm not making syntax errors. Firefox tends to ignore any CSS item that has a syntax error.

Any suggestions?

Thanks,

Tim

 

[Vragabond]

Did you also set [tt]cellspacing="0"[/tt] in your table declaration? That is usually the culprit for these gaps. If that does not help, then we will have to see some code.

And I do not think using tables outside displaying tabular data is 'standard stuff'. Maybe you should look even more into this CSS.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[doctorChuckles]

Hey, Vragabond,

Yup, that did it! Thanks a bunch. Wow! The frustration!

Is there a CSS property that corresponds to setting cellspacing in the table declaration? I looked for it at w3schools.com, but couldn't find anything.

Is the default value for cellspacing not "0" ?

Of course I still have much to learn about CSS, and I will likely forever remain a novice. I'll reflect on your comment about using tables to display anything other than tabular data.

At the moment, I don't know what to think about that. I'm really just displaying text and a few links in a table cell. Is that a mistake? I don't know how else to confine text to a rectangle in a desired location, with desired dimensions, with a distinctive background color and border.


Thanks again.


Tim

 

[Vragabond]

There is a CSS property called [tt]border-spacing[/tt], which equates to cellspacing set in the table declaration. Unfortunately, it is not adequately supported across browsers used today. Alternatively, one can add [tt]border-collapse: collapse;[/tt] to the table style, which produces much the same result, albeit through a different method. You no longer note what the spacing between border should be -- you define that adjacent borders should collapse into one, thus generally eliminating any possibility of having border gaps.

As for the rectangle. Table is not a rectangle, it is a table. That should give you a little warning. If all you're doing is building a rectangle, then why are you defining an element, rows, columns and cells. Take for example a div element. It is defined as unstyled block. Block is a rectangle. Now CSS can add borders to that box, it can add backgrounds, margins (gap from other elements to the border of this block), paddings (gap between the border of the box and the actual content), widths, heights and even specific positions, although that is usually not preferred, as we like to keep the elements flowing in their natural way. All in all, it gives you a much simpler, cleaner and precise way to put rectangles on your page.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]