Question

My anchor tag is not responding (my mouse does not respond to the link as a link, for example) within the #contentAboutMe… through research I found that the z-index may affect this… However, I commented out anything with a z-index, and it doesn’t seem to be the issue.
Any ideas? I would appreciate any help. (anchors are working else where in my mark-up)

#logo {
    position: absolute;
    top: 50px;
    left: 20px;
    /*z-index: 50;*/
}
#mainHeader > h1 {
    font-size: 18px;
}
#wrapperAboutMe {
    position: absolute;
    width: 525px;
    left: 400px;
    top: 40px;
    /*z-index: 2;*/
}
#placeHolder {
    position: relative;
}
#topAboutMe {
    background-image: url(../images/aboutTopBackground.png);
    width: 525px;
    height: 47px;
}
#contentAboutMe {
    width: 525px;
    background-image: url(../images/aboutMainBackground.png);
}
#contentAboutMe p {
    padding: 0 40px 0 40px;
    text-align: justify;
}
.firstCharacter {
    display: block;
    float: left;
    color: #155763;
    font-size: 330%;
    line-height: .5em;
    padding-top: 10px;
    padding-right: 2px;
}
#bottomAboutMe {
    background-image: url(../images/aboutBottomBackground.png);
    width: 525px;
    height: 71px;
}
#aboutImage {
    width: 220px;
    height: 45px;
    background-image: url(../images/graphicAbout_03.png);
    background-repeat: no-repeat;
    float: left;
    padding: 30px 0 0 0;
    position: absolute;
    top: -25px;
    left: -100px;
}
#aboutImage span {
    display: none;
}
#aboutBackground {
    position: absolute;
    background-image: url(../images/graphicAboutBackground.png);
    width: 462px;
    height: 125px;
    left: -260px;
    top: -110px;
    z-index: 1;
}

HTML:

<article id="aboutMe">
    <div id="wrapperAboutMe">
      <div id="topAboutMe"> </div>
      <!--End topAboutMe-->

      <div id="contentAboutMe">
        <p><span class="firstCharacter">M</span>y content</p>
        <a href="includes/HappeResumeSept2012.pdf" target="_blank">View My Resume</a>
      </div>
      <!--End contentAboutMe-->

      <div id="bottomAboutMe"> </div>
      <!--End bottomAboutMe-->

      <div id="placeHolder">
        <h1 id="aboutImage"><span>About Me</span></h1>
        <div id="aboutBackground"></div>
        <!--End aboutBackground--> 
      </div>
      <!--End placeHolder--> 

    </div>
    <!--End wrapperAboutMe--> 

  </article>
  <!--End Article_aboutMe--> 

Answer 1

Your div with the id of aboutBackground, is over the top of your link, so when you try to click, it’s actually registering against that div, isntead of the link.

To fix this, change the #aboutBackground z-index to -1, so it will look like so:

#aboutBackground {
position: absolute;
background-image: url(../images/graphicAboutBackground.png);
width: 462px;
height: 125px;
left: -260px;
top: -110px;
z-index: -1; // this line edited
}

​