Problems with headings within LI sections

Problems with headings within LI sections

Hi all,

I have chosen to "inset" most of my content using the  data-inset = "true" attribute to allow my background to show through, rightly or wrongly. This is generally applied to a  < ul > tag, meaning that all content should be within  < li > tags.

It seems that when I add heading tags (h1, h2, h3, etc) they are all formatted exactly the same, rather than accepting the browser default styles. This appears to be because they are all given a class of  ui-li-heading, which is subsequently styled by the JQM standard stylesheet.

I guess that I can write a script to remove this class after it has been applied, but that seems like a bit of a fudge.

I have a few questions:

  1. Have I made a mistake by wanting to use the "inset" and a background (square pegs in round holes)?
  2. Or, have I missed something that will allow me to override this?
  3. Or, should I just create a custom stylesheet to override the default styles?

Doing the latter (point 3) means that I won't be leveraging the browsers native style. I guess I'd rather stick closely to the JQM intended usage. 

All suggestions and criticisms welcome.

Cheers,



Kaine