i have a feeling that css has something to do with this - "hidden" links in NN4

[ktown]

hey
http://nicotine.golden.net/~nina/lak...ROverview.html

ok - if you open it in Netscape 4 - you can't click ANY of the links inside the main content cell... has anyone seen this? i've also posted it in Browser Issues, but i have a funny feeling its a z-index thing with css... but you'd think that if you can SEE it then you should be able to CLICK it? no?

ok

[BenANFA]

Not if you had a transparent element over the top of the links, you would be able to see through to them but the transparent element would get the clicks; I think.

[ktown]

ok - so this might be my problem the i guess... i have a

in THE StyesNN.css
#main {
  position:relative; 
  margin-left:175px; 
  top:115px; 
  width: 512px;
  }
in the @import Styles.css
#main {
  position:absolute; 
  margin-left:175px; 
  top: 115px; 
  z-index:1; 
  width: 512px;
  padding-right: 10px;
  border-right: 1px dotted #999999;
  }

so this creates my MAIN content area i suppose, then i put this inside of it ..

<div id="main">
<span class="contnt"> 
<!-- this is just a font style, etc.-->
 

stuff in here

</span>
</div>

what is on top? my div id=main or my content???

[hurricane.uk]

class="contnt" ?

That's not mentioned in the above styles, so I'd guess there's something else that isn't. Post it all (the NN version).

[ktown]

ok

/* CSS Document - MAIN SECTION - TEMPLATES */ 
body, div, p, th, td, li, dd	{
	/* redundant selectors to help NS4 not forget */
  font-family:  Verdana, Lucida, Arial, Helvetica, sans-serif;
  font-size: small;
  }

/* NAVIGATION PROPERTIES AND STYLES */
A.navtop:link, A.navtop:active, A.navtop:visited  {
  COLOR: #000000; 
  FONT-FAMILY: "Verdana","Arial","Helvetica","sans-serif"; 
  FONT-WEIGHT:  bold; 
  TEXT-DECORATION: none;
  FONT-SIZE: 11px;
  }
A.navtop:hover {
  COLOR: #990000; 
  FONT-FAMILY: "Verdana","Arial","Helvetica","sans-serif"; 
  FONT-WEIGHT:  bold; 
  TEXT-DECORATION: none;
  FONT-SIZE: 11px;
  }
 
A.navstyle:link, A.navstyle:active, A.navstyle:visited {
  COLOR: #000000; 
  FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"; 
  TEXT-DECORATION: none; 
  FONT-SIZE: 11px;
  MARGIN-LEFT: 10px;
  MARGIN-TOP: 1px;
  }
A.navstyle:hover {
  COLOR: #990000; 
  FONT-FAMILY: "Verdana","Arial","Helvetica","sans-serif"; 
  TEXT-DECORATION: none;
  FONT-SIZE: 11px;
  MARGIN-LEFT: 10px;
  MARGIN-TOP: 1px;
  }
A.navstyle1:link, A.navstyle1:active, A.navstyle1:visited  {
  COLOR: #FFFFFF; 
  FONT-FAMILY: "Verdana","Arial","Helvetica","sans-serif"; 
  FONT-SIZE: 11px;
  FONT-WEIGHT: bold; 
  MARGIN-LEFT: 5px;
  MARGIN-TOP: 1px;
  TEXT-DECORATION: none;
  }
A.navstyle1:hover {
  COLOR: #000000; 
  FONT-FAMILY: "Verdana","Arial","Helvetica","sans-serif"; 
  FONT-SIZE: 11px;
  FONT-WEIGHT:  bold;
  MARGIN-LEFT: 5px;
  MARGIN-TOP: 1px;
  TEXT-DECORATION: none;
  }
A.navbot:link, A.navbot:active, A.navbot:visited  {
  COLOR: #000000; 
  FONT-FAMILY: "Verdana","Arial","Helvetica","sans-serif"; 
  FONT-WEIGHT:  bold; 
  TEXT-DECORATION: none;
  FONT-SIZE: small;
  }
A.navbot:hover {
  COLOR: #990000; 
  FONT-FAMILY: "Verdana","Arial","Helvetica","sans-serif"; 
  FONT-WEIGHT:  bold; 
  TEXT-DECORATION: none;
  FONT-SIZE: small;
  }
 
/* CSS POSITIONED ELEMENTS */
#main {
  position:relative; 
  margin-left:175px; 
  top:115px; 
  width: 512px;
  }
#topnav {
  position: absolute;
  z-index: 2;
  top: 71px;}
#mainnav {
  position:absolute; 
  left:0px; 
  top:93px; 
  width:152px; 
  z-index:2;
  }
/*  WILL NOT USE AT THIS TIME 
  #adsside {
  position:absolute; 
  left:697px; 
  top:110px; 
  z-index:3; 
  padding-left: 10px;
  }
*/
#bgtable {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  border: 0;
  }
#sidenav {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border: 0;
  }
#footer {
 width: 500px;
 border: 1px solid #999999;
 }
#copyright {
 padding-top: 5px;
 padding-bottom: 10px;
 }
/* CONTNT ELEMENTS --- */
.contnt p, div, th, td, li, dd  {
  font-size: small;
  }
.tiny p{
  font-size: x-small;
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
/* FROM HERE ON THE STYLESHEET WILL BE THE MAIN CONTENT OF ALL WINDOWS - NOT JUST THE TEMPLATE LAYOUT */
#productoverview {
  width: 500px;
  border: 1px solid #000000;
  }
 
 
/* LINKS WITHIN MAIN CONTENT AREA */
A.product:link, A.product:active, A.product:visited  {
  COLOR: #336699; 
  FONT-FAMILY: "Trebuchet MS", "Verdana","sans-serif"; 
  FONT-WEIGHT:  bold; 
  TEXT-DECORATION: none;
  FONT-SIZE: small;
  }
A.product:hover {
  COLOR: #990000; 
  FONT-FAMILY: "Trebuchet MS", "Verdana","sans-serif"; 
  FONT-WEIGHT:  bold; 
  TEXT-DECORATION: none;
  FONT-SIZE: small;
  }
A:link, A:active, A:visited  {
  COLOR: #000000; 
  TEXT-DECORATION: underline;
  }
A:hover {
  COLOR: #990000; 
  TEXT-DECORATION: none;
  }

the difference is taht in the NN one the Main is relative and in the other one it is absolute or else i don't get the scroll bars in NN4

[ktown]

if i add this

<div id="Layer1" style="position:absolute; left:180px; top:110px; z-index:1; width: 505px; padding-right: 10px; border-right: 1px dotted #999999;" class="contnt">

instead of <div id="main"> THEN i can click my links but my scroll bar is missin in NN

its really quite unfortunate that i have to support this old browser

i need to have a position: relative in StylesNN.css for it have scroll bars

*sigh*

[hurricane.uk]

Absolute positioning takes elements out of the flow, so at different resolutions absolute positioned elements can overlap with relative ones. You could try giving a high z index to them.

[ktown]

but NN4 doesn't support z-index, and why does it lose the scroll bar with absolute position?

[hurricane.uk]

Place the absolute elements inside containers with position relative, that'll place them back in the flow and reorder the content accordingly without overlapping.

[ktown]

StylesNN.css
#mainrel {
  position: relative;
  left:175px; 
  top:115px; 
  width: 512px; }
#main {
  position:absolute; 
  }
 
@import Styles.css
#mainrel {
  position: relative;
  z-index: 99;
  left: 0;
  top: 0;
  }
#main {
  position:absolute; 
  left:175px; 
  top: 115px; 
  z-index:100; 
  width: 512px;
  padding-right: 10px;
  border-right: 1px dotted #999999;
  }
* html #main {
  width: 523px;
  w\idth: 512px;
  }

HTML

<div id="mainrel">
<div id="main">

 
Stuff here
 
</div>
</div>

= clicks
= scroll bars
=

thanks