Html5BoilerPlate template or any a:visited & a:hover breaks jqm #3444

adaptabi opened this Issue Jan 17, 2012 · 11 comments


None yet

3 participants


I have reported the bug there but looks like is related to jqm itsel in the end
h5bp/html5-boilerplate#879 (comment)

If a:visited, a:hover are defined, they will break jquery mobile buttons like <a data-role="button"

a:visited and a:hover must be defined explicitly for each theme.


Can you post a test page so we can review this?


just add in your css
a:visited { color: red; }

and then a button on your page
<a href="" data-role="button">Google</a>

press the button and then get back to your page and refresh it.


Any luck?


@dotnetwise - Does this pull look like it would also resolve this issue?

jQuery Foundation member

@dotnetwise JQM is designed to be styled using the theme swatches. If you want to combine it with H5BP CSS you have to adjust it yourself to make it work together.
If you only want to to style regular visited links you have to use the ui-link class.When using the default theme "c" for the page/content: .ui-body-c .ui-link:visited { color: red; }


@uGoMobi JQM can be "defaulted" to correct visited colors for each theme by default - so whether you are using H5BP or other css before - JQM won't look broken

@toddparker It looks like it - I can't test it right now but maybe you can and confirm? Thanks

jQuery Foundation member


If I understand you right that pull request @toddparker is refering to is not related. That only concerns regular links in bars.

You are talking about anchor elements that are styled as buttons. In case you add a rule for a:visited this will apply to all buttons because a:visited has a higer level of specificity than .ui-btn-up-c.

To prevent this from happening a rule has to be added for the visited pseudo class for each theme/swatch, for each button state (up/hover/down). In case H5BP CSS has rules for a:hover and a:active two more rules has to be added to each theme for the hover and down state.

Why not just remove it from your H5BP CSS?


Thanks @uGoMobi
That makes sense.
I can remove them, but I thought we could fix them once and for all in JQM so other people that will use H5BT will not have the same un-experience :)


@dotnetwise - we're given this some discussion internally and we're going to look at tweaking the theme CSS to avoid this link inheritance rule. There will always be a million CSS rules that could potentially interfere with our styles but this does seem like such a common thing to set that we should be a bit more defensive.


Thanks @toddparker

Yes, it's very common. Thanks for fixing it.

jQuery Foundation member

Closing as fixed (commit 8509d57).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment