Position: Relative -> links do not work in Netscape

[Arachon]

Hi,

I have found a nasty problem on my site using layers:

When positioning a table with links over an image using 'position: relative' all the links included in the table do not work any longer in Netscape (but still work in IE5).

When positioning the table using 'position: absolute' all the links are perfect both in Netscape and IE5, but then I have a problem with different screen resolution.

Any ideas ?

Thanks !

[Marlboro]

Yeppers - dont use relative postioning.

Not to be sarcastic, but thats about the only way. Now the way to have the layers go where you want them when the page loads is another matter.

First you'll need to detect the avialable screen width and height then for each layer you'll need to assign a variable for both top and left positioning values.
This will take a little math but can be done.

I have a working sample for both IE5.x and NS6 (sorry it doesnt work in NS4.x). Take a look at http://www.i-81.net/marlboro/autoresize.asp and enjoy.

[kevin]

Without seeing your webpage or code, it sounds like it should be possible to accomplish. Make sure you are using the correct z-index values to place layers over or under other elements on a page. While it is technically not necessary to load layers in correct z-index order onto a web page, I find it generally works best to do so if at all possible. In other words, load the lower layers in first and add the top layers on as you go.

And try and stick with position:absolute instead of relative. Relative positioning is just going to give you a headache.

You could do as Marlboro says and use a browser detect and code the page to be dynamic for different resolutions, but I would just design for 800 x 600 resolution and make sure it's not too bad in lower or higher resolutions. But maybe I'm just lazy.... :D

Regards,
Kevin

[_mrkite]

Netscape 4 inflow layers (relatively positioned ones) are very buggy. They are really only good for one thing - positioning. They break when written to, disable links, mess up backgrounds, etc. The solution is to use them in tandem with absolutely positioned layers, which exhibit much more predictable behavior. Wrap your table in a 'layer sandwich' -

<ilayer><layer><table----/table></layer></ilayer>

to re-enable your links. It's not a z-index issue. Also, use Netscape's proprietary markup; the CSS support for layers was tacked on and is buggier than using HTML. With <layer>/<ilayer> tags, dimensions & position are accurately rendered (including percentages), bgcolors fill fully, and clipping actually works (although it's implemented left, top, right, bottom). Write markup dynamically, do 'client-side includes', use tag trickery (NN4 ignores markup inside <nolayer> tags and everybody else ignores <layer>), but you'll be a lot happier if you don't try to make your code 'one size fits all'. btw, 'layer sandwiches' work perfectly inside table cells -

<td id="cell4" width="30">
<ilayer id="cell4outer"><layer id="cell4inner" width="30" height="30"></layer></ilayer></td>

You can document.write() to the nested layer in NN4, and change the innerHTML of the <td> cell for others.

The best site for Navigator 4 dhtml workarounds is arguably Martin Honnen's faqts.com (http://www.faqts.com/) subsite.

Good luck...

[vituz]

>>_mrkite:
agree :)