Skip to content
This repository

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

Closed
dotnetwise opened this Issue January 17, 2012 · 11 comments

3 participants

dotnetwise Jasper de Groot Todd Parker
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.

Todd Parker

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?

Todd Parker

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

Jasper de Groot
Owner
uGoMobi commented May 05, 2012

@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

Jasper de Groot
Owner
uGoMobi commented May 05, 2012

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

Todd Parker

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

Jasper de Groot uGoMobi closed this June 07, 2012
Jasper de Groot
Owner

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.