Question

I have this weird problem.

When i wrap a anchor tag around a div, the html markup completely changes.. cleared cache and everything.

Its about the anchor with the class outgoing link

Html in the code editor (correct code):

<a class="outgoing-link" href="#">
    <div id="content-element">
        <div class="top-info">
            <span class="title-provider">Vodafone</span>
            <img src="phone-placeholder.png" 
                 alt="placeholder" 
                 width="58px" 
                 height="50px"/>
            <div class="bg-circle"></div>
            <span class="dur-discount">1e 3 maand</span>
            <span class="price-discount">&#8364; 16,50</span>
            <span class="dur-normal">Daarna</span>
            <span class="price-normal">&#8364; 20,00</span>
        </div>
        <a href="#" title=""><h3>iPhone 4GS abonnement</h3></a>
        <p><span>100</span> min & sms <span>500</span> mb</p>
        <p><span>2 jr</span>telefoon abonnement</p>
        <p>Prijs telefoon: <span>Gratis</span></p>
        <div class="hover-extra-info">
             <p>Aansluitkosten: <span>&#8364; 24,95</span></p>
             <p>Vodafone abonnement</p>
             <p>aanbieder: Student Mobiel</p>
             <p>Totale kosten over 2 jaar</p>
             <p>&#8364; 547,22</p>
        </div>
    </div><!-- end content-element-->   
</a>

Code in the browser:

<a class="outgoing-link" href="#"></a>
    <div id="content-element">
        <a class="outgoing-link" href="#">
            <div class="top-info">
                <span class="title-provider">Vodafone</span>
                <img src="phone-placeholder.png" 
                     alt="placeholder" 
                     width="58px" 
                     height="50px"/>
                 <div class="bg-circle"></div>
                 <span class="dur-discount">1e 3 maand</span>
                 <span class="price-discount">&#8364; 16,50</span>
                 <span class="dur-normal">Daarna</span>
                 <span class="price-normal">&#8364; 20,00</span>
             </div>
         </a>
         <a href="#" title=""><h3>iPhone 4GS abonnement</h3></a>
         <p><span>100</span> min & sms <span>500</span> mb</p>
         <p><span>2 jr</span>telefoon abonnement</p>
         <p>Prijs telefoon: <span>Gratis</span></p>
         <div class="hover-extra-info">
         <p>Aansluitkosten: <span>&#8364; 24,95</span></p>
         <p>Vodafone abonnement</p>
         <p>aanbieder: Student Mobiel</p>
         <p>Totale kosten over 2 jaar</p>
         <p>&#8364; 547,22</p>
     </div>
</div><!-- end content-element-->   

It adds another link and puts them at the wrong places.

Any ideas as to what’s going on? Or am i just missing something.

Any help would be appreciated 🙂

Answer 1

i think its because nested anchor tags are illegal

see: http://www.w3.org/TR/html401/struct/links.html#h-12.2.2

it should be easy to do without the nested anchor tag while keeping the functionality the same.