relative/absolute positioning

Discussion in 'Javascript' started by Wim Roffal, Sep 8, 2004.

  1. Wim Roffal

    Wim Roffal Guest

    I am trying to create a menu system.

    The mainmenu is a table
    <table><tr><td>menu1</td><td>menu2</td></tr></table>

    No I try insert the submenu so that it becomes relative to the main menu
    item. For menu1 the relevant code then becomes:

    <td style="position:relative;">menu1<div style="position:absolute; top:20;
    left:0;">
    <a href=x.htm>option1</a><br>
    <a href=y.htm>option2</a>
    </div></td>

    This works fine in IE: the div is positioned relative to the td of menu1.
    However, in Mozilla it doesn't work. The div becomes relative to the top of
    the page.

    What am I doing wrong?

    Thanks,

    Wim
     
    Wim Roffal, Sep 8, 2004
    #1
    1. Advertising

  2. Wim Roffal

    Evertjan. Guest

    Wim Roffal wrote on 08 sep 2004 in comp.lang.javascript:

    > I am trying to create a menu system.
    >
    > The mainmenu is a table
    > <table><tr><td>menu1</td><td>menu2</td></tr></table>
    >
    > No I try insert the submenu so that it becomes relative to the main
    > menu item. For menu1 the relevant code then becomes:
    >
    > <td style="position:relative;">menu1<div style="position:absolute;
    > top:20; left:0;">
    > <a href=x.htm>option1</a><br>
    > <a href=y.htm>option2</a>
    > </div></td>
    >
    > This works fine in IE: the div is positioned relative to the td of
    > menu1. However, in Mozilla it doesn't work. The div becomes relative
    > to the top of the page.
    >
    > What am I doing wrong?


    What you are doing wrong is asking this in a javascript NG.

    There is no script to be seen and
    for css style there is a NG called:

    comp.infosystems.www.authoring.stylesheets

    [a strange name for this group, I admit]


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress,
    but let us keep the discussions in the newsgroup)
     
    Evertjan., Sep 8, 2004
    #2
    1. Advertising

  3. Wim Roffal

    kaeli Guest

    OT: CSS (was Re: relative/absolute positioning)

    In article <chn69v$379$>,
    enlightened us with...
    >
    > <td style="position:relative;">menu1<div style="position:absolute; top:20;
    > left:0;">
    > <a href=x.htm>option1</a><br>
    > <a href=y.htm>option2</a>
    > </div></td>
    >
    > This works fine in IE: the div is positioned relative to the td of menu1.


    Then IE is wrong. You're probably using quirks mode by not providing a valid
    doctype with a URL.
    Absolute is absolute.

    > However, in Mozilla it doesn't work. The div becomes relative to the top of
    > the page.
    >


    As it should be.

    > What am I doing wrong?
    >


    Posting a CSS question to a javascript group. ;)

    Put this at the top of the page, save it, then look in IE again. What
    happened?
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    See
    http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/doctype.asp

    See the group mentioned by Evertjan as well for additional CSS help.

    --
    --
    ~kaeli~
    Reading while sunbathing makes you well red.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Sep 8, 2004
    #3
  4. Re: OT: CSS

    kaeli <> writes:

    > In article <chn69v$379$>,
    > enlightened us with...
    >>
    >> <td style="position:relative;">menu1<div style="position:absolute; top:20;
    >> left:0;">


    >> This works fine in IE: the div is positioned relative to the td of menu1.

    >
    > Then IE is wrong. You're probably using quirks mode by not providing a valid
    > doctype with a URL.
    > Absolute is absolute.


    Actually, "position:absolute" must position relative to its containing
    block, which is the nearest enclosing positioned block-level element,
    if any. That is why it is not relative to the "td" (it is not a block level
    element).
    <URL:http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning>
    <URL:http://www.w3.org/TR/CSS2/visuren.html#q29>
    <URL:http://www.w3.org/TR/CSS2/visudet.html#containing-block-details>

    The problem is that the "td" has "display:table-cell" and not
    "display-block".

    Anyway, the "top:20" is also wrong, and should be "top:20px". That
    means that the y-position of the div is not changed from its default,
    which might be why it *seems* to be positionened correctly anyway.

    >> However, in Mozilla it doesn't work. The div becomes relative to the top of
    >> the page.


    Ditto in Opera. If I add "display:block" to the "td", then the "div"
    does become positioned wrt. the "td", because it is now a positioned
    block-level element, so it becomes the containing block of the "div".

    > As it should be.


    Actually, yes, but the reasons for that are not obvious :)

    > Put this at the top of the page, save it, then look in IE again. What
    > happened?
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">


    I concur, and fix the bugs in the CSS. Then perhaps wrap the
    "div" in another, relatively positioned, "div" inside the "td".

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Sep 8, 2004
    #4
  5. Re: OT: CSS

    On Wed, 08 Sep 2004 18:51:43 +0200, Lasse Reichstein Nielsen
    <> wrote:

    [snip]

    > Then perhaps wrap the "div" in another, relatively positioned, "div"
    > inside the "td".


    As this is for a menu, wouldn't something more semantically appropriate
    than a table and nested DIVs be better, such as the commonly used list? It
    would certainly involve less mark-up.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 8, 2004
    #5
  6. Wim Roffal

    Grant Wagner Guest

    Wim Roffal wrote:

    > <td style="position:relative;">menu1<div style="position:absolute; top:20;
    > left:0;">
    > <a href=x.htm>option1</a><br>
    > <a href=y.htm>option2</a>
    > </div></td>
    >
    > This works fine in IE: the div is positioned relative to the td of menu1.
    > However, in Mozilla it doesn't work. The div becomes relative to the top of
    > the page.
    >
    > What am I doing wrong?


    You're asking a CSS question in a JavaScript newsgroup.

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Grant Wagner, Sep 8, 2004
    #6
  7. Wim Roffal

    kaeli Guest

    Re: OT: CSS

    In article <>, enlightened us with...
    >>

    > Actually, "position:absolute" must position relative to its containing
    > block, which is the nearest enclosing positioned block-level element,
    > if any. That is why it is not relative to the "td" (it is not a block level
    > element).


    > <URL:http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning>


    Ah, I was looking for that and couldn't find it. All the sites I was hitting
    with Google search said it was indeed absolute. Of course, I was looking in
    CSS1 like a moron.
    Hrmph.

    Well, at least I know if I say something dumb, someone will correct me.
    Thanks. :)


    --
    --
    ~kaeli~
    Black holes were created when God divided by 0.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Sep 8, 2004
    #7
  8. Wim Roffal

    Wim Roffal Guest

    Re: OT: CSS

    "Michael Winter" <> schreef in bericht
    news:eek:psd0p6fcgx13kvk@atlantis...
    > On Wed, 08 Sep 2004 18:51:43 +0200, Lasse Reichstein Nielsen
    > <> wrote:
    >
    > [snip]
    >
    > > Then perhaps wrap the "div" in another, relatively positioned, "div"
    > > inside the "td".

    >
    > As this is for a menu, wouldn't something more semantically appropriate
    > than a table and nested DIVs be better, such as the commonly used list? It
    > would certainly involve less mark-up.


    Can you give an example of what you mean?

    Wim
     
    Wim Roffal, Sep 8, 2004
    #8
  9. Re: OT: CSS

    On Wed, 8 Sep 2004 20:50:49 +0200, Wim Roffal
    <> wrote:

    > "Michael Winter" <> schreef in bericht
    > news:eek:psd0p6fcgx13kvk@atlantis...
    >
    >> On Wed, 08 Sep 2004 18:51:43 +0200, Lasse Reichstein Nielsen
    >> <> wrote:
    >>
    >> [snip]
    >>
    >>> Then perhaps wrap the "div" in another, relatively positioned, "div"
    >>> inside the "td".

    >>
    >> As this is for a menu, wouldn't something more semantically appropriate
    >> than a table and nested DIVs be better, such as the commonly used
    >> list? It would certainly involve less mark-up.

    >
    > Can you give an example of what you mean?


    Well first, exactly what kind of menu are you trying to produce. By the
    looks of things, it's a drop-down, application-like menu. If that's the
    case, take a look at:

    <URL:http://devedge.netscape.com/viewsource/2003/devedge-redesign-js/>

    and the two links in the Conclusion. None of them are perfect, but they're
    far better than most horizontal menus in widespread use. If it's a
    vertical menu, take Andrew's link. If it's none of the above, you'd best
    state your aims clearly.

    As for the semantics, stuffing a series of DIVs inside a TABLE element
    doesn't make a lot of sense from a structural point of view.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 8, 2004
    #9
  10. Wim Roffal

    Wim Roffal Guest

    Re: OT: CSS

    Thanks Michael, Andrew and Andrew,

    I indeed am looking for a horizontal menu and the Netscape stuff looks
    interesting. I will study it.

    My main problem with the example is that it is a two level menu. I want the
    option to have more levels.

    Wim


    "Michael Winter" <> schreef in bericht
    news:eek:psd0xbrhnx13kvk@atlantis...
    > On Wed, 8 Sep 2004 20:50:49 +0200, Wim Roffal
    > <> wrote:
    >
    > > "Michael Winter" <> schreef in bericht
    > > news:eek:psd0p6fcgx13kvk@atlantis...
    > >
    > >> On Wed, 08 Sep 2004 18:51:43 +0200, Lasse Reichstein Nielsen
    > >> <> wrote:
    > >>
    > >> [snip]
    > >>
    > >>> Then perhaps wrap the "div" in another, relatively positioned, "div"
    > >>> inside the "td".
    > >>
    > >> As this is for a menu, wouldn't something more semantically appropriate
    > >> than a table and nested DIVs be better, such as the commonly used
    > >> list? It would certainly involve less mark-up.

    > >
    > > Can you give an example of what you mean?

    >
    > Well first, exactly what kind of menu are you trying to produce. By the
    > looks of things, it's a drop-down, application-like menu. If that's the
    > case, take a look at:
    >
    > <URL:http://devedge.netscape.com/viewsource/2003/devedge-redesign-js/>
    >
    > and the two links in the Conclusion. None of them are perfect, but they're
    > far better than most horizontal menus in widespread use. If it's a
    > vertical menu, take Andrew's link. If it's none of the above, you'd best
    > state your aims clearly.
    >
    > As for the semantics, stuffing a series of DIVs inside a TABLE element
    > doesn't make a lot of sense from a structural point of view.
    >
    > Mike
    >
    > --
    > Michael Winter
    > Replace ".invalid" with ".uk" to reply by e-mail.
     
    Wim Roffal, Sep 9, 2004
    #10
  11. Re: OT: CSS

    On Thu, 9 Sep 2004 15:56:12 +0200, Wim Roffal
    <> wrote:

    [snip]

    > My main problem with the example is that it is a two level menu. I want
    > the option to have more levels.


    I was working on one of those. It's extremely easy using CSS 2, but IE
    doesn't support that at all well. I was in the process of adding script
    fix-ups when I needed to reinstall my operating system. Yet, despite the
    number of times I've done that, I still forget to back up all my data, so
    I ended up losing most of what I didn't store in my last backup.

    I will restart development, but I won't be finished anytime soon. For one
    thing, I hope this group will review the result. Not just a technical
    evaluation, but to test on browsers I don't have access to.

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 9, 2004
    #11
  12. Wim Roffal

    kaeli Guest

    Re: OT: CSS

    In article <chpn9q$4ub$>,
    enlightened us with...
    > Thanks Michael, Andrew and Andrew,
    >
    > I indeed am looking for a horizontal menu and the Netscape stuff looks
    > interesting. I will study it.
    >
    > My main problem with the example is that it is a two level menu. I want the
    > option to have more levels.
    >


    Aw, heck, why re-invent the wheel?
    http://www.dynamicdrive.com

    Unless, of course, you're just coding to practice or something. Other people
    have already sweated out all the bugs and made menus as cross-browser as
    possible. Don't let them code in vain. Especially when they let you use their
    stuff for free. *grin*


    --
    --
    ~kaeli~
    The man who fell into an upholstery machine is fully
    recovered.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Sep 9, 2004
    #12
  13. Re: OT: CSS

    On Thu, 9 Sep 2004 13:48:03 -0500, kaeli <>
    wrote:

    [snip]

    > Aw, heck, why re-invent the wheel?
    > http://www.dynamicdrive.com


    Because personally, I detest that script. The site in general, in fact.
    I'd never recommend it myself. It represents everything that's discouraged
    in this group.

    That's why I do intend to produce a menu[1] that can replace Dynamic
    Drive's. It's one less reason to reference that site. :)

    [snip]

    Mike


    [1] I also intend to use it as coding practice, just as you suggested.

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 9, 2004
    #13
  14. Wim Roffal

    kaeli Guest

    Re: OT: CSS

    In article <opsd2rgzzgx13kvk@atlantis>, d
    enlightened us with...
    >
    > > Aw, heck, why re-invent the wheel?
    > > http://www.dynamicdrive.com

    >
    > Because personally, I detest that script. The site in general, in fact.
    > I'd never recommend it myself. It represents everything that's discouraged
    > in this group.
    >


    Um, there's lots of menus there.
    http://www.dynamicdrive.com/dynamicindex1/index.html

    Which one don't you like?

    Just curious. I use, and very much like, HVMenu for my intranet application.
    I tried, but didn't like, Jim's DHTML Menu. Too complicated to customize.

    Anyway, my 2 cents, FWIW.

    --
    --
    ~kaeli~
    Can you be a closet claustrophobic?
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Sep 10, 2004
    #14
  15. Re: OT: CSS

    On Fri, 10 Sep 2004 08:59:19 -0500, kaeli <>
    wrote:

    > In article <opsd2rgzzgx13kvk@atlantis>, d
    > enlightened us with...
    >
    >>> Aw, heck, why re-invent the wheel?
    >>> http://www.dynamicdrive.com

    >>
    >> Because personally, I detest that script. The site in general, in fact.
    >> I'd never recommend it myself. It represents everything that's
    >> discouraged in this group.

    >
    > Um, there's lots of menus there.
    > http://www.dynamicdrive.com/dynamicindex1/index.html


    "That script" was HVMenu. You usually recommend it, so I assumed you did
    here, too. The other comments apply to both the script, and what I've seen
    of the site in general.

    > Which one don't you like?


    All of them[1]. Some seem better than others, but none offer any kind of
    decent scriptless fallback (one even requires frames!). On an intranet,
    some might be OK (though there will be accessibility problems[2]), but not
    on the Web.

    [snip]

    Mike


    [1] I ignored ones that didn't claim to work on "all" browsers.
    [2] Therefore possible legal problems.

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 10, 2004
    #15
  16. Wim Roffal

    kaeli Guest

    Re: OT: CSS

    In article <opsd3975qwx13kvk@atlantis>, d
    enlightened us with...
    > > http://www.dynamicdrive.com/dynamicindex1/index.html

    >
    > "That script" was HVMenu. You usually recommend it, so I assumed you did
    > here, too. The other comments apply to both the script, and what I've seen
    > of the site in general.
    >
    > > Which one don't you like?

    >
    > All of them[1]. Some seem better than others, but none offer any kind of
    > decent scriptless fallback (one even requires frames!).


    Requires frames?
    Eww.
    I use frames for my intranet app, but wouldn't for the internet.

    As to fallback, well of course not. How could it? It's script. If script
    isn't enabled, it won't work. That's why a good author always has text links
    somewhere in the page, either at the bottom or where the menu would appear if
    script *were* enabled.
    A general site should always work if it is on the internet, whether a user
    has plugins, CSS, script, or whatever. (general != movie clips sites and so
    on) A site all about javascript scripts, at least IMO, shouldn't be expected
    to work without script enabled. That would be like going to a Quicktime site
    and wanting to not have to use Quicktime.

    What idea did you have for "fallback" in a script for scriptless browsers?
    Note that I look only at the script, not the page that has it as an example.
    I write my own HTML and add things so people can use the page without script
    if it's not for my intranet app.

    > On an intranet,
    > some might be OK (though there will be accessibility problems[2]), but not
    > on the Web.


    Again, text links solve accessibility problems.
    Did you have a better idea?
    I'm always open to new ideas.


    --
    --
    ~kaeli~
    A lot of money is tainted - It taint yours and it taint mine.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Sep 10, 2004
    #16
  17. Re: OT: CSS

    kaeli <> writes:

    > As to fallback, well of course not. How could it? It's script. If script
    > isn't enabled, it won't work.


    Ofcourse. That is why making the entire menu using scripts is a bad idea,

    However, making a sufficient part of the menu using plain HTML, and then
    enhancing it using Javascript, will both work with scripts enabled and
    and without (just not with as many features).

    Any menu solution should be both the enhancing script *and* the basic
    HTML framework. If the menu in question is all script, that is reason
    enough to discourage its use on the internet.

    > That's why a good author always has text links somewhere in the
    > page, either at the bottom or where the menu would appear if script
    > *were* enabled.


    Exactly. Those links could very well be part of the menu.

    In fact, if they are added using the <noscript> tag, then they are only
    available if Javascript is completely disabled. That might not be the
    reason for the menu failing. Maybe the menu's Javascript is incompatible
    with the used browser (it happens), but Javascript is enabled. Then
    neither the menu, nor the <noscript> element, is available.

    For a gracefull fallback, either the basic navigation should become
    part of the menu, or it should be remove using Javascript after the
    menu has been created successfully (and all needed features tested
    for).

    > A site all about javascript scripts, at least IMO, shouldn't be expected
    > to work without script enabled. That would be like going to a Quicktime site
    > and wanting to not have to use Quicktime.


    But a site that supplies Javascripts for *other* pages to use *should* offer
    scripts (and HTML) that offers gracefull fallback.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Sep 10, 2004
    #17
  18. Wim Roffal

    kaeli Guest

    Re: OT: CSS

    In article <>, enlightened us with...
    > for).
    >
    > > A site all about javascript scripts, at least IMO, shouldn't be expected
    > > to work without script enabled. That would be like going to a Quicktime site
    > > and wanting to not have to use Quicktime.

    >
    > But a site that supplies Javascripts for *other* pages to use *should* offer
    > scripts (and HTML) that offers gracefull fallback.
    >


    I never thought of it that way.
    I always just make my own if needed. I rarely need to, since the only thing I
    need it for is my intranet stuff, which can, and does, require javascript.

    I still say it's better than trying to make one from scratch by myself. :)

    If someone comes up with a great alternative, please post it over there so
    people can see how ya'll think it should be done. And so I can use it.
    *grins*

    --
    --
    ~kaeli~
    Who is General Failure and why is he reading my hard disk?
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Sep 10, 2004
    #18
  19. Re: OT: CSS

    On Fri, 10 Sep 2004 13:10:02 -0500, kaeli <>
    wrote:

    [snip]

    > If someone comes up with a great alternative, please post it over there
    > so people can see how ya'll think it should be done. And so I can use it.
    > *grins*


    I almost did[1]. :)

    Unfortunately, I'll have to start again from scratch.

    Mike


    [1] I don't know if it would have been "great", but it would hopefully
    have been an improvement, especially once you folks cast your eyes over it.

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 10, 2004
    #19
    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. Rob R. Ainscough
    Replies:
    2
    Views:
    1,671
    Rob R. Ainscough
    Feb 7, 2006
  2. Fred Nelson
    Replies:
    1
    Views:
    2,471
    Christopher Reed
    Feb 21, 2006
  3. Vernon Compton
    Replies:
    10
    Views:
    4,756
    Adrian Wood
    Mar 2, 2004
  4. Chris
    Replies:
    10
    Views:
    1,101
    Chris
    Mar 1, 2004
  5. Sentient Fluid

    Absolute/relative positioning of div's

    Sentient Fluid, Sep 1, 2004, in forum: HTML
    Replies:
    6
    Views:
    825
    Sentient Fluid
    Sep 4, 2004
Loading...

Share This Page