/    Sign up×
Community /Pin to ProfileBookmark

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: [url]http://www.spr8.wildapricot.org/Default.aspx?pageId=1421907[/url]

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!

to post a comment
HTML

3 Comments(s)

Copy linkTweet thisAlerts:
@rtretheweyOct 09.2012 — 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!
Copy linkTweet thisAlerts:
@trueblueauthorOct 10.2012 — 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![/QUOTE]


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!
Copy linkTweet thisAlerts:
@shiftinsOct 10.2012 — 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.
×

Success!

Help @trueblue spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...