strange behaviour of a p element

Question

Hi what's wrong with this Fiddle

The problem is in these lines:

<p>
    <span class="is_not_active">
        <div class="arrow"></div>
        <div class="rectangle"></div>
    </span>                 
</p>

If take away the p element I can see the red arrow, otherwise the arrow is invisibile. Can you tell me something. Try yourself with the fiddle. Thanks

If you switch the p to a div you can see the arrow. – Andy G May 24 '14 at 15:29 — Andy G, May 24 '14 at 15:29

score 2 · Accepted Answer · answered May 24 '14 at 15:29

You can't put a <div> inside a <p> and get consistent results from various browsers. Provide the browsers with valid HTML and they would behave uniformly.

You can put <div> inside a <div> though so if you replace your <p> with <div class="name"> and style it appropriately, you can get what you want.

<div>
    <span class="is_not_active">
        <div class="arrow"></div>
        <div class="rectangle"></div>
    </span>                 
</div>

This would work. I modified your fiddle and tested.

score 0 · Answer 2 · answered May 24 '14 at 15:31

0

<P> tags aren't allowed to contain anything but inline elements according to this page.

<DIV>s are block element.

answered May 24 '14 at 15:31

Circle B

1,616
3
26
45

strange behaviour of a p element

2 Answers2