Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Closed
dotnetwise opened this Issue · 11 comments

3 participants

@dotnetwise

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.

@toddparker

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

@dotnetwise

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

and then a button on your page
<a href="http://www.google.com" data-role="button">Google</a>

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

@dotnetwise

Any luck?

@toddparker

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

@jaspermdegroot
Collaborator

@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; }

@dotnetwise

@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

@jaspermdegroot
Collaborator

@dotnetwise

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?

@dotnetwise

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 :)

@toddparker

@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.

@dotnetwise

Thanks @toddparker

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

@jaspermdegroot
Collaborator

Closing as fixed (commit 8509d57).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.