hey, just wondering if anyone has any solutions to my problem:

within a <td> table cell on my page, i have several relatively positioned div's that contain images. i want these images to be positioned right next to each other. the code below works (using negative positioning), but since the position: relative style property places objects on top of each other, i had to position the div's using negative values.

the problem with this is that although everything positions perfectly in all browsers, since there are multiple div's being positioned within this one <td> table cell, there is a lot of "ghost" space that is still visible. it's just like there is extra white space extending the <td> cell higher than the 17 pixels it is supposed to.

i have tried adding the display: inline style property to the div's and this does work, but this property is only supported by ie5 mac/pc.

i would rather hash this out using relative positioning instead of absolute, so any solutions you guys might have would be great...thanks in advance!

** code **

<tr>
<td width="100%" height="17" valign="top">
<div id="mainNavAbout" style="position: relative; left: 0px; top: 0px;">
<img src="images/00_nav_about_n.gif" width="46" height="17"></div>
<div id="mainNavPrograms" style="position: relative; left: 47px; top: -17px;">
<img src="images/00_nav_programs_n.gif" width="68" height="17"></div>
<div id="mainNavApply" style="position: relative; left: 116px; top: -34px;">
<img src="images/00_nav_apply_n.gif" width="45" height="17"></div>
<div id="mainNavEmployers" style="position: relative; left: 162px; top: -51px;">
<img src="images/00_nav_employers_n.gif" width="71" height="17"></div>
<div id="mainNavAlumni" style="position: relative; left: 234px; top: -68px;">
<img src="images/00_nav_alumni_n.gif" width="53" height="17"></div>
<div id="mainNavBlueBar" style="position: relative; left: 288px; top: -85px;">
<img src="images/00_blank_blue.gif" width="251" height="17"></div></td>
</tr>

[Edited by mcwinterr on 01-22-2001 at 10:45 AM]