View Full Version : Can I use Javascript for positioning?

04-14-2005, 05:43 PM
I have four layers (2 of them are below)
<STYLE TYPE="text/css">
#layer1 {POSITION: absolute; Z-INDEX: 49100; VISIBILITY: visible; LEFT: 190px; TOP: 245px; WIDTH: 196px; HEIGHT: 190px}
#layer2 {POSITION: absolute; Z-INDEX: 49150; VISIBILITY: hidden; LEFT: 190px; TOP: 245px; WIDTH: 196px; HEIGHT: 190px}

When I test this in IE, NN4.7, NN6x, firefox there positions are different. I am using these layers to position some drop downs dynamically. But I also have some fixed checkbox, drop downs in my page.

So in some browsers these dropdowns created with positioning is overlapping with the other drop downs which were created without layers. Is there any way to avoid this?
May be write a javascript within the style tag to see what browser it is and then put the left and top value?

Also can I omit the "height" tag and the z-index? Will it cause any problems?

04-14-2005, 08:10 PM
dont understand the problem


<STYLE TYPE="text/css">
#layer1 {POSITION: absolute; Z-INDEX: 0; VISIBILITY: visible; LEFT: 190px; TOP: 245px; WIDTH: 196px; HEIGHT: 190px; }
#layer2 {POSITION: absolute; Z-INDEX: 1; VISIBILITY: visible; LEFT: 290px; TOP: 145px; WIDTH: 196px; HEIGHT: 190px; }

<div id="layer2" style="background-Color:red;" ></div>
<div id="layer1" style="background-Color:blue;" ></div>


seems ok

04-14-2005, 08:28 PM
Yeh, the code is ok and doesnt have any problem. But my problem is say in my layers, I have said...

#layer1 {POSITION: absolute; Z-INDEX: 0; VISIBILITY: visible; LEFT: 190px; TOP: 245px...

Here the LEFT is 190px which is a position in IE. But in Netscape 4.7 this is not the same as IE. In NN4.7 layer1 is positioned a little bit more toward left and up. In Firefox it is positioned even a bit differently.

So I am trying to position them exactly at the same spot which borwser I use. That is what I am not being able to do.

Mr J
04-14-2005, 08:47 PM
When you say you have some fixed checkboxes I am assuming that they are coded as normal in the page.

It is not the css that is the problem but how the different browsers position things in the normal flow of the document.

For example, the default line height may be different.

Running the following simple test I found that in IE div1 was positioned 15px from the top and div2 was positioned 34px from the top yet in Mozilla, Firefox, and NS7 the positions were 8px and 28px respectively

<div id="d1">Hello world</div>
<div id="d2">Hello world</div>


04-14-2005, 08:53 PM
Unfortunately, with my experience, positioning things with css results differ in each type of browser.

One way would be to either redirect the user to a page specialy created for that browser, or make one page, detect the browser, and output the position for that browser.

04-14-2005, 09:04 PM
What MR J said is exactly I am facing. So to solve this may be I should write a javascript to detect the browser and then have different values for each browser.

But can you have the <style> tag inside a javascript function? - Function to detect different browsers? I got some errors

04-14-2005, 10:28 PM
You cant put a style inside script tags taht I know of. You will have to do something like this:

document.getElementById('id name').style.left = 100;
document.getElementById('id name').style.top = 100;

04-14-2005, 10:50 PM
but Netscape 4.7 does not understand getElementById. I have to make it work on NN4.7 also.

04-14-2005, 10:53 PM
I don't code for netscape at all, so I can't help you with the format.

But what I would do in this case would be to write a function to get the object. The function would get the object (based on what browser you are using), and return the object.

Mr J
04-14-2005, 11:41 PM
Does NS4.7 recognise document.layers?

If it does you could go

do this
do this

04-15-2005, 01:06 AM
I tried with document.layers and it didnt work in NN6.2. Also I have to support (PC) NN4.7 and higher, IE5.0 and higher, firefox and also in Mac IE, NN, and firefox. So thats why its been a bit tricky

I will try with a function :)

Judgment Day
04-17-2005, 09:59 AM
What a coincidence...I have this exact same problem too.

Only thing is I can't get to a Mac until school labs are open on Tuesday, so I can't check stuff to be sure for those browsers. But I should have something available by then, and hopefully I can share it with whoever has the problem. I'm also open to suggestions. Thanks for the contributors of this thread.

04-18-2005, 04:39 PM
Thanks judgment Day. If you get to work in Mac, please post it here too.

04-18-2005, 04:58 PM
First at all. If no special CSS, pages have a "border" left/top of different values in IE, NS or Moz. You must specify the body's margins to be 0
<style type="text/css">
body {
margin-top: 0px;
margin-left: 0px;

NS 4 uses document.layers to refere document's objects, but does not necesary means they have to be <layer> tags...

On the other hand, modern browsers set the CSS attributes as
while NS 4 uses simply

There are other differences also. NS4 needs the object to be absolute/relative positioned before almost all the on-the-fly modifies. NS4 does not use relative positioning (it uses <layer><ilayer> combination for that). NS 4 uses other value for visibility (show/hide instead of visible/hidden)... and some small other differences are to be found in particular cases

04-18-2005, 05:03 PM
You cant put a style inside script tags taht I know of. You will have to do something like this:

document.getElementById('id name').style.left = 100;
document.getElementById('id name').style.top = 100;

document.getElementById('id name').style.left = 100+'px';
document.getElementById('id name').style.top = 100+'px';

Judgment Day
04-19-2005, 08:09 AM
I don't know the relevance of this question, but is it worth coding for a browser that's rarely used? I'm looking at my bandwidth stats, and between Internet Explorer and Firefox, those viewers are making up almost 95% of total bandwidth (Almost 1.25GB in a week). Netscape hasn't even hit the 1% mark, so I'm wondering if the ends justify the means.

04-19-2005, 08:24 AM
NS 4 uses other value for visibility (show/hide instead of visible/hidden)... Yes that's correct, but you can also set the visibility using visible/hidden but if you access it, it will say show/hide.

04-19-2005, 03:39 PM
Judgment Day is correct. But I think some of our major customers use firefox, NN4.7 etc. So we have so satisfy them too (I dont know why they are still using NN4.7).

See the thing is I cannot set the border property in the body tag. Because I have a set to text boxes and drop downs in a <tr> tag in my website and then another set of drop downs in a second <tr> tag. The second set of drop downs are the ones in a layer where I show and hide. So I have to align the first set of drop downs and second set of drop downs on the left side which is now a problem with the different browsers due to positioning. For example

<tr><td colspan="2">Choose a database</td></tr>
<tr><td width="5"><img src="s.gif" width="5"><td><input type="text"></td</tr>
<tr><td colspan="2">Choose a search in field</td></tr>
<tr><td width="5"><img src="s.gif" width="5"><td
<select name="field"><option value="1">value1</option><option value="2">value2</option>

<tr><td colspan="2">Choose Limit</td></tr>

See in the last td tag area, I am placing the second set of dropdowns with positioning.

<div id="layer1">
Here there will be a lot of dropdowns which will be called into that spot with positioning

The code is too long, thats why I am not posting the whole thing.

04-22-2005, 09:41 AM
I'm pretty new to this stuff too, but I did notice one thing and it might only be a typo but you were missing a closing tag in one line. Not sure if that would be the root of your problem or not . . .

<tr><td width="5"><img src="s.gif" width="5"></td><td><input type="text"></td</tr>


04-22-2005, 05:05 PM
No, thats not the case. Because my original code is correct. This I made a mistake while typing into the coding forums website.

04-22-2005, 07:23 PM
Just from a CSS standpoint, if you don't have the body tag like such, different browsers will position things differently.

body { margin: 0; padding: 0; }