Layer Positioning in IE5 & NS6

I know there have differrences in IE5 and NS6 in the CSS position:absolute style attribute, So, i create a reposition function for IE5 and Nestcape6, such as:

if(ns6){
obj.style.left = 120;
obj.style.top = 132;
}

it work fine, but when i resize the window (in NS6), the position can't go relative to the windows size.

please help!! In IE, I use mergin-left and margin-top instead of left and top, then only it work the way as I want it to be.

Please advice. Thanks!

u probably need to reload the page everytime the window gets resized. or u could change teh properties of the window so that it can't be resized ( the resizable property) no idea whether this or if it will work or not!
onResize="handlerText"
to reload, the handler text would be this:
javascript:location.reload()
Hope this information helped u out!

here's a generic, cross browser reload/resize trap, which must be in the BODY section




<script language="javascript">

var agt = navigator.userAgent.toLowerCase();

function nsReload() { window.location.reload(); }

function resizeReload() {

if (window.opera||(agt.indexOf("konqueror")!=-1)) {
var newBW=window.innerWidth;
var newBH=window.innerHeight;
if(newBW==oldBW&&newBH==oldBH){ setTimeout("resizeReload()",100); }
else { window.location.reload(); }
}

else if (document.layers) {
if (agt.indexOf("win")!=-1) { setTimeout("window.onresize=nsReload", 500); }
else { window.onresize=nsReload; }
}

}

if(window.opera||(agt.indexOf("konqueror")!=-1)){
var oldBW=window.innerWidth;
var oldBH=window.innerHeight;
resizeReload();
}
else if (document.layers) { resizeReload(); }
else { window.onresize=new Function("window.location.reload()"); }

</script>

would like to add somemore things, that is when I change the screen resolution, the position "out" of the position as well...
please advice.

for better understanding of what I want (previous thread), kindly go to
http://www.setiahomes.com/johor/index2.html and have a look.
Thanks You Very Much!

continue previous thread.
after access to the page,
1.)please mouseover the "futurelaunches" menu (at top banner) and see (in IE 5 and NS6)

2.) Click on the "property for sales" Link, at side menu, the position display not properly in NS6, after clicking, there have "gap" between Development Progress Link and Futurelaunches.

Pls advice. Thanks You!!

do u mean like u want the menu to be straight under it?
and i just opened it in netsacpe 6 and the postitioning is fine

ah ya, forget to ask you to click (show event) and double click (hide event), then you will know what I mean.
Thanks You Very Very Much!!

your menu doesn't work at all in NS6. To fix this, you must implement The DOM way of hiding and showing elements. You're going to have to put in another thing in your if else statement:

function showLot(id)
{
ns6=(document.getElementById) ? true:false
ns4=(document.layers)? true:false
ie4=(document.all)? true:false
if (ns4)
{ document.layers[id].visibility="show"

}
else if (ie4)
{
document.all[id].style.visibility="visible"

} else if (ns6)
{
document.getElementById(id).style.visibility="visible";

}
}

To hide it, the visibility property should be "hidden"

Since i don't actually have access to your server, plus i don't really have the time, i can't test and replace the include by myself.

I don't know why, the "property for sales" side Link can't work on NS6 at your side. My one no problem, can hide and show, but just have a gap between the "Development Progress" Link and "Futurelaunches" Link.

MOreover, the position of the "Futurelaunches" menu (banner there) can't stay on the original position when resize it, I want to fix this problem in NS6, in IE it work fine.

in NS6 the menu goes to the right a little,u mean u want to fix that?
and the links work fine now in my browser, without any gaps or anything. ( compared IE to NS6, couldn't c a difference)

snakedevil1,

ya, you are right, the menu goes to the left a little (resize smaller), it won't fix under the "Futurelaunches" menu (banner there) like what IE5.5..

I use NS6.0, what version are you using?? If it work fine, just forget about it...please help me to solve the above problem.

the problem that i requested to solve is fix the layer under the futiurelaunches link.

Do you mean you want it under the future launches links in the banner?

I've lookes through your code, but can't seem to find the code for the menu. Is it in an include, or in the index of the page?
If so, which include is it in?

Thanks for your help, the code is insde the headpage.js file, I have already attached the txt file which is my content of the headpage js file.

Please help me......I feel so sad as until now my problem still cannot be solved. :((

this is going to be a big trial and error process, becuase when i tried to download ur page IE and netscape (both) wouldn't save it right (some images were missing!). Alright, try setting the margins to whatever you want them to be:
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">

once u do that, replace the headpage u have with the one i included as an attachment. i commented out all the display differently stuff, lets jus tsee what happens after that.

sorry, forgot the attachment:

just to make sure we're on the right track, u want the menu straight under the name in the banner, like in IE, right?

Yes, you are right, I want the menu display exactly under the Futurelaunches Link which is one of the Link in the Banner, like in IE. Thank you!

Dear Shake,

forget to tell you that, I want my menu straight under the Futurelaunches Link even my window is resized.

Ya, I have already follow what you have told me, that is set the margin for the <body> and replace the txt file, but still can't solve my problem. Please help! And Thank You Very Much!

I took a quick glance and took a bad guess that it would be that ( i didn't really expect it to work ;)) Could u send me all the files for your page, or just ur main one? The process wouldn't take that long that way, and i'll just post headpage.js up here when i fix it. It would be a lot easier that way.

oh, and by the way,when you resize in Netsape 6 the window doesn't change porportionally, it just cuts off whatever can't be displayed and puts up a scrollbar, so when u resize it shouldn't change anything ( correct me if i'm wrong)

Dear Shake,

I'm not really understand what you mean, but i hope that you can understand what I explained.
ok, when the window is resized in NS 6, just assume that you resize it to the right (or left), u can see that the layer menu would follow and move to the right, but just not proportion with the Futurelaunches link.

I'm here have an idea, why don't try to use mathematic way, for instance:

layermenu.left = banner.left + x

I'm now trying, but face some problems...do hope u can help me as seem like nobody find the solution yet (I post a lot of forums)...


I attach a txt file, I combine all the files content into one file as I don't know whether it can send more than a file or not, so please separate the content into different file.

Thanks A Lot!

The resize problem is easy. All you have to do is enclose both futurelaunches and the futurelaunches menu into one div. Netscape only moves whole layers, so it would move with it. :)

And for the other problem, i don't understand what your saying. Do you mean u want to mathemattically calculate how far it is from it and then place it where it should be?

ok, im already sure that u've put a layer around the banner, so all u have to do is nest the menu isnide the banner layer. Once you do that , jsut do what u said, matematically find out where it is (whatever.left), and then add the indention (+x), and place it there.
I'm not sure about yhe nesting divs, it still may go somewhere. To make sure its always in the right position,u could use hte math calculation (now im starting to notice that im just repeating what u said. :) ) if u want i'll edit the code to do that, but right now i really don't have the time.
Tell me about hte problems u have encountered, and i'll try to fix them if u like.

Thanks shake for ur time and effort, i'm now trying to solve, and will keep you inform. But, if i really can't solve it, then need your help already, else will leave it like this.:((

oh ya, just would like to know, as a web developer, do we REALLY (compulsory) to create a cross-browser web-site??? Or just base on our needs, such as if most of our user are using IE (base on the statistic), i just create my web-site which only compatible with IE.

shake, I'm facing problem of getting the coordinate value,

x = document.getElementById("menu").style.offsetLeft;

, i wonder why i can't get the value for:

x = document.getElementById("bmenu").offsetLeft

my answer for x is "0", even i use offsetTop (Width, Height), my answer always is "0", please advice. Even I position the menu in other place, the value still "0", imposible right??

hi, just in case you and me can't solve the problem finally, i'm thinking of disable the resizeable button of the window. What do you think?:))

If you want, but its not a real good way of doing it. I'm sure we'll figure out some way. But if you really want to, you can.

It is impossible. That's weird.... But you can still use the documents.object or get elementbyid or something.style.left property and the top property, right?

Well, according to netstat.com 95% of the users in this world use IE. But you still need get across to all the audience, even if it is 5%. I know a lot of people who use Netscape, I can't really figure out how it got to be five percent. Why don't you take a poll and ask your visitors what browsers they use. In my opinion, it depends upon your browser audience. So well ya, majority rules, and since everyone has IE (unless they are running linux), I don't see why they just can't open it up and go to your webpage.

I found a couple of return position functions. I tested them and I think they work in Netscape 6:
function findPosX(obj)
{
var curleft = 0;
if (document.getElementById || document.all)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (document.layers)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if (document.getElementById || document.all)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (document.layers)
curtop += obj.y;
return curtop;
}

I got it from http://www.xs4all.nl/~ppk/js/index.html?/~ppk/js/findpos.html
It has a very good article on finding the position of elements.

thanks a lot shake...
actually, I almost going to give up to find the solution already, this is because I have too many things to do, got another project in hand, so can't spend too much time to find out the solution. Anyway, will try it out when i'm free as for me nothing is impossible.

Guess won't be a big problem as my web-page look good in IE, in nestcape6, user can view the page as good as IE, unless they resize their window. I try already, even i change the screen resolution, the layer still associated with the Futurelaunches Link. So, should not be a big problem.

I have already went through (briefly) the site that you mentioned, it is really really really useful, thank for your guidance, really appreciate it. I will try to solve my problem with the code given by you within these two days, will keep you inform of my progress.

oh ya, forget to tell you, even I use, obj.style.left , i can't get any value too, the answer is "empty" or "blank" instead of underfine. Do you know why???

You are giving a very good response on my questions (may be to others as well), so, will never forget codingforums.com when i have any problems.
thanks again.

ya, more questions to ask...

I want to make a summary for IE and Nestcape: check for me whether my summarry is correct.

IE4, IE4+, IE5, IE5+, IE6 = Support document.all
IE5, IE5+, IE6 = Support document.getElementId

NS4, NS4+, NS5 = Support document.layers
NS6, NS+ = Support document.getElementId

Please advice.

Ya, im pretty sure thats right. If you have anymore questions, feel free to ask ! 8)