Table Cells don't have the correct width in Firefox

N. Demos

The following code renders as intended in IE (A TABLE, with cells of
fixed width and height, inside of a DIV with fixed width and height and
overflow set to hidden.) In Firefox, the table cells assume a narrower
with than specified. If I comment out the width for the DIV, then the
cells render with the correct width and height. Why is this happening?

Thanks.

Regards,
N. Demos
HTML
------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META name="Generator" content="TextPad 4.7">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

<TITLE></TITLE>
<STYLE type="text/css">
BODY {
color: #FFFFFF;
background-color: #000000;
text-align: center;
box-sizing: border-box;
}
.tblDiv {
position: relative;
left: 0;
top: 0;
overflow: hidden;

/* !!!Note: If width is commented out, then the table cells assumes the
width specified in it's rule. Otherwise the width style for the cells is
not applied */
width: 348px;
height: 170px;
border-width: 3px;
border-color: #A0A0A0;
border-style: ridge;
background-color: #FFA0A0;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.tblTest {
table-layout: fixed;
position: relative;
border-style: ridge;
border-color: #B0B0B0;
border-width: 0;
background-color: #A0A0FF;
border-collapse: collapse;
}
.tblTest TR {
vertical-align: middle;
}
TD.imgClass {
margin: 0;
text-align: center;
width: 170px;
height: 170px;
min-width: 170px;
min-height: 170px;
border-width: 0;
border-right-width: 2px;
border-right-style: ridge;
border-right-color: #B0B0B0;
padding: auto;
}
</STYLE>
</HEAD>

<BODY>
<DIV class="tblDiv">
<TABLE class="tblTest">
<TBODY>
<TR>
<TD class="imgClass">Cell 1</TD>
<TD class="imgClass">Cell 2</TD>
<TD class="imgClass">Cell 3</TD>
<TD class="imgClass">Cell 4</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

</BODY>
</HTML>

--
Change "seven" to a digit to email me.

Jul 21 '05 #1

Follow Post Reply

26066

Gus Richter

N. Demos wrote:

The following code renders as intended in IE (A TABLE, with cells of
fixed width and height, inside of a DIV with fixed width and height and
overflow set to hidden.) In Firefox, the table cells assume a narrower
with than specified. If I comment out the width for the DIV, then the
cells render with the correct width and height. Why is this happening?

When you remove the div's width, it will stretch to the content's width.
The table, without a width declared, will take the width of the
container and will try to fit it in. This is not the way IE does it of
course.

In your example, if you give a width to the table such as width:0; (or
any other value for the table's minimum width), then the table extends
beyond the container width (hidden, or scrollable with overflow:auto;),
with the td widths applied as requested. Then IE, FF and Opera all
render alike.

I'm not sure which algorithm applies. See:
<http://www.w3.org/TR/CSS21/tables.html#width-layout>
Perhaps someone else will provide the precifics.

--
Gus

Jul 21 '05 #2

N. Demos

Gus Richter wrote:

N. Demos wrote:

The following code renders as intended in IE (A TABLE, with cells of
fixed width and height, inside of a DIV with fixed width and height
and overflow set to hidden.) In Firefox, the table cells assume a
narrower with than specified. If I comment out the width for the DIV,
then the cells render with the correct width and height. Why is this
happening?

When you remove the div's width, it will stretch to the content's width.
The table, without a width declared, will take the width of the
container and will try to fit it in. This is not the way IE does it of
course.

In your example, if you give a width to the table such as width:0; (or
any other value for the table's minimum width), then the table extends
beyond the container width (hidden, or scrollable with overflow:auto;),
with the td widths applied as requested. Then IE, FF and Opera all
render alike.

I'm not sure which algorithm applies. See:
<http://www.w3.org/TR/CSS21/tables.html#width-layout>
Perhaps someone else will provide the precifics.

Gus,
Thanks for the reply and the reference. So just to make sure I
understand. With a fixed table-layout, using any finite width value
(read: not auto) for the table will render the table width according to
an algorithm which will be greater than or equal to assigned individual
cell widths. The table will not be rendered with the assigned width,
unless the algorithm calculates the sum of the table's components widths
to be less than this assigned value. Is this essentially correct?

Thanks and Regards,
N. Demos
--
Change "seven" to a digit to email me.

Jul 21 '05 #3

Gus Richter

N. Demos wrote:

Gus,
Thanks for the reply and the reference. So just to make sure I
understand. With a fixed table-layout, using any finite width value
(read: not auto) for the table will render the table width according to
an algorithm which will be greater than or equal to assigned individual
cell widths.
Equal to, yes. Greater than, I think not.
The table will not be rendered with the assigned width,
unless the algorithm calculates the sum of the table's components widths
to be less than this assigned value. Is this essentially correct?

I think not. Take the width:0; for example which will always be less
than the sum of the components. I must confess that I'm not too strong
on tables, but IIRC the table width is not a fixed width, but is
actually the *minimum width* requested for the table.

To be honest, when I read through the algorithms, they were leading me
back and forth and I was starting to get a headache. ;-)
In any case, I got lost and confused and will have to study it all in
greater detail when I have more time. That was why I was hoping for
someone to jump in.

My second sentence is of importance for your example. You have no width
applied to Table, so it takes on the width of the container (the div)
causing your cells to be reduced in size. It is irrespective of if it is
table-layout:fixed; or not. Remove the table (which has no width
defined) from the div such that the container will be body and see the
same behavior by reducing the viewport size smaller than the table and
the table will shrink to fit. (IE, of course, does not behave like
that.) If, on the other hand, you apply a width of say 500px, which is
less than the total of the components, and reduce the viewport to less
than that, then the table will no longer shrink to fit below the 500px size.

--
Gus

Jul 21 '05 #4

N. Demos

Gus Richter wrote:

N. Demos wrote:
Gus,
Thanks for the reply and the reference. So just to make sure I
understand. With a fixed table-layout, using any finite width value
(read: not auto) for the table will render the table width according
to an algorithm which will be greater than or equal to assigned
individual cell widths.

Equal to, yes. Greater than, I think not.

What I meant here by cell widths was just assigned widths not including
padding or borders. I'm not real versed on how box sizing works, so that
is why I stated it this way. I need to read up on this, as well. :-D

The table will not be rendered with the assigned width, unless the
algorithm calculates the sum of the table's components widths to be
less than this assigned value. Is this essentially correct?

I think not. Take the width:0; for example which will always be less
than the sum of the components. I must confess that I'm not too strong
on tables, but IIRC the table width is not a fixed width, but is
actually the *minimum width* requested for the table.

I think you misunderstood what I said. By assigned width value I meant
as in the stylesheet rule for the table, (Ex: table {width: 120px;}). So
if X = Sum (TD.width) + Sum(TD.border-width) + [padding, etc], and
table{width: Y;} (X, Y are in the same units), and Y < X, then the
rendered table width should be no less than X.
To be honest, when I read through the algorithms, they were leading me
back and forth and I was starting to get a headache. ;-)
In any case, I got lost and confused and will have to study it all in
greater detail when I have more time. That was why I was hoping for
someone to jump in.

My second sentence is of importance for your example. You have no width
applied to Table, so it takes on the width of the container (the div)
causing your cells to be reduced in size. It is irrespective of if it is
table-layout:fixed; or not. Remove the table (which has no width
defined) from the div such that the container will be body and see the
same behavior by reducing the viewport size smaller than the table and
the table will shrink to fit. (IE, of course, does not behave like
that.) If, on the other hand, you apply a width of say 500px, which is
less than the total of the components, and reduce the viewport to less
than that, then the table will no longer shrink to fit below the 500px
size.

I gave this a try, and yes you are correct.

Thanks again for your time and attention,
N. Demos

--
Change "seven" to a digit to email me.

Jul 21 '05 #5

Table Cells don't have the correct width in Firefox

This discussion thread is closed

Similar topics