relative/absolute positioning

W

Wim Roffal

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
 
E

Evertjan.

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]
 
K

kaeli

<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.

--
 
L

Lasse Reichstein Nielsen

kaeli said:
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.

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
 
M

Michael Winter

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

[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
 
G

Grant Wagner

Wim said:
<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.
 
K

kaeli

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).

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. :)


--
 
W

Wim Roffal

Michael Winter said:
On Wed, 08 Sep 2004 18:51:43 +0200, Lasse Reichstein Nielsen

[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
 
M

Michael Winter

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

[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
 
W

Wim Roffal

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 said:
On Wed, 08 Sep 2004 18:51:43 +0200, Lasse Reichstein Nielsen

[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
 
M

Michael Winter

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

[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
 
K

kaeli

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
 
M

Michael Winter

[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.
 
K

kaeli

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.

--
 
M

Michael Winter


"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.
 
K

kaeli


"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.


--
 
L

Lasse Reichstein Nielsen

kaeli said:
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
 
K

kaeli

for).


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*

--
 
M

Michael Winter

[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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top