317299 - <a> tag repeated in source code if containing multiple <div> tags

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Pierre-Michel]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

We're trying to list items in a product list for an online shop. Under each item we put a box including the price (in a blue box) of the item and the keyword "Acheter" (witch means buy in french). This box is composed of a link wich includes of 4 division floated left wich are defining the layout of the box and br clearing the float.

The problem is that sometime, when we display the page some of those boxes are repeating themselves 7 times instead of one.

Reproducible: Sometimes

Steps to Reproduce:
1. Put multiple <div> tags into a <a> tag Like this :
<a href="javascript:addToCart(<%=PRODID%>,0);" title="Acheter : <%=PRODNAME%>" class="buy">
<div style="float:left"><img src="/images/panier_left_blue.gif" width="6" height="21"></div>
<div class="price" style="background-color: #19215D;"><strong><%=PRODPRICE%> $</strong></div>
<div style="float:left"><img src="/images/panier_right_blue.gif" width="6" height="21"></div>
<div class="buytxt"><strong>Acheter</strong></div><br style="clear: both">
</a>
2. Repeat this code multiples of times in the page (like items in a product list)
3. Refresh the page number of times and browse through your pages.
Actual Results:  
Sometimes the <a> tag is repeating itself so the link appear multiple of times.

Source code showed by Firefox without any selection (wich is what I should see) :

<a href="javascript:addToCart(10108,0);" title="Acheter : Pedi-Perch Living World, moyen, long. 20" class="buy">
<div style="float:left"><img src="/images/panier_left_blue.gif" width="6" height="21"></div>
<div class="price" style="background-color: #19215D;"><strong>9.99 $</strong></div>
<div style="float:left"><img src="/images/panier_right_blue.gif" width="6" height="21"></div>
<div class="buytxt"><strong>Acheter</strong></div><br style="clear: both">
</a>

Source code of the same Item as above if I select it and click on "source code of selection" (wich is what I actualy see and isn't the good layout) :

<a href="javascript:addToCart(10108,0);" title="Acheter : Pedi-Perch Living World, moyen, long. 20" class="buy"> </a>
<div style="float: left;"><a href="javascript:addToCart(10108,0);" title="Acheter : Pedi-Perch Living World, moyen, long. 20" class="buy"><img src="/images/panier_left_blue.gif" height="21" width="6"></a></div>
<a href="javascript:addToCart(10108,0);" title="Acheter : Pedi-Perch Living World, moyen, long. 20" class="buy"> </a>
<div class="price" style="background-color: rgb(25, 33, 93);"><a href="javascript:addToCart(10108,0);" title="Acheter : Pedi-Perch Living World, moyen, long. 20" class="buy"><strong>9.99 $</strong></a></div>
<a href="javascript:addToCart(10108,0);" title="Acheter : Pedi-Perch Living World, moyen, long. 20" class="buy"> </a>
<div style="float: left;"><a href="javascript:addToCart(10108,0);" title="Acheter : Pedi-Perch Living World, moyen, long. 20" class="buy"><img src="/images/panier_right_blue.gif" height="21" width="6"></a></div>
<a href="javascript:addToCart(10108,0);" title="Acheter : Pedi-Perch Living World, moyen, long. 20" class="buy"> </a>
<div class="buytxt"><a href="javascript:addToCart(10108,0);" title="Acheter : Pedi-Perch Living World, moyen, long. 20" class="buy"><strong>Acheter</strong></a></div>
<a href="javascript:addToCart(10108,0);" title="Acheter : Pedi-Perch Living World, moyen, long. 20" class="buy"><br style="clear: both;"> </a>

Expected Results:  
I should see the link just one time and have the following source code:

<a href="javascript:addToCart(10108,0);" title="Acheter : Pedi-Perch Living World, moyen, long. 20" class="buy">
<div style="float:left"><img src="/images/panier_left_blue.gif" width="6" height="21"></div>
<div class="price" style="background-color: #19215D;"><strong>9.99 $</strong></div>
<div style="float:left"><img src="/images/panier_right_blue.gif" width="6" height="21"></div>
<div class="buytxt"><strong>Acheter</strong></div><br style="clear: both">
</a>

I'm using the default FifreFox theme.

Comment 1

[Martijn Wargers (dead)]

View selection source isn't the source code of that part of the page, but the selection of the dom of that part of the page.

In html, you're normally not allowed to put<div>'s inside <a> tags, and that's what Mozilla is trying to fix.

Comment 2

[Pierre-Michel]

Ok, I see. 

Considering that it's the easiest work around I found to do what I wanted to do, I'll have to let it that way. It's sad for firefox users that will be visiting this page because IE, Safari and even Opera seems to tolerate it.

I don't care if it's not supposed to be allowed, I'll continue to use this work around anyway. 

Anyway I think it should allowed because I don't think there is any good reasons why it's not supported. I hope it will be allowed in the next html standards.

Comment 3

[Martijn Wargers (dead)]

Well, Firefox does tolerate it. Could you perhaps give an url where I can see the problem?
You should be able to solve this problem with css, I think.

Comment 4

[Pierre-Michel]

I did! I've replaced div's by span's.
Thanks for all!

Comment 5

[Martijn Wargers (dead)]

So I may close the bug, and mark it invalid?

Comment 6

[Pierre-Michel]

Yes why not!
But with div's it still dosen't work ...

Comment 7

[Martijn Wargers (dead)]

(In reply to comment #6)
> But with div's it still dosen't work ...
That's because div's are block-level elements and block-level elements aren't allowed inside <a> elements, iirc, only inline-level elements, like span's.
So that's when Mozilla starts to 'fix' the html into something that is allowed.