I have a link within the content of a jquery-ui accordion div. It works, but is not formatted like the rest of my links. I found this on the jquery-ui accordion page:
If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.
However, I'm not really sure how to do this. I assume I need to change the .css for the accordion to use this new a.header class for the headers and then my regular a elements will use the css that the rest of the a elements on my site use?
Here's the .css for the accordion:
/* Accordion
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
/* IE7-/Win - Fix extra vertical space in lists */
.ui-accordion a { zoom: 1; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }
I recommend using something like firebug to inspect your element. From there you can figure out exactly what part of that CSS is affecting your link so you can style it that way. That or give the link its own class name to style it the way you want. If you want to go directly to the jquery UI CSS, perhaps look into styling the tags with 'a' in them and see if that gets you anywhere.
ie:
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
/* IE7-/Win - Fix extra vertical space in lists */
.ui-accordion a { zoom: 1; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
those ones