SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok - so this might be my problem the i guess... i have a

    Code:
    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 ..

    Code:
    <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???

  4. #4
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  5. #5
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok

    Code:
    /* 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

  6. #6
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if i add this
    Code:
    <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*

  7. #7
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but NN4 doesn't support z-index, and why does it lose the scroll bar with absolute position?

  9. #9
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Place the absolute elements inside containers with position relative, that'll place them back in the flow and reorder the content accordingly without overlapping.

  10. #10
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    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

    Code:
    <div id="mainrel">
    <div id="main">
    
     
    Stuff here
     
    </div>
    </div>
    = clicks
    = scroll bars
    =

    thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •