On Tuesday, February 8, 2011, 11:22:33 PM, Eric A. Meyer wrote: > So, as Paul says, throw a div in there, gritting your teeth about > the crufty markup if necessary, and relatively position the div. If > you want to position in relation to the right or bottom edges of the > cell, you may have to get creative with heights and widths and so on. > If you only care about top and/or left, you can skip all that. ---
My thanks to all who've offered help. Unfortunately, the suggested approach only gives me partial success (initial tests in Firefox 3.6 and IE8). The table cell extends over 5 rows, is of class 'mapnav' and the CSS stylesheet sets vertical-align:center; I added a DIV styled display:block; position:relative; height:100% within the table cell and then added styling to each of the image input tags, e.g. position:absolute; top:25; (.) The result was a jumbled mess and the table cell seems to have disappeared. I then tried setting the table cell vertical alignment to 'top', which had the effect of moving the jumbled mess of images from the middle of the cell to the top and the table cell still could not be seen. I then tried setting the background colour of the DIV to yellow so that I could see whether the DIV extended the full height of the cell but neither the DIV nor the table cell could be seen. So I added width:100% to the DIV styling to force it to occupy the entire table cell but this had no discernible effect on the rendered page. I then tried adding a non-breaking space to the content of the DIV and was rewarded by a yellow block one character high and wide and a black line one character wide extending down the remainder of the cell. So, it seems that using position:absolute to take the images out of the normal flow causes the table cell width to collapse. So I added width:25px; to the cell style. The result was still a jumbled mess but at least the table cell had returned (with the DIV rendering as a one-character high block of yellow at the top). So I explicitly positioned both the '+' and '-' images with left:0 and both of those obligingly moved onto the table cell and are now where I want them (previously, they were vertically aligned with the right arrow). The page can be seen at http://www.gjctech.co.uk/test/test.php with the CSS stylesheet at http://www.gjctech.co.uk/test/csw.css Note that I've also tried (unsuccessfully) to position the right arrow vertically centred in the table cell. I've set both margin-top and margin-bottom to auto but I suspect this doesn't work because the DIV doesn't seem to extend over the entire table cell even though I've set it to 'height:100%'. I temporarily set the table cell vertical alignment back to center and also tried setting it to 'middle' but both move the block of images from the top to the middle of the cell. I guess that what's needed is some method of persuading the DIV to occupy the entire cell. Any further help gratefully received. -- Geoff ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
