SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    ********* Janitor levik's Avatar
    Join Date
    Jan 2003
    Location
    New York
    Posts
    885
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird CSS layout issue - relative positioning

    So I have this table cell which has an image at the top, and some text under it. I want the image to "stick out" from the top of the table. For this I use position: relative; like so:
    HTML Code:
    <img src="....." style="position: relative; top: -50px;">
    So now my 100x100 image is shifted up by 50 pixels. The problem is however, that the browser still "pretends" like there's a 100 pixel tall image at the top of the cell, and offsets the text below it accordingly. As a result, the text under the image starts 100 pixels down, not 50 pixels down where the image actually ends.

    I tried to fix this by placing the image into a DIV with a hardcoded height:
    HTML Code:
    <div style="height: 50px;"><img src="....." style="position: relative; top: -50px;"></div>
    This worked on Mozilla (Firefox) but Opera and IE resized the DIV to be 100 pixels tall, and still placed the following text 50 pixels lower than I wanted. I tried messing with the DIV's display and overflow properties but nothing seems to yield the results I need.

    Any suggestions?

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey...I'm the janitor around here. & proud of it.

    'Fixed' your problem by nesting that DIV after the IMG and positioning it identically to the approach you took with the IMG. That's what you get for using tables.
    ::: certified wild guess :::

  3. #3
    ********* Janitor levik's Avatar
    Join Date
    Jan 2003
    Location
    New York
    Posts
    885
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tables have nothing to do with it... IE just reserves a 100x100 pixel space for the image... But thanks for the tip, it did the trick

    P.S. I can claim seniority both by the number of posts and date of signup - so only my claim on the Janitor title can be valid. However, I mostly hang out in the Advertising board, so you can have this area as your own janitorial domain if you swear fealty to me


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •