We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Firefox renders html in a wrong way some time

  • 4 replies
  • 6 have this problem
  • 1 view
  • Last reply by falkon303

junjeong
junjeong
more options

I have a list of items to display in a page.

The following html displays an item.

<a href="#" class="offerModule"> 

 <div class="offerDetailsWrap">
   <img src="mymb.jpg" alt="" />
   <div class="offerDetails">
     <img src="logobox.jpg" alt="" />
     <div class="offerText">
       <p>text content</p>
     </div>
   </div>
 </div>

</a>


But some time, Firefox renders this like this: (I checked this in Firebug) 


 <a href="#" class="offerModule">
 </a>
 <div class="offerDetailsWrap">
   <a href="#" class="offerModule">
     <img src="mymb.jpg" alt="" />
     <div class="offerDetails">
       <img src="logobox.jpg" alt="" />
       <div class="offerText">
         <p>text content</p>
       </div>
     </div>
   </a>
 </div>


<a><div>...</div></a> ====> <a></a><div><a>...</a></div>


So only one item out of 8 items is broken in the page. If I refresh the page when I have this problem, it displays very well.

I tested this in IE and Chrome, there's no problem in the browsers.

Thanks,

Jun

I have a list of items to display in a page. The following html displays an item. &lt;a href="#" class="offerModule"&gt; &lt;div class="offerDetailsWrap"&gt; &lt;img src="mymb.jpg" alt="" /&gt; &lt;div class="offerDetails"&gt; &lt;img src="logobox.jpg" alt="" /&gt; &lt;div class="offerText"&gt; &lt;p&gt;text content&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; But some time, Firefox renders this like this: (I checked this in Firebug) &lt;a href="#" class="offerModule"&gt; &lt;/a&gt; &lt;div class="offerDetailsWrap"&gt; &lt;a href="#" class="offerModule"&gt; &lt;img src="mymb.jpg" alt="" /&gt; &lt;div class="offerDetails"&gt; &lt;img src="logobox.jpg" alt="" /&gt; &lt;div class="offerText"&gt; &lt;p&gt;text content&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;a&gt;&lt;div&gt;...&lt;/div&gt;&lt;/a&gt; ====> &lt;a&gt;&lt;/a&gt;&lt;div&gt;&lt;a&gt;...&lt;/a&gt;&lt;/div&gt; So only one item out of 8 items is broken in the page. If I refresh the page when I have this problem, it displays very well. I tested this in IE and Chrome, there's no problem in the browsers. Thanks, Jun

Modified by junjeong

All Replies (4)

junjeong
junjeong Question owner
more options

I attached the screen shot.

falkon303
falkon303
more options

I am having the exact same problem with my soup website (http://www.oopsoup.com) on firefox 3.6. Chrome displays it fine, as does Safari, but firefox messes it up very badly.

I don't see any scripting errors on my side, and there's some times it randomly wraps elements in hyperlinks.

falkon303
falkon303
more options

It seems we are both styling a tags using the block attribute. This could be part of the problem/solution.

falkon303
falkon303
more options

I have replace my "a" element with a "div" containing a onclick="document.location.href = 'http://www.whatever.com';", and inside of the element I also have the image hyperlinked to help SEO/crawling aspects. Everything seems to be fine/not garbled so far, so you may want to try this solution yourself.

Modified by falkon303