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 i
could figure out which one was causing the problem. When I commented out
the width on the div, the cells were rendered with the correct width,
but of course then all the cells were displayed, which I don't want.
How do I get the div to only display the first two table cells while
maintaining the correct width for these cells?
I would appreciate if someone would give me any help or pointers on
this. My code is below.
Regards,
N. Demos
--------------------
<!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;
}
DIV.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;
}
TABLE.tblTest {
position: relative;
border-style: ridge;
border-color: #B0B0B0;
border-width: 0;
background-color: #A0A0FF;
border-collapse: collapse;
table-layout: fixed;
}
.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.
