How to eliminate space between table border and table contents?

[Michael Mayo]

I have a simple html page that contains an image in a single table cell,
surrounded by a border: <http://www.softrains.com/lc/test.html>. I would
like to eliminate the space between the table border and the table
contents. I have tried setting margin: 0 in CSS everywhere, as well as
cellmargin/cellpadding in HTML.

What is the best way to eliminate the extra space between a table border
and its contents?

Thanks,
-Mike

[boclair]

Michael Mayo wrote:

I have a simple html page that contains an image in a single table cell,
surrounded by a border: <http://www.softrains.com/lc/test.html>. I would
like to eliminate the space between the table border and the table
contents.
What is the best way to eliminate the extra space between a table border
and its contents?

Add border-collapse:collapse to table style

Louise

[David Ross]

Michael Mayo wrote:

I have a simple html page that contains an image in a single table cell,
surrounded by a border: <http://www.softrains.com/lc/test.html>. I would
like to eliminate the space between the table border and the table
contents. I have tried setting margin: 0 in CSS everywhere, as well as
cellmargin/cellpadding in HTML.

What is the best way to eliminate the extra space between a table border
and its contents?

Don't use a table for this. Use a style-sheet or local style to
set the border on the image itself. Center the image using a div
with a centered style:
<div style="text-align:center"><img . . .></div>
(But I would probably use <p align="center">, which is still
tolerated under HTML 4.01 transitional.)

Tables should be used only to present information in a tabular
arrangement.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.

[Adam Risser]

Why not eliminate the table and just add

style="border: solid #41A0D0 2px;"

to the image itself? Is that not what you want?

[none]

On Tue, 06 Dec 2005 07:12:10 -0800, Adam Risser wrote:

Why not eliminate the table and just add
style="border: solid #41A0D0 2px;"
to the image itself? Is that not what you want?

The page I presented is a bit oversimplified. In the final version, the
image will be at the top of a table containing the entire page, with a
border drawn around the entire page. So, I don't think this will work.

Thanks,
-Mike

[none]

On Tue, 06 Dec 2005 01:38:14 +0000, boclair wrote:

Add border-collapse:collapse to table style

Thanks very much for that answer! I read the w3c document on this and
it seems that the newer "collapsing border" model is much more versatile.
However, I also discovered that I could do it in the old model by
specifying a 'border-spacing' property:

border-collapse: separate;
border: solid #41A0D0 2px;
border-spacing: 0px;

Is there a preferred way to do it?

Thanks,
-Mike

[none]

On Mon, 05 Dec 2005 18:32:08 -0800, David Ross wrote:

Don't use a table for this.
Tables should be used only to present information in a tabular
arrangement.

You're right, but for political reasons I can't do it this way. I would
probably be beheaded in public.

-Mike

[Lauri Raittila]

in comp.infosystems.www.authoring.html, none wrote:

On Tue, 06 Dec 2005 07:12:10 -0800, Adam Risser wrote:

Why not eliminate the table and just add
style="border: solid #41A0D0 2px;"
to the image itself? Is that not what you want?

The page I presented is a bit oversimplified. In the final version, the
image will be at the top of a table containing the entire page, with a
border drawn around the entire page. So, I don't think this will work.

Then something else will work. Wrapping anything to a table just to get a
border is a stupid idea, because it doesn't work on any browser, let
alone work similarly. And understanding how it should work, and how it
works in different browsers is not exactly simple. And it is not even
correct...

Wrap things to div instead, and give div a border. (and never wrap just
one element in something to get border, unless you need multible
borders/backgrounds/whatever)

Far more easy to get right. Unless you really need to get it work pixel
perfectly on NN3 or IE3, but then, why would you even consider CSS?

Anyway, if you happened to have image in table, and you would need to get
rid of that space, you could do some or all off:

table {border-spacing:0;} /* thakes away spacing between cells in
separated borderr modell*/
table {border-collapse:collapse;} /* changes border modell*/
img {vertical-align:top} /* aligns image to top of line*/
img {display:block;} /* changes image to block thus it is not rendered
on baseline*/


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[none]

On Tue, 06 Dec 2005 17:52:54 +0100, Lauri Raittila wrote:

Then something else will work. Wrapping anything to a table just to get a
border is a stupid idea, because it doesn't work on any browser,
What do you mean by 'doesn't work'? I agree that it isn't the right way to
do it, but I'm hoping that it will work anyway in most cases.

Wrap things to div instead, and give div a border. (and never wrap just
one element in something to get border, unless you need multible
borders/backgrounds/whatever)
As I mentioned previously, I can't use the div tag anywhere in my html for
political reasons -- it has been officially declared an enemy of the
revolution.

img
{vertical-align:top} /* aligns image to top of line*/ img {display:block;}
/* changes image to block thus it is not rendered on baseline*/

Hrm...aren't vertical-align:top and display:block the default for images?

Thanks,
-Mike

[Eric Kenneth Bustad]

In article <pa****************************@nowhere.invalid> ,
none <no***@nowhere.invalid> wrote:

On Tue, 06 Dec 2005 17:52:54 +0100, Lauri Raittila wrote:
[snip]

Wrap things to div instead, and give div a border. (and never wrap just
one element in something to get border, unless you need multible
borders/backgrounds/whatever)

As I mentioned previously, I can't use the div tag anywhere in my html for
political reasons -- it has been officially declared an enemy of the
revolution.
[snip]

Sounds more like a counter-revolution.

--
= Eric Bustad, Norwegian bachelor programmer

[Steve Pugh]

none wrote:

On Tue, 06 Dec 2005 17:52:54 +0100, Lauri Raittila wrote:

img
{vertical-align:top} /* aligns image to top of line*/ img {display:block;}
/* changes image to block thus it is not rendered on baseline*/

Hrm...aren't vertical-align:top and display:block the default for images?

No. vertical-align: baseline and display: inline would be much closer
to the default presentation of <img> elements in most browsers.

Steve

[Lauri Raittila]

in comp.infosystems.www.authoring.html, none wrote:

As I mentioned previously, I can't use the div tag anywhere in my html for
political reasons -- it has been officially declared an enemy of the
revolution.

Then you should perhaps try some other forum, as your problem clearly is
not HMTL nor CSS.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>