css table and border-margin-..

[Bob Bedford]

I've an image in a cell of a table.

I've this CSS:

..dbtable{
width: 600px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-collapse: collapse;
border: 1px solid #000000;
cursor: default;
}

..dbtable th{
font-weight: bold;
font-size: 13px;
background-color: #999999;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
/*border: 1px solid #000000;*/
}

..dbtable td{
border: 1px solid #000000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

I still have a left, bottom and right border around an image in a cell (but
strangely not at top).
How to avoid this ? I'd like no border between the image and the cell
border.

Also the text on the cell has top and bottom border. I'd like to set it to
0. How ?

Bob

PS: any link to manage tables in CSS would be interesting.

[Steve Pugh]

"Bob Bedford" <be******@notforspammershotmail.com> wrote:

I've an image in a cell of a table.

I've this CSS:

.dbtable{
width: 600px;
padding: 0px 0px 0px 0px;
Is this class applied to a table? Tables don't have padding.
margin: 0px 0px 0px 0px;
margin: 0; is simpler.
border-collapse: collapse;
border: 1px solid #000000;
cursor: default;
What's the point of this?
}

.dbtable th{
font-weight: bold;
font-size: 13px;
Pixel sized text is a bad idea as Win IE users can't easily resize it
as needed.
background-color: #999999;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
/*border: 1px solid #000000;*/
}

.dbtable td{
border: 1px solid #000000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

I still have a left, bottom and right border around an image in a cell (but
strangely not at top).
Which styles are you applying to the image? The border of the image is
controlled by the styles applied to the image, not by the styles
applied to the table.
How to avoid this ? I'd like no border between the image and the cell
border.
td img {border: none;}
will remove the border from around all images inside table cells.
Though by default browsers only draw borders around images that are
links so you must have added the border yourself somewhere.
Also the text on the cell has top and bottom border. I'd like to set it to
0. How ?

border: none; on whichever element actually has the border. As very
few elements have borders by default it's most likely something that
you've added yourself. So look for any border styles in your CSS and
remove them.

Unless, you don't actually mean borders when you say borders.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Spartanicus]

Steve Pugh <st***@pugh.net> wrote:

.dbtable{
width: 600px;
padding: 0px 0px 0px 0px;

Is this class applied to a table? Tables don't have padding.

They do, but as with the html cellpadding attribute it's not applied on
the element itself, but on the descendant cells. Note that it's worded
in a way that is easily misunderstood:

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Value: <padding-width> | inherit
Initial: 0
Applies to: all elements except elements with table display types
other than table, inline-table, and table-cell

Also note that IE fails to get this right.

--
Spartanicus

[Steve Pugh]

Spartanicus <[e-mail]> wrote:

Steve Pugh <st***@pugh.net> wrote:

.dbtable{
width: 600px;
padding: 0px 0px 0px 0px;
Is this class applied to a table? Tables don't have padding.

They do, but as with the html cellpadding attribute it's not applied on
the element itself, but on the descendant cells.

That makes sense. I'd never noticed it before, I suppose because I'd
never though of trying it. Setting the padding directly in the td or
th seems much more logical.
Note that it's worded in a way that is easily misunderstood:

Applies to: all elements except elements with table display types
other than table, inline-table, and table-cell

Gosh, that is a rather horrible sentence.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Bob Bedford]

>> border-collapse: collapse;

border: 1px solid #000000;
cursor: default;
What's the point of this?

Border-collapse does allow me to show the cell even there is no data in.
border 1px.... show a border (line) around the cell
cursor:default; show default cursor, as I've some cell where I show a hand.

}

.dbtable th{
font-weight: bold;
font-size: 13px;

Pixel sized text is a bad idea as Win IE users can't easily resize it
as needed.

I know but it's the only way to have full control on what I'm doing.

background-color: #999999;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
/*border: 1px solid #000000;*/
}

.dbtable td{
border: 1px solid #000000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

I still have a left, bottom and right border around an image in a cell
(but
strangely not at top).

Which styles are you applying to the image? The border of the image is
controlled by the styles applied to the image, not by the styles
applied to the table.

How to avoid this ? I'd like no border between the image and the cell
border.

td img {border: none;}
will remove the border from around all images inside table cells.
Though by default browsers only draw borders around images that are
links so you must have added the border yourself somewhere.

Also the text on the cell has top and bottom border. I'd like to set it to
0. How ?

border: none; on whichever element actually has the border. As very
few elements have borders by default it's most likely something that
you've added yourself. So look for any border styles in your CSS and
remove them.

Unless, you don't actually mean borders when you say borders.

Right, I'm talking about margins. I've no border (no outline), but I've
margins between the image and the cell's border. I've set this:

..dbtable td.img {border: none; margin:0px; }
img{border:none; margin:0px; padding:0px;}

But I still have margins on the left, bottom and right, but no on the top.

Bob

[Steve Pugh]

"Bob Bedford" <be******@notforspammershotmail.com> wrote:

Steve Pugh wrote:

"Bob Bedford" <be******@notforspammershotmail.com> wrote:

cursor: default;

What's the point of this?

cursor:default; show default cursor, as I've some cell where I show a hand.

But why do you need to set it to the default at the table level if you
are setting it to something else at the cell level?

font-size: 13px;

Pixel sized text is a bad idea as Win IE users can't easily resize it
as needed.

I know but it's the only way to have full control on what I'm doing.

You don't have full control. If you think you do you are fooling
yourself.

Unless, you don't actually mean borders when you say borders.

Right, I'm talking about margins. I've no border (no outline), but I've
margins between the image and the cell's border. I've set this:

.dbtable td.img {border: none; margin:0px; }
img{border:none; margin:0px; padding:0px;}

But I still have margins on the left, bottom and right, but no on the top.

1. Eliminate all white space.

2. Set the images in question to display: block; (as inline elements
images normally sit on the text baseline and hence there will be space
beneath them same as there is space between the text baseline and the
bottom of characters with descenders)

3. Post a URL if you still need help.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[kchayka]

Steve Pugh wrote:

2. Set the images in question to display: block; (as inline elements
images normally sit on the text baseline and hence there will be space
beneath them same as there is space between the text baseline and the
bottom of characters with descenders)

img {vertical-align: bottom} can give the same results

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, kchayka wrote:

Steve Pugh wrote:

2. Set the images in question to display: block; (as inline elements

img {vertical-align: bottom} can give the same results

But don't, if line-height is bigger than image.

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