css - relative positioning problem

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]

What's the problem?
If you want the images to be positioned right after each other, you just write the code
<img src="picture"><img src="picture"><img src="picture">
next to each other.
Steffen

uh, the problem is that your solution places the images right next to each other, with no spacing...i want to control the spacing between the images...

no solution for your CSS problem ...
but I suggest using a transparent image with varing width for spacing between objects ... that wasy you can be 100% sure it's cross-browser effecient.

--deviant

You can use <img src="picture" hspace="10" vspace="30"> to get the exact space that you want!
Steffen

By the way: with this solution, you can drop all those div's