Question

I’ve started to build a site for a customer http://www.ifixboilers.com. It is a simple form based site, there are three options, when someone clicks on one of the options I use JS to change the CSS position of one of the forms. Once the form has appeared there are various parts of the form to fill out, BUT if they wish to return to the home page they can click the ‘Return’ button which uses JS to change the CSS to hide to form again, allowing them to select a different form or re-read the main page.

The problem lies with FireFox — when they click the return button, none of the front page is clickable. It’s like the form is still there but not visible. It only becomes visible when I press Ctrl+F5 a couple of times.

In all the other browsers this is not an issue? I have searched high and low reading many Stack Overflow posts about cache clearing — I am open to any suggestions.

Answer 1

The only way to get my JS to work properly was to change the <a> tags to <input type="button">, and then use css to style them.

The problem was with this

<ul>
<li id="fix"><a href="#" onclick="showF1();">fix</a></li><!--fixForm.html-->
<li id="serv"><a href="#" onclick="showF2();">serv</a></li><!--serviceForm.html-->
<li id="cont"><a href="#" onclick="showF3();">cu</a></li><!--contactUs.html-->
</ul>

FireFox treated the “#” as a page anchor and changed the url to http://www.ifixboilers.com/#, so changing the anchors to buttons solved my problem.

<div id="buttons">
<input type="button" name="fix" id="fix" onclick="showF1();" /><!--fixForm.html-->
<input type="button" name="serv" id="serv" onclick="showF2();" /><!--serviceForm.html-->
<input type="button" name="cont" id="cont" onclick="showF3();" /><!--contactUs.html-->
</div>