treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

inactive links in FF 2

  • rebelbwb
    Permalink to comment #
    I am experiencing links that are supposed to be active and yet in FF2 they are inactive. Not sure about FF3. I am primarily referring to the links underneath each bag image on the front page

    http://v2.bags-4-less.com/

    Any ideas on what is amiss?

    They are active in IE 6 & 7

    Thanks in advance

    Here is the section of code in which these links are displayed

    <div id=\"bagContainer\">

    <div class=\"bagboxLeft\">

    <div class=\"bagboxA\"><img src=\"images/wine-bag-front.jpg\" alt=\"\" />
    <h3><a href=\"eco-friendly-wine-bags.php\">Wine Bags</a></h3>
    <a href=\"free-quote.php\"><img src=\"images/sm-order-now.png\" alt=\"\" /></a></div>

    <div class=\"bagboxB\"><img src=\"images/folding-bag-front.jpg\" alt=\"\" />
    <h3><a href=\"eco-friendly-folding-bags.php\">Folding Bags</a></h3>
    <a href=\"free-quote.php\"><img src=\"images/sm-order-now.png\" alt=\"\" /></a></div>

    </div>

    <div class=\"bagboxRight\">

    <div class=\"bagboxA\"><img src=\"images/paper-bag-front.jpg\" alt=\"\" />
    <h3><a href=\"eco-friendly-lunch-bags.php\">Lunch Bags</a></h3>
    <a href=\"free-quote.php\"><img src=\"images/sm-order-now.png\" alt=\"\" /></a></div>

    <div class=\"bagboxB\"><img src=\"images/tote-bag-front.jpg\" alt=\"\" />
    <h3><a href=\"eco-friendly-tote-and-grocery-bags.php\">Tote Bags</a></h3>
    <a href=\"free-quote.php\"><img src=\"images/sm-order-now.png\" alt=\"\" /></a></div>

    </div>
    </div>

    <div id=\"bagContainer\">

    <div class=\"bagboxLeft\">

    <div class=\"bagboxA\"><img src=\"images/cooler-bag-front.jpg\" alt=\"\" />
    <h3><a href=\"eco-friendly-cooler-bags.php\">Cooler Bags</a></h3>
    <a href=\"free-quote.php\"><img src=\"images/sm-order-now.png\" alt=\"\" /></a></div>

    <div class=\"bagboxB\"><img src=\"images/folding-bag-front.jpg\" alt=\"\" />
    <h3><a href=\"eco-friendly-zipper-bags.php\">Zipper Bags</a></h3>
    <a href=\"free-quote.php\"><img src=\"images/sm-order-now.png\" alt=\"\" /></a></div>

    </div>

    <div class=\"bagboxRight\">

    <div class=\"bagboxA\"><img src=\"images/paper-bag-front.jpg\" alt=\"\" />
    <h3><a href=\"eco-friendly-paper-bags.php\">Paper Bags</a></h3>

    <a href=\"free-quote.php\"><img src=\"images/sm-order-now.png\" alt=\"\" /></a></div>

    <div class=\"bagboxB\"><img src=\"images/plastic-bag-front.jpg\" alt=\"\" />
    <h3><a href=\"eco-friendly-plastic-bags.php\">Plastic Bags</a></h3>
    <a href=\"free-quote.php\"><img src=\"images/sm-order-now.png\" alt=\"\" /></a></div>

    </div>
    </div>


    Thanks very much
  • apostrophe
    Permalink to comment #
    I've been messing about with this for ages and what I found is that:
    If you remove your floats from div#bagContainer, div.bagboxLeft, div.bagboxRight, div.bagboxA and div.bagboxB then the links will work, although obviously it messes up your layout.

    I must admit I'm not 100% sure why this is but obviously you are going to have to rethink how to achieve your layout. If it were my site I would just have a div class of "bag" for each bag, all the same size, and float them up against each other.
Add a Comment