2

site.css:

a:link, a:visited, a:hover, a:active
{
    color: #0033CC;
    text-decoration: none;
}

in page:

<a href="/foo/boo">test link</a>

jQuery:

$('a').button();

jQuery nicely creates a button for the 'test link' but some text colors on button's different states are the ones defined in site.css, not jQuery theme's.

So the point here is to provide some default look for all the links on the page without affecting jQuery's theming. What am I doing wrong?

randomguy
  • 12,042
  • 16
  • 71
  • 101

2 Answers2

2

The issue has to do with pseudo elements :link, :visited, :active and :hover (from the page) overriding the jquery styles. The styles for the pseudo elements are given a higher priority than ones for the classes.

Personally I don't have a good solution for this yet. You can edit in some style tags to make your a.:visited a.:hover and a.:active be the correct colors, though that's a right pain when you're using the themeroller.

personally I think the themeroller should take care of this, generating styles that force buttons to show the correct styles even when under those particular pseudo elements.

longer edit: THe styles that you want to add are

a.ui-button:link, a.ui-button:visited ... you want to add these to the first line under interaction stats, so they begin the line that normally has .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default

a.ui-button:hover to the 3rd line, that normally is .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus

Not sure if this is necessary, but for completeness I added

a.ui-button:active to the 5th line, that normally is .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active

this makes the buttons appear correctly as far as I can tell. But like I said, it's a right pain if you're using the themeroller and allowing multiple themes.

charley
  • 124
  • 1
  • 5
-1

It's working as intended, by specifying it in page it's taking priority over jQuery's definiton.

http://www.w3schools.com/css/css_howto.asp

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)

If you want you can change your code to:

Javascript:

$("button").button();

HTML:

<button>Button label</button>
Robert
  • 21,110
  • 9
  • 55
  • 65