#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2005
    Posts
    628
    Rep Power
    147

    Links aren't clickable in Firefox


    Hello all. I have the following code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <title>My Site</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
          #base { 
            border-top: 1px solid #ffffff;
            border-bottom: 1px solid #ffffff;
            background: #c0c0c0;  } /* end #base */
          #main_block { 
            margin: auto;
            text-align: left;
            width: 955px; } /* end #main_block */
          #main_content, #main_content_2c, #main_content_3c { 
            background: #ffffff;
            border-left: 1px solid #575757;
            border-right: 1px solid #575757; } 
          #top_main_content { padding-top: 1em; }
          #top_main_content ul {
            float: left;
            padding: 0;
            margin: 0;
            list-style-type: none;
            border-top: 1px solid #f1f1f1; } /* end #top_main_content ul */
          #top_main_content ul li {
            text-align: right;
            border-bottom: 1px solid #f1f1f1; } /* end #top_main_content ul li */
          #top_main_content ul li a { 
            line-height: 26px;
            display: block;
            color: #686868;
            width: 266px; } /* end #top_main_content ul li a */
          .indent { margin-right: 1.5em; }
          #top_main_content #rotating { 
            z-index: 0;
            float: right;
            width: 687px;
            height: 242px;
            border-bottom: 1px solid #f1f1f1;
            border-top: 1px solid #f1f1f1; } /* end #top_main_content img */
          #top_main_content #rotating p, #top_main_content #rotating h1 { margin: 2em 0 0 2em; }
          #sidemenu12,
          #sidemenu11,
          #sidemenu13,
          #sidemenu14,
          #sidemenu15,
          #sidemenu16, 
          #sidemenu17,
          #sidemenu18, 
          #sidemenu22 { 
            width: 687px;
            height: 242px;
            font-weight: bold;
            overflow: hidden;
            position: absolute;
            visibility: visible; } 
        </style>
      </head>
      <body>
        <div id="base">
          <div id="main_block">
            <div id="main_content">
              <div id="top_main_content">
                <ul>
                  <li><a id="sidemenu11_link" href="#"><span class="indent">Link 1</span></a></li>
                  <li><a id="sidemenu22_link" href="#"><span class="indent">Link 2</span></a></li>
                  <li><a id="sidemenu12_link" href="#"><span class="indent">Link 3</span></a></li>
                  <li><a id="sidemenu13_link" href="#"><span class="indent">Link 4</span></a></li>
                  <li><a id="sidemenu14_link" href="#"><span class="indent">Link 5</span></a></li>
                  <li><a id="sidemenu15_link" href="#"><span class="indent">Link 6</span></a></li>
                  <li><a id="sidemenu16_link" href="#"><span class="indent">Link 7</span></a></li>
                  <li><a id="sidemenu18_link" href="#"><span class="indent">Link 8</span></a></li>
                  <li><a id="sidemenu17_link" href="#"><span class="indent">Link 9</span></a></li>
                </ul>
                <div id="rotating">
                  <div id="default_div"><p>Default</p></div>
                  <div id="sidemenu11"><p>Section 1</p></div>
                  <div id="sidemenu12"><p>Section 2</p></div>
                  <div id="sidemenu13"><p>Section 3</p></div>
                  <div id="sidemenu14"><p>Section 4</p></div>
                  <div id="sidemenu15"><p>Section 5</p></div>
                  <div id="sidemenu16"><p>Section 6</p></div>
                  <div id="sidemenu17">
                      <p>Section 7 - A<br />
                      <a href="#">Link 1</a></p>
                      <p><a href="#">Link 2</a></p>
                      <p>Section 7 - B<br />
                      <a href="#">Link 1</a><br />
                      <a href="#">Link 2</a><br />
                      <a href="#">Link 3</a></p>
                  </div>
                  <div id="sidemenu18"><p>Section 8</p></div>
                  <div id="sidemenu22"><p>Section 9</p></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>
    Which if you look at it in a browser looks rather messy but I have javascript that hides and shows things. But my question is why aren't the links clickable in Firefox. They are in IE7, IE6, and Opera but not Firefox or Safari. I know that if I remove position: absolute from the last set of styles that it will work but then everything isn't stacked on top of each other.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    They aren't clickable because you have all of the layers placed on top of each other and the active one isn't on top, so you can see the active layer but can't click on it.

    Comments on this post

    • lokisapocalypse agrees : That would do it. If I use JavaScript to change the z-index property at the same time, the links work. Thanks!
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo