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!

This looks like a problem with your CSS. Please make sure the width you're giving to elements is appropriate. I've seen multiple issues related to CSS being rendered in an inconsistent way when you've not made clear to the browser what kind of layout you wish to use and leave it to the browser to "figure it out" for you. Make sure the layout, size and position of your elements are all specified. — Lior Cohen, Jul 07 '09 at 11:23
Validate. Validate. Validate. http://validator.w3.org/ You have machine detectable errors. — Quentin, Jul 07 '09 at 11:33
It happnes on all browser but not every time. Please browse the site and see the menu, it appears normal. — Sorin, Jul 07 '09 at 11:45
possible duplicate of [Is putting a div inside an anchor ever correct?](http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct) — blo0p3r, Jan 14 '15 at 17:29

score 19 · Accepted Answer · answered Jul 07 '09 at 11:30

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
 }

DisgruntledGoat · Answer 2 · 2009-07-07T20:37:33.690

13

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>

edited Jul 07 '09 at 20:37

answered Jul 07 '09 at 11:51

DisgruntledGoat

70,219
68
205
290

You are correct, block elements inside inline elements causes rendering errors as the browser will relocate the invalidly placed div to outside (just after) the anchor tag. This is what's causing the drawing "glitch". – Rahul Jul 07 '09 at 12:00
isn't – Sorin Jul 07 '09 at 18:23
1

Yes, if you set a `span` to `display:block` then the result is the same as a `div`. However, the spec says that any element that is naturally inline cannot contain naturally block elements. It does seem silly but I it's a compatibility reason - e.g. if stylesheets are turned off then the layout would break, moreso than normal. – DisgruntledGoat Jul 07 '09 at 20:40

div inside anchor

2 Answers2

Linked