table padding bug? - Internet Explorer 6

[Knoxy]

Hello, I've noticed one or two people post on this before but nobody
seems to have replied so raising the issue again... is this a known
IE6 CSS bug?

I have placed the following in my stylesheet file:
..formContentTa ble
{
padding: 10px 10px 10px 10px;
border: solid 1px #D1CFCF;
background: #F2F2F2;
}
and applied it to a <table> tag. Works fine in Firefox, Netscape,
Opera... but not IE6 - no padding at all. I just want the my form in a
'box' with padding just around the edges of the content.

To get around the problem, I has to bin the padding line and add the
following to my html page:

to my top table cells...
style="padding-left:10px;paddi ng-top:10px;"

to my bottom table cells...
style="padding-left:10px;paddi ng-bottom:10px;"
and that worked ok - not ideal though.

If anyone else has run into the problem or if it's something
ridiculous I've done in my code, let me know? Any help much
appreciated,
Andrew

[Steve Pugh]

an*********@ars enalnews.co.uk (Knoxy) wrote:

.formContentTa ble
{
padding: 10px 10px 10px 10px;
}
and applied it to a <table> tag. Works fine in Firefox, Netscape,
Opera... but not IE6 - no padding at all. I just want the my form in a
'box' with padding just around the edges of the content.
Where do you think the padding should go in a table element? Between
the border and the outermost set of cells? Inside all the cells?
Inside some of the cells?

Whilst CSS 2.1 does explcitly allow padding to be set on tables
"Applies to: all elements except elements with table display types
other than table, inline-table, and table-cell"
<url: http://www.w3.org/TR/CSS21/box.html#propde f-padding>
it is totally vague about how the padding is actually applied. In some
places it states that the table is a normal block element:
"In terms of the visual formatting model, a table may behave like a
block-level or inline-level element. Tables have content, padding,
borders, and margins." but in other places it seems to totally ignore
the possiblity of padding on the table itself.
To get around the problem, I has to bin the padding line and add the
following to my html page:

to my top table cells...
style="paddi ng-left:10px;paddi ng-top:10px;"

to my bottom table cells...
style="paddi ng-left:10px;paddi ng-bottom:10px;"

and that worked ok - not ideal though.

Using a class rather than inline styles would be an improvement. If
you want to add padding to certain cells then this is the correct way
to do so.

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/>

[Rob Collyer]

My experience with padding, and CSS, is that some browsers seem to redefine
the rules as to where the padding goes.... inside the table, around the
table.... whatever.

It's a web design nightmare sometimes!
--
Rob Collyer - www.webforumz.com
Web design and development forums for Free help, advice,
tips, and website critique by professional designers and developers.

"Steve Pugh" <st***@pugh.net > wrote in message
news:8h******** *************** *********@4ax.c om...

an*********@ars enalnews.co.uk (Knoxy) wrote:

.formContentTa ble
{
padding: 10px 10px 10px 10px;
}
and applied it to a <table> tag. Works fine in Firefox, Netscape,
Opera... but not IE6 - no padding at all. I just want the my form in a
'box' with padding just around the edges of the content.

Where do you think the padding should go in a table element? Between
the border and the outermost set of cells? Inside all the cells?
Inside some of the cells?

Whilst CSS 2.1 does explcitly allow padding to be set on tables
"Applies to: all elements except elements with table display types
other than table, inline-table, and table-cell"
<url: http://www.w3.org/TR/CSS21/box.html#propde f-padding>
it is totally vague about how the padding is actually applied. In some
places it states that the table is a normal block element:
"In terms of the visual formatting model, a table may behave like a
block-level or inline-level element. Tables have content, padding,
borders, and margins." but in other places it seems to totally ignore
the possiblity of padding on the table itself.

To get around the problem, I has to bin the padding line and add the
following to my html page:

to my top table cells...
style="paddi ng-left:10px;paddi ng-top:10px;"

to my bottom table cells...
style="paddi ng-left:10px;paddi ng-bottom:10px;"

and that worked ok - not ideal though.

Using a class rather than inline styles would be an improvement. If
you want to add padding to certain cells then this is the correct way
to do so.

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/>