My website works OK in IE9, Safari, Opera and Chrome but Firefox objects to my Contacts page. The contact form position is wrong and the navigation does not work for the Contacts page. The other pages work ok. Both HTML and CSS validate okClick Here
From what I see on FF, your div element with ID 'content' has left value of -245px in the CSS. Where did it come from?
The table element id 'table1' has top as -500px also. As a result, your form table is hanging up there and cover the navigation link (which means you can't click on the navigation link). You could always force the z-index of navigation to be high value, so that it is always on top of any elements.
When you design something like this, try to apply your CSS in its own child node. If you create CSS with both global and local and apply across the whoel page, you may get unexpected results.
Hi Taywin. The site works perfectly in all the standard browsers Every element is placed correctly. The problem is firefox. Firefox:
misplaces the Form
disables the navigation links
takes the footer and places it in or over the Form links in the form and the footer links still work.
I found that the id for the table is not styled in the external CSS form so I have removed it. But left the code commented out. The id "content" is also not styled in the external stylesheet If I remove the id it alters the layout of the page on the other browsers.
The site is over a year old and I must have checked Firefox when I originally uploaded it. So, there has been an upgrade to firefox that has screwed up my website, or soemhow I failed to test it. The fact remains that the site is ok in IE9, Chrome, Safari and Opera.
I have found that I was using a single table and there was a rule to add location to a table cell via the CSS. Firefox didn't regard that as valid and so ignored it. I removed the table and the site now works fine.