Question about div/layer positioning

[Alex]

Hi there!

I have reused one of the very useful javascripts from the library here.

I am not sure but I think that the problem that I observed is a general one:

IE and Mozilla automatically add some blank space at the end of my HTML document where I included a javascript that defines, creates and handles a cascading menu. And it seems that the size of this blank space is the size of the longest div entry of my cascading menu.
When I use the cascading menu the first time, the blank space at the bottom disappears. See an example here:

http://www.t-y-c.de/

Does anybody know a solution to disable this browser behaviour?

[gil davis]

When you initially declare the DIV for your menu, set the TOP and LEFT attributes to 0px, either in the style declaration or in-line.

[Alex]

Originally posted by gil davis
When you initially declare the DIV for your menu, set the TOP and LEFT attributes to 0px, either in the style declaration or in-line.

Hmm, I not sure about how to do this. I have downloaded the "Cascading Menu" script from http://javascript.internet.com/navigation/cascading-menu.html. I am not sure where I could change the initial positioning without changing the mouse-sensitive position of the root div/layer. Could you assist?

Or does anybody else know another solution?

[gil davis]

Try asking the author - Angus Turnbull at http://gusnz.cjb.net

[DoyleRules]

Alex: ..It's actually very simple. Add the following to any DIV tag to position it where ever you want:

<DIV style="position:absolute;top:0;left:0">
Your content inside of the DIV tag
</div>

&nbsp;&nbsp;&nbsp;That's it, the above "style" that is added will put your DIV tag at the top, left corner of the page.
What does it mean? Obviously the position attribute is asking you, 'Where do you want me to be placed". The answer that we put is, "Absolute". The Absolute position makes it a "floating" layer so that it will appear on top of the rest of the BODY of your web page.
&nbsp;&nbsp;&nbsp;We then tell it that we want it to, "float" at the "TOP" corner, at position "0" of the page. Then you state how far from the left side you want it by stating, "LEFT", again at position "0" which puts it as far left as it can go, ..well essentially. It is possible to go further, but that is irrelevant for now.
&nbsp;&nbsp;&nbsp;In addition, you may notice that inbetween each attribute and it's answer you have the, ":" colon symbol. The colon is the same thing as the "=", equal symbol in regular HTML.
&nbsp;&nbsp;&nbsp;Finally, you'll notice that inbetween each attribute and it's statement, (position:absolute) there is a, ";" semi-colon after it. This does nothing more than tell your browser that you are finished with that statement and want to begin another. You then add your next statement as, (top:0).
&nbsp;&nbsp;&nbsp;Here's an example of what this would look like if it were possible to call out these attributes in regular HTML:

<DIV position = "absolute" top = "0" left = "0">
Your content inside here.
</DIV>

&nbsp;&nbsp;&nbsp;Again the above is just an example of what it would look like if it were possible to write that in regular HTML, but it's not, so don't try to use that.
&nbsp;&nbsp;&nbsp;Hope that was helpful. These guys in here are GREAT! They can teach you mountains of information, if you are willing to open up and take it all in.

&nbsp;&nbsp;&nbsp; <--=MikeDoyle=--<< &nbsp;&nbsp;&nbsp;&nbsp; :)

P.S. Here's a helpful link to learn more about styles and what they come from, CSS (Cascading Style Sheets).
http://www.w3schools.com/css/css_intro.asp

[Alex]

Originally posted by DoyleRules
...
<DIV style="position:absolute;top:0;left:0">
Your content inside of the DIV tag
</div>
...
&nbsp;&nbsp;&nbsp; <--=MikeDoyle=--<< &nbsp;&nbsp;&nbsp;&nbsp; :)


Thanks Mike for this answer!

The quoted part of your answer is very basic and I do already know about that.

The problem on my page is, that I define all the layers withing a javascript file and write it to the document when the page has been loaded. Like this the browser seems to need some space where it can save the div/layer before it is displayed the first time. My problem was to disable this behaviour...

Nevertheless, thank you again!

[Alex]

Thank you guys! The tip to position the div at top:0; left:0 has helped me. I have added the two lines below my comment within the script (in the writeMenu function):


if (isDOM) {
var newDiv = document.createElement('div');
document.getElementsByTagName('body').item(0).appendChild(newDiv);
newDiv.innerHTML = str;
ref = newDiv.style;
ref.position = 'absolute';
// position it on the top left first, so that no additional space is added at the bottom of the pages
ref.top = 0;
ref.left = 0;
ref.visibility = 'hidden';
}