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 26182
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: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM).
In this month's session, the creator of the excellent VBE...
|
by: MeoLessi9 |
last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
|
by: DolphinDB |
last post by:
Tired of spending countless mintues downsampling your data? Look no further!
In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
|
by: Aftab Ahmad |
last post by:
Hello Experts!
I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: marcoviolo |
last post by:
Dear all,
I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
|
by: jfyes |
last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
|
by: ArrayDB |
last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
| |