div inside anchor

Question

This doesn't happen all the time. A bug is not a bug if cannot be reproduced!

First, I thought this was a mistake of my young programming skills but same error appears in my two sites, apparently under the same circumstances.

<a style="display:block;" href="link">
 <div>text1</div>
 <div>text2</div>
</a>

Sometimes, while browsing, links with divs inside them render strangely, duplicate elements appear on the page with no reason, text gets distributed between different links, a real mess.

Real screenshots:

http://cupacupelor.ro/img/help.jpg
http://www.carbroker.ro/img/help.jpg

Anyone faced this problem? Is there a solution? I'm not interested of fixes involving JavaScript!

Answer 1

I guess your divs in links cause inconsistency in some browsers (may be your css playing here).

"Semantics", valid markup are some buzz words.

So why would you want DIVs in an <A> tag. You can try someting like this

<a href="#">
       <span class="divstyle">Text 1</span>
       <span class="divstyle">Text 2</span>
</a>

then in CSS

.divstyle { 
    display: block; //and other styles etc
 }

Answer 2

Check your page in a HTML validator. I'm 90% sure that you can't have a <div> element inside inline elements like <a>. Even though you've set the link to display:block, it's still not allowed and the browsers may be spitting their dummy.

What you can do is use spans instead, setting them to block:

<style type="text/css">
  .link, .link span { display: block; }
</style>
<a class="link" href="example.com">
 <span>text1</span>
 <span>text2</span>
</a>