Position something relative to an inline element?

[axlq]

I've spent most of the day struggling with what I thought would be a
trivial problem.

I have a hidden element that appears, outside of the normal flow,
when the mouse hovers over an inline element. HOWEVER, I want the
hidden element positioned at a location of my choosing relative to
that inline element.

Is this possible?

The best I can do is use "position: absolute" on the hidden block
with no top/left position defined. The problem is, the block always
appears to the right of the inline element. I can't move it!!

What if I want the element to appear BELOW the inline element, lined
up with the left border of the element? How do I do that?

Example demo: http://sunshine.rahul.net/~unicorn/test2.html
(Test in Firefox or Opera; doesn't work in IE)

================================================== ==============
CSS:
ul { margin: 0; padding: 0; }
li { list-style: none; margin: 0; padding: 0; display: inline; }
li div { border: 1px solid red; display: none; position: absolute; }
li:hover div { display: inline; background: yellow; }

HTML:
<ul>
<li>item 1
<div>hidden<br>block 1</div></li>
<li>item2
<div>hidden<br>block 2</div></li>
</ul>
================================================== ==============

If I change the "li: hover div" definition to "display: block" then
the block always appears at the left edge of the page, not relative
to the inline element. Setting "position: relative" puts the hidden
element into the normal flow, which messes up the appearance of the
page; the element should be outside the normal flow.

Any suggestions? Help!

-Alex

[Els]

axlq wrote:

I've spent most of the day struggling with what I thought would be a
trivial problem.

I have a hidden element that appears, outside of the normal flow,
when the mouse hovers over an inline element. HOWEVER, I want the
hidden element positioned at a location of my choosing relative to
that inline element.

Is this possible?

The best I can do is use "position: absolute" on the hidden block
with no top/left position defined. The problem is, the block always
appears to the right of the inline element. I can't move it!!

What if I want the element to appear BELOW the inline element, lined
up with the left border of the element? How do I do that?

Example demo: http://sunshine.rahul.net/~unicorn/test2.html
(Test in Firefox or Opera; doesn't work in IE)

================================================== ==============
CSS:
ul { margin: 0; padding: 0; }
li { list-style: none; margin: 0; padding: 0; display: inline; }
li div { border: 1px solid red; display: none; position: absolute; }
li:hover div { display: inline; background: yellow; }

HTML:
<ul>
<li>item 1
<div>hidden<br>block 1</div></li>
<li>item2
<div>hidden<br>block 2</div></li>
</ul>
================================================== ==============

If I change the "li: hover div" definition to "display: block" then
the block always appears at the left edge of the page, not relative
to the inline element. Setting "position: relative" puts the hidden
element into the normal flow, which messes up the appearance of the
page; the element should be outside the normal flow.

Give <liposition:relative, so that it forms the reference for the
position:absolute and the top and left values on the <div>.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[axlq]

In article <37***************************@40tude.net>,
Els <el*********@tiscali.nlwrote:

>Give <liposition:relative, so that it forms the reference for the
position:absolute and the top and left values on the <div>.

See, I *knew* it was simple! That worked well. Thanks! And to
think I struggled for 6 hours not knowing position:relative had that
effect.

-A

[axlq]

In article <37***************************@40tude.net>,
Els <el*********@tiscali.nlwrote:

>Example demo: http://sunshine.rahul.net/~unicorn/test2.html

Give <liposition:relative, so that it forms the reference for the
position:absolute and the top and left values on the <div>.

I was overjoyed that this seemed to fix the problem, however....

It turns out that it worked only for Firefox, but not Opera.

Opera behaves as if the inline elements are left-justified. If I
left-justify them, Opera still puts the hidden blocks to the right
of its associated inline element.

I'm using Opera 8.51 because Opera 9 seems too buggy in other ways.

Any ideas?

-Alex

[Els]

axlq wrote:

In article <37***************************@40tude.net>,
Els <el*********@tiscali.nlwrote:

>>Example demo: http://sunshine.rahul.net/~unicorn/test2.html

Give <liposition:relative, so that it forms the reference for the
position:absolute and the top and left values on the <div>.

I was overjoyed that this seemed to fix the problem, however....

It turns out that it worked only for Firefox, but not Opera.

Opera behaves as if the inline elements are left-justified. If I
left-justify them, Opera still puts the hidden blocks to the right
of its associated inline element.

I'm using Opera 8.51 because Opera 9 seems too buggy in other ways.

Any ideas?

It seems indeed that Opera (I'm using 8.54) has a bug in this case.
You are right about it behaving as if the inline elements are
left-justified - I added some extra text to the first <li>, and the
placing of the second <li>'s <divmoves up exactly the amount of
space needed for the text of the first <li>.

Also, it isn't a problem with the <uland <liconstruction in itself
- the same thing goes wrong if you wrap it all in divs and spans: as
soon as you center align the lot, everything is centered, except for
the absolute positioned items.

So far, I haven't even found a workaround, other than setting an
explicit width on the <ul>, so that the left side of the <ul*is* the
left side of the first <li>. Not exactly a solution in a real website
environment :\

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[axlq]

In article <1g*****************************@40tude.net>,
Els <el*********@tiscali.nlwrote:

>axlq wrote:

>>>Example demo: http://sunshine.rahul.net/~unicorn/test2.html

It seems indeed that Opera (I'm using 8.54) has a bug in this case.
You are right about it behaving as if the inline elements are
left-justified - I added some extra text to the first <li>, and the
placing of the second <li>'s <divmoves up exactly the amount of
space needed for the text of the first <li>.

Also, it isn't a problem with the <uland <liconstruction in itself
- the same thing goes wrong if you wrap it all in divs and spans: as
soon as you center align the lot, everything is centered, except for
the absolute positioned items.

So far, I haven't even found a workaround, other than setting an
explicit width on the <ul>, so that the left side of the <ul*is* the
left side of the first <li>. Not exactly a solution in a real website
environment :\

Yes, that solution won't really work because I have no way of
knowing in advance what the width of the <ulwill be.

I can think of two other workarounds, and I can't figure out how to
implement either of them:

1. One workaround is to make Opera behave like IE, which doesn't
show the hidden boxes. To do this, one needs to hide the :hover
CSS rules from Opera. I have no idea how to do this. A web search
reveals all sorts of ways to hide CSS from Opera 5 and lower, or
Opera 7 and lower, but so far I can't figure out how to hide CSS
from Opera 8 and lower.

2. Another workaround is to have some sort of conditional comments
in the HTML to eliminate the centering for Opera. Unfortunately,
conditional comments seem to be a Microsoft hack, not supported
by Opera as far as I can tell. I guess I could use javascript to
detect the browser and modify the centering div somehow, but I'd
rather not resort to that.

-A

[axlq]

Followup:
In article <e8**********@blue.rahul.net>, axlq <ax**@spamcop.netwrote:

>I can think of two other workarounds, and I can't figure out how to
implement either of them:

1. One workaround is to make Opera behave like IE, which doesn't
show the hidden boxes. To do this, one needs to hide the :hover
CSS rules from Opera. I have no idea how to do this. A web search
reveals all sorts of ways to hide CSS from Opera 5 and lower, or
Opera 7 and lower, but so far I can't figure out how to hide CSS
from Opera 8 and lower.

2. Another workaround is to have some sort of conditional comments
in the HTML to eliminate the centering for Opera. Unfortunately,
conditional comments seem to be a Microsoft hack, not supported
by Opera as far as I can tell. I guess I could use javascript to
detect the browser and modify the centering div somehow, but I'd
rather not resort to that.

What I ended up doing on the site I'm developing is to define a
CSS text-centering class and hide it from Opera. So now my list
items are left justified in Opera, but that's OK. I put this in the
<headsection of my site pages:

<style type="text/css" media="scReen"><!-- /* hide from Opera */
..ctr { text-align: center; }
--></style>

Evidently that hack works for Opera version 8 and lower. I haven't
tested with Opera 9; hopefully with Opera 9 it won't be necessary.
Then I use <div class="ctr"to center the list items in all
browsers except Opera.

-A