Stylesheets - Browsers do not obey width for table cell.

Author

Browsers do not obey width for table cell.

Louis.

2006-08-14, 6:33 am

Hello,

I have a cell that I making 200px wide with a style sheet. I am
setting the padding-left to 40px and the padding-right to 0px. I have
160x3 px gif in the cell. There should be no space between the gif and
the right side of the cell (40 + 160 = 200).

http://www.netadvies.nl/test/index.html
http://www.netadvies.nl/test/layout.css
http://www.netadvies.nl/test/160x3.gif

However, both FF and IE do create space at the right, they are making
the cell wider than 200px.

I cannot figure out why they do this and how to stop them from doing
this.

Any help is appreciated.
Louis.

Steven Saunderson

2006-08-14, 6:33 am

On Mon, 14 Aug 2006 10:44:33 +0200, Louis. <> wrote:

> However, both FF and IE do create space at the right, they are making
> the cell wider than 200px.
>
> I cannot figure out why they do this and how to stop them from doing
> this.

Have you tried putting the entire TD on one line in index.html ? I find
that the white space (e.g. carriage returns) can cause problems. If
this helps and you don't like the source formatting, try :

<td width="200" align="left" valign="top" id="leftnavigation"
>LEFTNAV<br
><img src="160x3.gif" alt="" width="160" height="3" hspace="0"
vspace="0" border="0"
></td>

This deletes all white space between elements.

>
> Any help is appreciated.
> Louis.

--
Steven

Spartanicus

2006-08-14, 6:33 am

Louis. <> wrote:

>I have a cell that I making 200px wide with a style sheet. I am
>setting the padding-left to 40px and the padding-right to 0px. I have
>160x3 px gif in the cell. There should be no space between the gif and
>the right side of the cell (40 + 160 = 200).

Under the W3C box model rules horizontal padding is added to the width
of the table cell (200 + 40 = 240).

>http://www.netadvies.nl/test/index.html

Btw, you trigger quirks mode rendering. All bets are off on what you'll
get in quirks mode, I suggest you at least use a transitional doctype
that triggers "Standards" mode, or better: switch to Strict coding and
doctype.

--
Spartanicus

Louis.

2006-08-14, 6:33 am

On Mon, 14 Aug 2006 10:21:16 +0100, Spartanicus
<invalid@invalid.invalid> wrote:

>Louis. <> wrote:
>
>
>Under the W3C box model rules horizontal padding is added to the width
>of the table cell (200 + 40 = 240).
>
>
>Btw, you trigger quirks mode rendering. All bets are off on what you'll
>get in quirks mode, I suggest you at least use a transitional doctype
>that triggers "Standards" mode, or better: switch to Strict coding and
>doctype.

Hello Spartanicus,

Thank you very much. I have been fighting with this all morning. You
showed me the way it works. It is working exactly as I wish now.

Suppose you want to have a box. It should be 160 pixels wide and you
want an extra 20 pixels between the box borders and the content.

<div id="box">content box</div>

WRONG:
=====
#box {
width: 158px;
border: 1px solid #ABC;
padding: 20px 20px 20px 20px;
}

To accomodate the padding the box is expanded and becomes larger than
160 pixels.

RIGHT:
====
#box {
width: 118px;
border: 1px solid #ABC;
padding: 20px 20px 20px 20px;
}

This box becomes 160 pixels wide.