Forum Moderators: not2easy
Now the code below as is displays the table exactly as it should (most notably the 2nd and 4th cell in the first and last row are 30 pixels wide. I have not set a width on the middle column thus allowing it to auto size based on the middle cell in the table. I have included a table width of 700 to show how it should look though my preference is to not have a width at all and let the contained image resize the table.
The problem I am running into is that as soon as you set a width on the image contained in the middle cell to anything above 73, the 2nd and 4th cell in the first and last row resize when they shouldn't. My understanding is that nothing should resize until the image is greater than than the combined width of cells 2,3 and 4. If the width of the table needs to grow, only cell 3 should expand (or compress if smaller). This is not happening.....is this a bug in IE? (Firefox seems to render this properly).
<html>
<head>
<title>City of Saskatoon Mapping System</title>
<style type="text/css">
.imgSquare {
width: 12px;
height: 12px;
}
.tdSquare {
z-index: 101;
position: relative;
width: 12px;
height: 12px;
}
.tdHorSpacer {
z-index: 101;
position: relative;
width:30px;
height:12px;
}
.tdVerSpacer {
z-index: 101;
position: relative;
width: 12px;
height: 30px;
}
.tdHor {
z-index: 101;
position: relative;
height: 12px;
text-align: center;
}
.tdVer {
z-index: 101;
position: relative;
width: 12px;
text-align: center;
verticle-align: middle;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="2" width="700" height="500">
<tr>
<td id="ccMapViewer_NW" class="tdSquare"> </td>
<td id="ccMapViewer_NNWSpacer" class="tdHorSpacer"> </td>
<td id="ccMapViewer_N" class="tdHor"> </td>
<td id="ccMapViewer_NNESpacer" class="tdHorSpacer"> </td>
<td id="ccMapViewer_NE" class="tdSquare"> </td>
</tr>
<tr>
<td id="ccMapViewer_W" class="tdVer"> </td>
<td colspan="3" style="position: relative; backgroundColor: #E1DEE1;">
<div>
<img alt="" width="40"/></div></td>
<td id="ccMapViewer_E" class="tdVer"> </td>
</tr>
<tr>
<td id="ccMapViewer_SW" class="tdSquare"> </td>
<td id="ccMapViewer_SSWSpacer" class="tdHorSpacer"> </td>
<td id="ccMapViewer_S" class="tdHor"> </td>
<td id="ccMapViewer_SSESpacer" class="tdHorSpacer"> </td>
<td id="ccMapViewer_SE" class="tdSquare"> </td>
</tr>
</table>
</body></html>
This is known issue (but not a bug) with IE's rendering of tables (I take it it's IE you are seeing this width thing in?)
The recommendations for how UA's layout tables are open to interpretation and as tables have evolved the UA's have had to interpret things in a more "error exception" type way in order to avoid impossible loop calculations and browser crashes
SEE: 17.5.2 Table width algorithms: the 'table-layout' property [w3.org]
CSS does not define an "optimal" layout for tables since, in many cases, what is optimal is a matter of taste. CSS does define constraints that user agents must respect when laying out a table. User agents may use any algorithm they wish to do so, and are free to prefer rendering speed over precision, except when the "fixed layout algorithm" is selected.
IMHO IE actually have the better failsafe, we don't know exactly how many "passes" a particular UA makes over a table in order to calculate widths and heights when using the "auto" layout (default) model - so we have to provide as many known widths/heights to the UA as possible in it's first "pass". In order to most effectively do that when you're not using the "fixed" table layout model it works better when you use the <colgroup> and <col> elements for giving the widths before rendering begins, especially when colspans/rowspans are involved.
in answer to your question, you could either nest a table so as to avoid using colspans or you could layout the widths of each column if you know them, which you seem to, using col elements. Also I presume it's better to get as much of it into the CSS as possible so that the calculations can be made according to the image/background image widths (i.e. after the HTML is written?)
Also, although you don't mention seeing it yet, one of the browsers (FF?) also treats height differently some will apply height to the td, others will apply it to the tr, but again if you simply declare it on both in the CSS it should "help" them all
All of the above is not dependant on Doctype, although it's best to use a strict rendering one to aid the x-browser capability, I think this "allow for all" method caters for both renderings
so with all that in here a sample based on your code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mapping System</title>
<style type="text/css">
#mapviewer {width: 700px; height: 500px; border-collapse: collapse;}/* set height on both tr and their child td's to enforce */
#mapviewer tr.top, #mapviewer tr.btm,
#mapviewer tr.top td, #mapviewer tr.btm td {height: 12px;}/* height on both tr and td again also the image? */
#mapviewer tr.mid,
#mapviewer tr.mid td,
#mapviewer tr.mid td img {height: 476px;}#mapviewer td {
border: 1px solid #000; /* these collapse per setting on table element */
padding: 0; /* = cellpadding */
text-align: center;
}#mapviewer td img {display:block; /* to avoid gaps around images */}
#mapviewer td#map {background: #ede;}
#mapviewer td#map img {
width: 676px; /* table width 700-12-12 = 676 */
height: 476px; /* table height 500-12-12 = 476 */
}/*
calculate the colgroup
table width = 700px = 12 + 32 + 612 + 32 + 12 = 700
*/
#mapviewer col.edge {width: 12px;}
#mapviewer col.inner {width: 32px;}
#mapviewer col.mid {width: 612px;}</style>
</head>
<body>
<table id="mapviewer" cellspacing="0">
<colgroup>
<col class="edge">
<col class="inner">
<col class="mid">
<col class="inner">
<col class="edge">
</colgroup><tr class="top">
<td id="NW"><span></span></td>
<td id="NNW"><span></span></td>
<td id="N"><span></span></td>
<td id="NNE"><span></span></td>
<td id="NE"><span></span></td>
</tr><tr class="mid">
<td id="W"><span></span></td>
<td id="map" colspan="3"><span><img alt="" src=""></span></td>
<td id="E"><span></span></td>
</tr><tr class="btm">
<td id="SW"><span></span></td>
<td id="SSW"><span></span></td>
<td id="S"><span></span></td>
<td id="SSE"><span></span></td>
<td id="SE"><span></span></td>
</tr></table>
</body></html>
I've calculated backwards i.e. I've started with width/height of table and deduced the image width, but if you need work from the image width adjust as appropriate and reset the table properties
mainly remember browsers especially IE need as much help with their counting as possible ;)
I do however find it very weird about the 74px width on the image causing the entire table to react differently. If anything I would have expected the odd behavior as soon as I hit 31px which would have exceeded the width of the 2nd column.
Lucky for me I am able to obtain the image width/height and can thus size the middle cell appropriately.
Once again, thanks for your help.
i.e. 31 (1px over) +30 (2nd column) +12 (1st Column) = 73
I've long ago given up on the reason why as far as IE goes, but even without this, table layout (HTML or CSS) is going the way of all others, except that the box model is different. We still have to provide as much information as possible (and count!)
if you want the table to resize, I think you still can, when I said provide as much info as possible I didn't know at that point which columns/images you knew the width or height for... is the image in the center not a fixed size or in what way do you mean resize?
[edited by: SuzyUK at 5:53 pm (utc) on May 29, 2008]
