Browsers do not obey width for table cell.

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.

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

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

On Mon, 14 Aug 2006 10:21:16 +0100, Spartanicus
<invalid (AT) invalid (DOT) invalid> wrote:

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.

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.