HTML: div in link problem ?

Question

This not happened 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 in 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 strange, duplicates appear on the page with no reason, text distributed between different link, 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 don't want javascript links !

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>