#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2000
    Posts
    12
    Rep Power
    0

    Exclamation


    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]
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2000
    Location
    Copenhagen, DK
    Posts
    231
    Rep Power
    15
    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
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2000
    Posts
    12
    Rep Power
    0
    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...
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2000
    Posts
    27
    Rep Power
    0
    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
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2000
    Location
    Copenhagen, DK
    Posts
    231
    Rep Power
    15
    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

IMN logo majestic logo threadwatch logo seochat tools logo