Link within a link makes collection display like inception

Hey guys! Long time reader, first time writer. Lol. So for some reason that I can't seem to understand, there's a glitch in the matrix everytime I try to display an anchor tag within another anchor tag while looping through a collection. I can seemingly put the anchor tag anywhere within the parent anchor tag (even as an empty link tag) and it throws out some strange html. How can I make it display the desired HTML output?

example template:

{{ collection:team_members limit="3" }}
  {{ entries }}
     <div class="col-12 col-md-4">
       <a href="{{ url }}" class="team-wrapper">
         <img class="lazy" src="{{ profile_photo }}" alt="">
         <div class="info-box">
            <h3>{{ title }}</h3>
            <p class="position">{{ job_title }}</p>
            <p class="small-spacer-border"><a href="mailto:{{ email }}">{{ email }}</a></p>

          </div>
        </a>
      </div>
    {{ /entries }}
  {{ /collection:team_members }}

and resulting output of code...

<div class="col-12 col-md-4">
  <a href="/about/team-member-1" class="team-wrapper">
    <img class="lazy loaded" src="/assets/staff/team-member-1.jpg" alt="" loading="lazy" data-was-processed="true">
  </a>
  <div class="info-box">
    <a href="/about/team-member-1" class="team-wrapper">
      <h3>Team Member 1</h3>
      <p class="position">Partner</p>
    </a>
    <p class="small-spacer-border"><a href="/about/team-member-1" class="team-wrapper"></a><a href="mailto:[email protected]">[email protected]</a></p>

  </div>

</div>

Which seems to add a bunch of unnecessary repeated /about anchor tags. If I just leave that inner anchor tag as a common paragraph element, it displays as expected based on the template code. What I am trying to accomplish is...

<div class="col-12 col-md-4">
  <a href="/about/team-member-1" class="team-wrapper">
    <img class="lazy loaded" src="/assets/staff/team-member-1.jpg" alt="" loading="lazy" data-was-processed="true">
    <div class="info-box">
      <h3>Team Member 1</h3>
      <p class="position">Partner</p>
      <p class="small-spacer-border"><a href="mailto:[email protected]">[email protected]</a></p>

    </div>
  </a>

</div>

Thank you in advance for any sanity saving help!!

>>>>>>> Unanswered <<<<<<<
0 Replies
1 Follower