Firefox 3.5 duplicating code

Question

I have an issue that seems to be appearing in Firefox 3.5.2. When i view the page it looks find but then a click on one of the links on the page then return to the page either using the back button or clicking a link on the following page that returns to the first page. (if that makes any sense).

I use firebug when i return to the first page and there is extra html code. I am wondering if it's possible that firefox is added this somewhere or if i should be looking at my php code.

Sadly this is for a company project so i can't publish the code here. I will try to anonymise the code but i was hoping that if someone else had the same issue they could shed some light on the issue.

Note: the extra code disapears when i refresh the page. it only happens when coming from another page. could this be a catch issue with firefox?

UPDATE: I discovered that i was loading jQuery in the header. not sure what this was doing but now the page 'freaks out' no matter what.

This is what the code should be:

<div class="extranetFlag">
<a href="?c=4" style="text-decoration: none;">
<div class="extranetFlagFrame"><img border="0" alt="Bangladesh" src="/resources/flags/Bangladesh.png"/></div>
<!--[if lte IE 7]><br /><![endif]-->
<div class="caption">Bangladesh</div>
</a>
</div>

After mutation:

<div class="extranetFlag">
<a href="?c=3" style="text-decoration: none;">
</a><div class="extranetFlagFrame"><a href="?c=3" style="text-decoration: none;"><img border="0" alt="Belgium" src="/resources/flags/Belgium.png"/></a></div>
<a href="?c=3" style="text-decoration: none;">  <!--[if lte IE 7]><br /><![endif]-->
</a><div class="caption"><a href="?c=3" style="text-decoration: none;">Belgium</a>    </div>
<a href="?c=3" style="text-decoration: none;">  </a>
</div>

I checked the heading using the net panel in Firebug and this is not the coding being sent to the browser.

Answer 1

You can use Firebug's NetPanel (or Fiddler) to see what's going over the wire to eliminate that as a cause. You should look to see what event handlers fire on page load, and see if those are problematic.

Answer 2

I don't know the answer, but here are some ideas to help you diagnose the problem...

It looks like a language or country code is changing from Bangladesh to Belgium, which makes me think the page is being re-fetched from the server with different context when you go back. Maybe there's a difference in a cookie? Or session state isn't being tracked right, or visiting the second page changes the session state, which affects the re-fetch of the first page?

Try looking at the server logs to see if the server is sending the page on 'back', and see if there is any change to the request's URL, post parameters, cookies, etc. the second time (you may need to temporarily add some verbose logging on the server).

Also, check whether it happens in a browser other than Firefox.

Answer 3

When I paste your exact code above into a test page I don't see the duplication in Firefox. However if I change the last tag from this:

</a>

To this (incorrect closing tag):

<a/>

I see exactly the same duplication you're seeing on your real page. Are you sure the markup on your real page is correct?

Answer 4

I think the problem was having a div (block element) inside an anchor (inline). Firefox seemed to be closing the anchor tag as soon as it seems to div, thus causing issues.

It's quite ugly but I ended up using css to target the extra elements that Firefox created so it looks the same (read: close enough) in all browsers.

This was a project for my work and I have now moved on to other things. if I were to do things over again I would avoid this like the plague.