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="TextPa d 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  26204 
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#wid th-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#wid th-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 preferences for table border width, colour, style etc . . . I
don't have access to the main stylesheet from the PHP, so the border for
the table is going inline, thus:
<table id="testTable" style="border: 1px dotted red;">
|
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 table cells.
This all renders correctly in MSIE 6.x, but doesn't in Firefox. In
Firefox, the cell widths are reduced so that all the cells are displayed
within the div frame.
I've played around with this: commenting out css properties to see if...
|
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 table cells.
This all renders correctly in MSIE 6.x, but doesn't in Firefox. In
Firefox, the cell widths are reduced so that all the cells are displayed
within the div frame.
I've played around with this: commenting out css properties to see if...
|
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 work on
FireFox or Netscape. What could be wrong?
The function:
function setActiveTab(tabNo) {
|
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 code in the "ItemDataBound" -- which I belive should
allow me to alter the width of the cells, however it does not work.
Dim unitWidth As Unit
unitWidth.Percentage(10)
| | |
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 here:
http://www.phreelancer.com/dyn_table/
If you start to add/remove rows and then show/hide columns a few times in FF, you'll see that some table cells are bundled together or that some hidden cells don't get collapsed (but are still empty)....
|
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
length.
<html>
<head>
<title>Rapid Blocking Interface</title>
<style>
.calendar {
|
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 in javascript (but JS plays little role
in the question) for an algebra class I'll be teaching.
The playing board is a particular <table>, and each cell is
supposed to be, say, 21px wide. Unfortunately, the
cell-widths shrink when the user...
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
