Firefox incompatibility

Printable View

10-08-2012, 04:48 PM
trueblue

Firefox incompatibility

Hi all,

I'm tackling my first proper "HTML" & "CSS" project, coding in Coda 2. The website spr8.wildapricot.org displays properly in Safari and Chrome, but the tables & positioning seem to be shifted in Firefox. As I'm new to this I can't begin to picture what I've done.

A good problem example page is: http://www.spr8.wildapricot.org/Defa...pageId=1421907

Any suggestions as to what the problem is? All help is hugely appreciated!

Also, I tried to add example code to this message, but the it says I can't add my own tags? How can I get around this? Cheers!
10-09-2012, 09:47 AM
rtrethewey

You have to have posted a certain number of messages before you can post code here.

I don't mean to be harsh, but the code for your page is so convoluted that I didn't really try to see what the issues might be. It looks like the page suffers from having been edited and re-edited so many times that the code generator has left behind dozens of stray empty <div>s and other artifacts from IE conditionals that make it indecipherable. I stopped looking when I saw some inline CSS where an element had a z-index of 83 for a page where the only 'magic' is a cascading menu and a current page indicator icon.

My advice would be to start over from scratch, mate. If I had to guess, I'd bet that any Firefox issues are down to some questionable syntax in your stylesheets or default margin settings, but that's only a guess. At this point, trying to fix the existing code would not be the most productive choice. Even if a quick fix is possible, the code is in a state that will likely lead to continuing problems going forward. Good luck!
10-10-2012, 04:44 AM
trueblue

Quote:

Originally Posted by rtrethewey

You have to have posted a certain number of messages before you can post code here.

I don't mean to be harsh, but the code for your page is so convoluted that I didn't really try to see what the issues might be. It looks like the page suffers from having been edited and re-edited so many times that the code generator has left behind dozens of stray empty <div>s and other artifacts from IE conditionals that make it indecipherable. I stopped looking when I saw some inline CSS where an element had a z-index of 83 for a page where the only 'magic' is a cascading menu and a current page indicator icon.

My advice would be to start over from scratch, mate. If I had to guess, I'd bet that any Firefox issues are down to some questionable syntax in your stylesheets or default margin settings, but that's only a guess. At this point, trying to fix the existing code would not be the most productive choice. Even if a quick fix is possible, the code is in a state that will likely lead to continuing problems going forward. Good luck!

Thanks for the reply, Rick, it's appreciated. The main bulk of that code will be down to 'wild apricot', the web template host that I am using. I then edit the HTML within the main page that is on display (ie. not the cascading menus etc.), for which I've had photoshop create the HTML template by saving a design 'for web and devices'.

Looks like I'll have to take a cleaner approach *sigh*. Still, lesson learnt!
10-10-2012, 02:16 PM
shiftins

I ran into the same problem when coding for chrome. Browser compatibility is a pain... but like rick said its all about clean coding. I would recommend coding on IE and viewing changes there since its the most standard browser.