Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Sydney
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Netscape Problem with navigation lists

    See : http://www.drawtheline.com.au/trial/
    I am having prblems with correct css to get the middle navigation to work.
    In Netscape:
    1. Buttons disappear when rollover
    2. Extra padding in "What we do" and Our Services
    3. I want the Home button (style class current ) purple background to fill full depth of bar? (also problem in safari?)

    Can anyone help, please?

    Do I need special hack?

    Below is specific css:

    #mid-nav { font-size: 90%; background-color: #a1a6a6; margin: 0; padding: 0 0 0 9px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
    #mid-nav ul { background-color: #a1a6a6; width: auto; height: 17px; overflow: hidden; margin: 0; padding: 0; list-style-type: none; }
    #mid-nav li { text-align: center; height: auto; overflow: hidden; float: left; margin: 0 0 0; padding: 0; }
    #mid-nav a { color: #fff; text-decoration: none; text-align: center; width: 129px; height: 17px; overflow: hidden; padding-top: 0.2em; border-right: 1px solid #fff; display: block; }
    #mid-nav a:visited { color: #e3e2e2; text-decoration: none; }
    #mid-nav a:active, #mid-nav li a:hover { color: #fff; font-weight: 500; background-color: #531980; text-decoration: none; }
    .current { color: #bebebe; font-weight: 400; background-color: #531980; background-position: 0 bottom; text-decoration: none; text-align: center; width: 129px; height: 17px; overflow: hidden; padding-top: 0.2em; border-right: 1px solid #fff; display: block; }

  • #2
    Senior Coder
    Join Date
    Aug 2005
    Posts
    1,119
    Thanks
    2
    Thanked 1 Time in 1 Post
    Change the mid-nav part of your code to this:


    Code:
    #mid-nav { font-size: 90%; background-color: #a1a6a6; margin: 0; padding: 0 0 0 9px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
    #mid-nav ul { background-color: #a1a6a6; width: auto; height: 17px; overflow: hidden; margin: 0; padding: 0; list-style-type: none; }
    #mid-nav li { text-align: center; height: auto; overflow: hidden; float: left; margin: 0 0 0; padding: 0; text-align: center; width: 129px; height: 17px; overflow: hidden; padding-top: 0.2em; border-right: 1px solid #fff; display: block;}
    #mid-nav a { color: #fff; text-decoration: none;}
    #mid-nav a:visited { color: #e3e2e2; text-decoration: none; }
    #mid-nav li:hover {background-color: #531980;}
    #mid-nav a:active, #mid-nav li a:hover { color: #fff; font-weight: 500; background-color: #531980; text-decoration: none; }
    .current { color: #bebebe; font-weight: 400; background-color: #531980; background-position: 0 bottom; text-decoration: none; text-align: center; width: 129px; height: 17px; overflow: hidden; padding-top: 0.2em; border-right: 1px solid #fff; display: block; }
    That won't work in old version of IE but I will try to come up with a fix for that in a few. This should work for all standards compliant browsers though.

  • #3
    Senior Coder
    Join Date
    Aug 2005
    Posts
    1,119
    Thanks
    2
    Thanked 1 Time in 1 Post
    Okay, this should work in past IE versions. There is a little more editing to your code, but it should be better in the long run.

    First of all, change your html. For your current tag, wrap it in <a> tags as well.

    eg.
    Code:
    <li class="current"><a>HOME</a></li>
    <li><a href="index.html">WHO ARE WE</a></li>
    <li><a href="index.html">WHAT WE DO</a></li>
    <li><a href="index.html">OUR SERVICES</a></li>
    And for the CSS, move your #mid-nav below #pict-band

    and change your #mid-nav to what I have following.

    So it should be:

    Code:
    #pict-band { background-color: #a1a6a6; background-image: url(../images/office5.jpg); background-repeat: no-repeat; background-position: right center; width: 100%; height: 160px; }
    
    #mid-nav {background-color: #a1a6a6; }
    #mid-nav ul {list-style-type: none; background-color: #a1a6a6; border-top: 0px solid #fff; border-bottom: 1px solid #fff;}
    #mid-nav li {float: left;}
    #mid-nav a {color: #ffffff; text-decoration: none; text-align: center; width: 129px; height: 17px; padding-top: 0.2em; border-right: 1px solid #fff; display: block;}
    #mid-nav a:hover, .current {color: #ffffff; background-color: #531980;}
    And that should do it, also with about 50% of the code you used.

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Sydney
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear thesavior
    Thankyou for your wonderful help
    Very much appreciated
    cheers Rob


  •  

    Posting Permissions

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