SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    position: absolute Issue

    I am having an issue with a floating image. My goal is to put a floating menu in the upper right hand corner of the screen.

    To explain the situation further, I have a heading on the page which is coded in HTML using a table tag with the width = 100%. Then I have a span tag which displays my floating menu. Every thing works great in IE but as soon as I display this in FireFox, the floating menu is extended off the page (to the right of my table) so it looks like the span starts where the table ends. My span has position: absolute and I think that is the issue. How has other people dealt with this difference between IE and FireFox (Netscape)?

    The way I found to get it to work for FireFox is to put a negative margin-width: but then in IE it is not aligned in the far right corner.

    Here is my span code...

    Code:
    <span id="Floater" style="position: absolute; visibility: hidden; margin-top: 40px; margin-left: -130px; width: 140px;">
    Any suggestions would be appreciated.

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure what you are expecting with that code but it makes little sense to me .

    If you want to absolutely place that element in the top right of the screen then you need to supply the co-ordinates for its positioning. If you don't supply co-ordinates then the element is removed from the flow but remains where it was or where the browser thinks it was.


    To place it top right you would do this:
    Code:
    #floater{
    position:absolute;
    right:0;
    top:40px;
    width:140px;
    }
    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    *{margin:0;padding:0}
    table#header{ width:100%;height:100px;background:red}
    #floater{
    position:absolute;
    right:0;
    top:40px;
    width:140px;
    background:blue;
    }
    </style>
    </head>
    <body>
    <table id="header" cellspacing="0" cellpadding="0">
     <tr>
      <td>hello hello hello</td>
     </tr>
    </table>
    <div id="floater">test</div>
    </body>
    </html>

    Of course this assumes that the containing block of the absolute element is the root element (html). If the absolute element was inside a positioned element then that positioned element becomes the containing block and not the viewport.

    Its hard to see what you want really and whether this is even the right way of going about it. We'd need a bit more info and a bit more code.


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
  •