Anchor is not clickable, but only in Firefox

Hi, I've never experienced this before, and I'm hoping someone can help me.

I have a few nested divs, and on the inner one, where the text is, I've assigned a style to the anchor tag and hover condition... well, it works perfectly in IE and is ignored, and in fact my anchor because not clickable at all, in Firefox!?

If someone can help, I'd be most obliged.  I am sure this must have something to do with the CSS because it only became a problem when I added the styling.  I've moved the definition around between #stretch and #stretchtext to no avail.

CSS code is:

#stretch {
      position: absolute;
      top: 83px;
      left: 0px;
      height: auto;
      overflow: hidden;
      width: 780px;
}

#stretchbg {
      top: 83px;
      margin: 0px auto;
      background-image: URL('images/sub_bg.gif');
      background-repeat: repeat-y;
}

#stretchtext {
      margin-left: 20px;
      margin-right: 20px;
      height: auto;
      border: 1px dotted white;
}

#stretch a, a:visited, a:link {
      text-decoration: none;
}

#stretch a:hover {
      text-decoration: underline;
      color: #2C70B1;
}


webpage code is:

<div id="content">
      <div id="banner"></div>
      <div id="stretch">
            <div id="stretchbg">
                  <div id="stretchtext"><a href="AustinTestimonial.php"><img src="contentimages/Austin.gif" border="0" width="204" height="58" alt=""> Austin Hospital</a>
                        <p><a href="MonashTestimonial.php"><img src="contentimages/Monash.gif" border="0" width="143" height="33" alt=""> Monash Medical Centre</a></p>
                        <p>&nbsp;</p>
                  </div>
            </div>
            <div id="footer"></div>
      </div>
      
</div>

Thanks heaps!
hmaloneyAsked:
Who is Participating?
 
JohnModigConnect With a Mentor Commented:
I've experienced a similar problem before - then the problem was overlapping div's. Make sure no div is on top of (or overlapping) the div containing the anchor. Even though the top div might be empty or transparent - if it is on top of the anchor, then the anchor won't be clickable in Firefox, but will work in IE.

How to look for the problem:
Try assigning a background-color and border to ALL your divs, just to check the layout. Whenever you are sure everything is ok, simply remove the background-color and border. Since I dont have all your CSS its hard for me to locate if this is the problem. It might be the footer div?

John
0
 
JohnModigConnect With a Mentor Commented:
...or the banner div?

Also, another solution to the same problem is that you can try to set the z-index on the div containing the anchor to a value higher than the surrounding divs, like so:

#stretchtext {
     z-index: 10;
}
0
 
hmaloneyAuthor Commented:
Thanks for both your help.

It's started working again now.  :-S  but at least I know where to look next time it happens.

Cheers,
Heather
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.