Resetting css on load when using jQuery Mobile

Question

I'm using jQuery Mobile on a responsive site mainly for a pop up menu. I've noticed that with this library you automatically get stuff like animations throughout the site.

The disadvantage is that I have special styles for different pages. Say I type in a link to go to the "bio" page, everything loads fine and the same is true for the "roster" and "about" pages. However, when I try to go to another of the pages (say from "bio" to "about" by using the site's menu) the current page retains the styles from the previous page and just swaps out the html content.

How do I keep using jQuery mobile but have each page load styles as intended and (if possible) keep the transitions?

Here are links to the actual pages so you can understand what I'm saying;

http://ramiroproductions.businesscatalyst.com/roster.html - Roster
http://ramiroproductions.businesscatalyst.com/aboutus.html - About
http://ramiroproductions.businesscatalyst.com/biography.html - Bio

You can try refreshing them to understand how they're supposed to look.

Answer 1

Make sure your user-written styles are included after the jquery mobile css to follow rules of cascading and specificity of style declarations. So try first to put the link to your stylesheet AFTER the jquery mobile css stylesheet. If that alone doesn't work, use the browser inspector to check which styles are overriding, and write those styles exactly in that format into your stylesheet.

Answer 2

I've discovered this is because jQuery mobile handles links through ajax. Disabling it solves this issue but you loose the page transitions.

Refer to this question for more info: How To Disable Ajax In jQuery Mobile Before Page Load?