SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Entire link not clickable in Safari

    Hi -

    I'm having problems with Safari and a list styled to be a menu. In Safari, you can only click when the mouse is floated just at the bottom of the list item. If the mouse is anywhere else in the <li>, it won't link. The page is here: www.modern8films.com/newsite.

    Here's the relevant HTML
    HTML Code:
    <div id="indexNav">
      <ul>
        <li id="t-films"><a href="../newsite/films.html">films</a></li>
        <li id="t-about"><a href="../newsite/about.html">about</a></li>
        <li id="t-accolades"><a href="../newsite/accolades.html">accolades</a></li>
        <li id="t-packages"><a href="../newsite/packages.html">packages</a></li>
        <li id="t-contact"><a href="../newsite/contactus.html">contact us</a></li>
        <li class="liLast"><a href="http://modern8films.blogspot.com/">blog</a></li>
      </ul>
    </div><!-- end of indexNav -->
    Here's the relevant CSS:
    Code:
    #indexNav ul{
    	margin-top: 10px;
    	list-style: none;
    	float: left;
    	width: 800px;
    }
    
    #indexNav li{
    	float: left;
    	width: 125px;
    	border: 1px solid #fff;
    	margin-left: 5px;	
    	display:block;
    }
    
    #indexNav li a{
    	color: #fff;
    	font-size: 150%;
    	text-decoration: none;
    	white-space: nowrap;
    	text-align: center;
    	display: block;
    	padding: 10px 0 10px 0;
    }
    
    #indexNav li.liFirst{
    	margin-left: 0;
    }
    
    #indexNav li a:hover{
    	background-color: #600;
    }
    Thanking you in advance! I'm really lost on this one.

    Chels

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The H1 in the content div is overflowed and in Safari it partly covers the indexNav, and there are several aspects to this.

    The simple fix is to lower the padding length on the h1 so it fits in the parent, and not overflow.

    It first puzzled me a little it covered on top of the indexNav, but if you apply overflow: hidden to the indexNav div it will enclose the floats and they are clickable. As now they are just overflowing and apparently the nested stacking level is not with it. That is what puzzled me.

    Now you have optional solutions; decrease the h1 padding, hide the content overflow, clear indexNav using overflow.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I added the overflow:hidden rule and that worked. It was weird because when I applied a bg to the content div, it didn't cover the #indexNav. Then I realized (you might have pointed this out) but that I hadn't closed the #content.

    Thanks for the help. I really appreciate your expertise.

    Chels

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cewilcox
    ...
    Then I realized (you might have pointed this out) but that I hadn't closed the #content.
    ...
    I probably missed that.

    IIRC the overflow was because the 500px top padded background holding H1 was wrapped by the only 450px height content div. Below was the indexNav. If the content closing tag was missing, that could explain the stacking confusion.

    Thanks for the feedback!
    Happy ADD/ADHD with Asperger's


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
  •