DIV with CSS positioning not working

jdhanley · Oct 27, 2000

I am trying to create a simple layer using <DIV> and CSS positioning. Here is my function to show the "layer"

function show() {

if

document.layer1.visibility = "show"
if (ie) layer1.style.visibility = "visible"
}

when i call show() from <A HREF="#" onmouseover="show()"> it doesn't work for me in Netscape but it works fine for me in IE.

Any suggestions?

Thanks muchly!

John

jdhanley · Oct 27, 2000

OK, now I discovered something very interesting. In my <DIV> I had a table
(white bg) with a bunch of links. Now I put another table around it with a
black background and set a height & width attribute. Now Netscape shows me
this big black rectangle when I show that <DIV>. But it won't show the
inside table with the white background. Here's my code for the <DIV>

<DIV ID="layer1" STYLE="position:absolute; top:112; left:120;
visibility:hidden"
onmouseover="show()"
onmouseout="hide()">
<TABLE BGCOLOR="#000000" WIDTH=100 HEIGHT=200 CELLPADDING=1 CELLSPACING=0
BORDER=0>
<TR>
<TD>
<TABLE BGCOLOR="#FFFFFF" WIDTH=100 CELLPADDING=2 CELLSPACING=0 BORDER=0>
<TR>
<TD ALIGN="CENTER">
<FONT FACE="Verdana" SIZE=1>
<A HREF="believe.html">What We Believe</A>
</FONT>
</TD>
</TR>
<TR>
<TD ALIGN="CENTER">
<FONT FACE="Verdana" SIZE=1>
<A HREF="leaders.html">The Leaders of Northside</A>
</FONT>
</TD>
</TR>
<TR>
<TD ALIGN="CENTER">
<FONT FACE="Verdana" SIZE=1>
<A HREF="people.html">The People of Northside</A>
</FONT>
</TD>
</TR>
<TR>
<TD ALIGN="CENTER">
<FONT FACE="Verdana" SIZE=1>
<A HREF="where.html">Where Do We Come From</A>
</FONT>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</DIV>

Any suggestions as to why Netscape isn't showing the inside table?

Thanks muchly!

John

palbano · Oct 27, 2000

John,

The following code works in NS 4.06 and can be found here

http://saberco.com/work/nsvisible.htm

Hope this helps
-pete

<SCRIPT LANGUAGE=javascript>
<!--
function show(){

if ( document.all)
document.all("rnd&quot

.style.visibility = "visible";
else
document.rnd.visibility = "show";
}
//-->
</SCRIPT>
<style type="text/css">
.test{
position: relative;
visibility: hidden;
top: 112;
left: 120;
}
</style>
</head>
<body>
<p><a href="#" onmouseover="show()">Test</a></p>
<div class="test" id="rnd">
<TABLE BGCOLOR="#000000" WIDTH=100 HEIGHT=200 CELLPADDING=1 CELLSPACING=0
BORDER=0>
<TR>
<TD>
<TABLE BGCOLOR="#FFFFFF" WIDTH=100 CELLPADDING=2 CELLSPACING=0 BORDER=0>

jdhanley · Oct 27, 2000

I tried it, and what happens when the 'position' is relative is that it actually takes the <DIV><TABLE></DIV> and creates it inside my current layer, not over top of it. It hides it, but nonetheless it messes up everything because it creates it within my current layer.

When I have 'position' set to absolute, it creates another layer and works fine, but in Explorer only, not in Netscape.

What else am I doing wrong? I have my <DIV> inside my table, does that matter?

Thanks muchly!

John

palbano · Oct 28, 2000

John,

> I have my <DIV> inside my table, does that matter?

Your post is confusing, you state the above but the code you posted does not have the 'div' inside the 'table' rather it is OUTSIDE the table. That was the code I used to build my test that I posted for you.

Also you do not state what happens when you go to the URL I posted, does it work correctly? That URL uses 'position: absolute' and works in IE 4 and 5 and NS 4.06 on NT 4.0

If you are more specific it is easier to help.

-pete

jdhanley · Oct 29, 2000

Sorry Pete,

I realize I was confusing. I also didn't give you all of my code. I posted one of my functions and then I posted my <DIV></DIV> segment from my code.

The code you see above that I previously posted is actually only what is inside my<DIV></DIV> (I have a table inside my <DIV></DIV>). What you don't see (what I didn't include) is that the <DIV><TABLE></TABLE></DIV> is INSIDE another larger table.

So what I posted is <DIV><TABLE></TABLE></DIV>, but not the fact that there is a table around it as well.

I just discovered that having that DIV (that I posted above) inside another table was the problem.

I just went to the URL you posted and that works fine. Sorry I didn't go to it prevously, I guess I looked at the code you posted and didn't clue in that I was supposed to go to the URL to see the example.

Sorry for my confusing posts. I'll try better next time.

Thanks a bunch for your help, though, Pete! I really do appreciate it!

Take care and God bless!

John

palbano · Oct 30, 2000

Thank you John, and I'm glad to hear you solved your problem.

Good luck
-pete

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

DIV with CSS positioning not working

jdhanley

Programmer

jdhanley

Programmer

palbano

Programmer

jdhanley

Programmer

palbano

Programmer

jdhanley

Programmer

palbano

Programmer

Similar threads

Part and Inventory Search

Sponsor