CSS positioning (IE?)

Discussion in 'HTML' started by mike@hitori.org, Jun 28, 2006.

  1. Guest

    I'm trying to create a script that can position icons on top of an
    image automatically. Doing that is, of course, the easy part, the hard
    part is the positioning because I seem to be missing something about
    containing blocks.

    Basically, I've tried doing it two ways. The first was to use
    "relative" positioning. So I'd make something like:

    ..item1 { position: relative; left: 500px; top: 500px; }
    ..item2 { position: relative; left: 500px; top: 500px; }

    <body>
    <div id="CB">
    <img class="item1" .../>
    <img class="item2" .../>
    </div>
    </body>

    In this case, the items are positioned relative to the block "CB" like
    I'd expect. However, the positioning is weird. Item1 appears where
    I'd expect it to: (x,y) (500,500) But item2 doesn't make sense to me.
    It's not at (500,500) or (1000,1000), it's at (516, 500). I don't know
    where it got the 16 extra pixels, or why it only skews in the x
    direction.

    So I said, Okay, let's try absolute positioning, since all the
    documentation in CSS2 says it'll be positioned absolutely from the
    containing block.
    -> http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme

    So I use the same code but change both "position: relative" to
    "position: absolute". As expected, the images line up perfectly.
    Great!

    So then I change the code just a bit so that it's:

    <body>
    <h1>Some text</h1>
    <div id="CB">
    <img class="item1" .../>
    <img class="item2" .../>
    </div>
    </body>

    And now the images aren't in the same place. That is, they're in the
    exact same place as they were on the page, not where they were in the
    DIV tag, which makes me think I've failed to convince IE that this is a
    containing block?

    I'm hoping it's clear what I want to do? I have a background image in
    the DIV tag (a map) and am using images to put waypoints on the map. I
    want to be able to store their (x,y) in a database and be able to use
    them without worrying about the rest of the page structure.

    Any suggestions for how to do this, either by fixing the methods above
    or taking a new approach?

    Thanks for any help that can be offered.

    Cheers,
    Mike
    , Jun 28, 2006
    #1
    1. Advertising

  2. Neredbojias Guest

    To further the education of mankind, vouchsafed:

    > So I said, Okay, let's try absolute positioning, since all the
    > documentation in CSS2 says it'll be positioned absolutely from the
    > containing block.


    You need to relatively position the parent container.

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Jun 28, 2006
    #2
    1. Advertising

  3. Toby Inkster Guest

    mike wrote:

    > <body>
    > <div id="CB">
    > <img class="item1" .../>
    > <img class="item2" .../>
    > </div>
    > </body>
    >
    > In this case, the items are positioned relative to the block "CB" like
    > I'd expect.


    No they're not. They're positioned RELATIVE TO WHERE THEY WOULD NORMALLY
    APPEAR!

    > Item1 appears where I'd expect it to: (x,y) (500,500)


    Yes. Its normal position would be at (0,0), so with a relative position of
    (500,500) it appears at (0+500,0+500) = (500,500).

    > But item2 doesn't make sense to me. It's not at (500,500) or
    > (1000,1000), it's at (516, 500).


    Item2's normal position (if there was no relative positioning going on)
    would be (16,0), so it appears at (16+500,0+500) = (516,500).

    > So I said, Okay, let's try absolute positioning,


    Yes -- absolute positioning is what you *should* be using here.

    > since all the documentation in CSS2 says it'll be positioned absolutely
    > from the containing block.


    Then you're reading the CSS 2 documentation wrong!

    Absolutely positioned elements are positioned absolutely NOT FROM THE
    CONTAINING BLOCK, but from the NEAREST CONTAINING POSITIONED ELEMENT.

    That is, in:

    <div id="e1">
    <div id="e2" style="position:relative">
    <div id="e3">
    <div id="e4" style="position:absolute">
    foo
    </div>
    </div>
    </div>
    </div>

    .... the element 'e4' is positioned not from 'e3', but from 'e2' because
    'e2' is the nearest containing *POSITIONED* element!

    > <body>
    > <h1>Some text</h1>
    > <div id="CB">
    > <img class="item1" .../>
    > <img class="item2" .../>
    > </div>
    > </body>


    You want to add the following to your stylesheet:

    #CB{position:relative}

    > Thanks for any help that can be offered.


    Read the CSS 2 recommendation again -- the parts on positioning especially.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Jun 28, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guest

    OT ...CSS positioning

    Guest, Apr 7, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    356
    Kevin Spencer
    Apr 7, 2004
  2. Eric

    Datalist and CSS positioning

    Eric, Sep 14, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    555
    =?Utf-8?B?Q3VydF9DIFtNVlBd?=
    Sep 14, 2005
  3. PeterMcC

    Re: css positioning vs. tables

    PeterMcC, Jun 23, 2003, in forum: HTML
    Replies:
    0
    Views:
    841
    PeterMcC
    Jun 23, 2003
  4. David Graham

    Re: CSS positioning help - Mozilla

    David Graham, Jun 28, 2003, in forum: HTML
    Replies:
    1
    Views:
    5,482
    Lorne Cameron
    Jun 28, 2003
  5. brucie
    Replies:
    8
    Views:
    1,994
    Wipkip
    Jun 29, 2003
Loading...

Share This Page