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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navigation Bar-Related Funky Issue

    Hello,

    I have recently designed this website: www.forensicoutreach.com

    I am finding that on Safari, the colored boxes that make up the navigation bar are completely clickable, meaning that you can click anywhere on the box and it takes you to the appropriate link.

    However on the majority of browsers, as in Firefox and IE6/7/8/9, only the text must be clicked to access the link.

    Anyone know how to fix this. As always, CSS/HTML viewable through View Source.

    Many thanks for your help in advance and happy coding as always =)

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Not sure why you have the empty a tags but i think your nav HTML should be:

    Code:
    <ul>
            <li class="home"><a href="index.php">home</a></li>
            <li class="about"><a href="about.html">about</a></li>
            <li class="classes"><a href="classes.html">classes</a></li>
            <li class="shop"><a href="shop.html">shop</a></li>
            <li class="fogo"><a href="fogo.html">fogo</a></li>
            <li class="teachers"><a href="members.php">teachers</a></li>
    </ul>
    then:


    Code:
    .navigation li {
         padding: 0;
    }
    
    .navigation a {
        color: #333333;
        display: block;
        font: 1.25em/40px Arial,Helvetica,sans-serif;
        padding: 10px 0;
        text-decoration: none;
    }
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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