Display error with "fix positioned" div

Hello,

I have a web page that contains the following things.
1) Lots of text, so that the page is longer/higher than one browser screen.
2) Within that text there is an input text field.
3) On some place after there, there is a select tag.
4) I have the following div tag absolutely positioned on the page, somewhere
between all the text.
<div id="fixeddiv"
style="position:absolute;left:0px;top:50px;width:3 00px;height:100px;border:s
olid 1px #000000;background:#ffffaa">This is the fixed div tag text.</div>

Now what I first want is that the div tag doesn't move on the view of the
user when I use the vertical browser scrollbar to see all the text. To do
so, I have used the setTimeout function where I always change the value of
the "top" style attribut of the div tag according to the amount of pixels I
have scrolled. The code line is:
fixeddiv.style.top=document.body.scrollTop+50;
The second I want is that the div has to be NOT transparent, so I do not
want to see the normal page text within my div box. In the div box only the
div text inside (This is the fixed div tag text.) should be displayed.

For the moment all goes right with my idea, but now there comes the problem.
1) When scrolling the normal page text (see 1) ), it disappears behind the
div. -> OK
2) When scrolling the input text field, it also disappears behind the
div. -> OK
3) But when scrolling the select tag, it does NOT disappear behind the
div. -> NOT OK
Instead I can see the select tag fully in front of my div, as if the
select had a higher display priority than the div.
But this behaviour is annoying. If you can't believe, please try it!

Does anybody know how to fix this behaviour? I don't want to use a frame to
have a fixed positioned text.

If you need the full code of my page, please let me know.

Any help to this would be very appreciated. Thanks in advance.

Nice greetings from
Thomas

On Thu, 14 Oct 2004 18:25:41 +0200, Thomas Hoheneder
<thomas.hoheneder (AT) gmx (DOT) de> wrote:

If you need the full code of my page, please let me know.

Please post a URL to a test case, even if it isn't the actual page that
you'll probably say you can't reveal. Don't post a mess of code, please.

Please post a URL to a test case, even if it isn't the actual page that
you'll probably say you can't reveal. Don't post a mess of code, please.

Please see http://www.thomas-hoheneder.de/scrolldiv.html

Nice greetings from
Thomas

Thomas Hoheneder wrote:

Please post a URL to a test case, even if it isn't the actual page that
you'll probably say you can't reveal. Don't post a mess of code, please.


Please see http://www.thomas-hoheneder.de/scrolldiv.html

Doesn't work in Firefox:

Error: syntax error
Source File: http://www.thomas-hoheneder.de/scrolldiv.html
Line: 6
Source Code:
<pe="text/javascript">

Error: scrollDiv is not defined

If I fix that error, Firefox behaves as you want.

I do see your problem in IE, however. Fiddling with z-index appears not
to work - this might be an IE bug (shock!).

The answer is to use a better browser...

--
Mark.
http://tranchant.plus.com/

Thomas Hoheneder wrote:

Instead I can see the select tag fully in front of my div, as if the
select had a higher display priority than the div.
But this behaviour is annoying. If you can't believe, please try it!

Yes, it is annoying, and yes, it is an IE bug - or perhaps "feature".
See http://support.microsoft.com/default...;EN-US;q177378

"Windowed" elements such as selects will always render above normal HTML
elements. There's a horrible, nasty, ugly, hacky workaround at
http://dotnetjunkies.com/WebLog/jkin...07/21/488.aspx which
involves placing an empty iframe over the select. I wouldn't recommend
this though!

As an aside, the behaviour you want is already present in modern
browsers without using javascript using position: fixed. There's even an
easier way to emulate the behaviour in IE - see
http://devnull.tagsoup.com/fixed/

HTH

P

"Phil Evans wrote:

Yes, it is annoying, and yes, it is an IE bug - or perhaps "feature".
See http://support.microsoft.com/default...;EN-US;q177378
snip
elements. There's a horrible, nasty, ugly, hacky workaround at
http://dotnetjunkies.com/WebLog/jkin...07/21/488.aspx which
snip
http://devnull.tagsoup.com/fixed/

It really seems to be a bug (or a feature) of IE. Thank you for your URL's
and advices.
I think I will do it with an iframe within a div, which is of course no very
good solution, but I got it work.
The second disadvantage is, that I have to put the iframe's content into a
separate HTML file...

Nice greetings from
Thomas