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. 4  26190 
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
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.
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
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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Phil Evans |
last post by:
URL: http://philevans.com/tabletest.html
A boring table, but one which illustrates my problem. I'm writing a
large PHP app which outputs data tables. Users of the app can configure
their...
|
by: N. Demos |
last post by:
I have a single row table with fixed dimensioned cells nested inside a
fixed dimensioned div, which has overflow: hidden. The div's dimensions
are such that It should only display the first two...
|
by: N. Demos |
last post by:
I have a single row table with fixed dimensioned cells nested inside a
fixed dimensioned div, which has overflow: hidden. The div's dimensions
are such that It should only display the first two...
|
by: davidkarlsson74 |
last post by:
Error: document.getElementById("folderMenu").cells has no properties
File: http://www.volkswagen.se/tillbehor/js/foldermenu.js
Rad: 49
The function activates different DIV:s, but doesn't seem to...
|
by: martin |
last post by:
Hi,
I have a datagrid that contains 3 colums. This is rendered to the page fine,
except that I would like to be able to control the width of each table cell
of the datagrid
I have the following...
|
by: bumpy |
last post by:
I wrote this pretty slick DHTML table that lets you add/remove rows and show/hide columns on the fly. It works perfectly in IE7, but it doesn't behave in Firefox 2.0.0.4. You can see it in action...
|
by: RobG |
last post by:
I'm trying to get table cells to clip content rather than wrapping.
It has been suggested to use:
td.clipped {
width: 5em;
overflow: hidden;
white-space: nowrap;
}
|
by: markszlazak |
last post by:
I'm a relatively slow response of table cells changing their
background color with mouseover/our in IE6 (Win 2K) but the response
is fine (fast) in Firefox. Why? The code is below. Sorry about the...
|
by: gentsquash |
last post by:
(If my question is too much CSS, please point me elsewhere
and I'll post there. My tests have been on Firefox on MacOS,
and I'd settle for just getting this to work there.)
I'm writing a game...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
