New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
adaptabi opened this Issue Jan 17, 2012 · 11 comments

Comments

Projects
None yet
3 participants
@adaptabi
Contributor

adaptabi commented Jan 17, 2012

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jan 17, 2012

Contributor

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

Contributor

toddparker commented Jan 17, 2012

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

@adaptabi

This comment has been minimized.

Show comment
Hide comment
@adaptabi

adaptabi Jan 17, 2012

Contributor

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.

Contributor

adaptabi commented Jan 17, 2012

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.

@adaptabi

This comment has been minimized.

Show comment
Hide comment
@adaptabi

adaptabi Jan 23, 2012

Contributor

Any luck?

Contributor

adaptabi commented Jan 23, 2012

Any luck?

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 5, 2012

Contributor

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

Contributor

toddparker commented May 5, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 5, 2012

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

Member

jaspermdegroot commented May 5, 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; }

@adaptabi

This comment has been minimized.

Show comment
Hide comment
@adaptabi

adaptabi May 5, 2012

Contributor

@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

Contributor

adaptabi commented May 5, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 5, 2012

Member

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

Member

jaspermdegroot commented May 5, 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?

@adaptabi

This comment has been minimized.

Show comment
Hide comment
@adaptabi

adaptabi May 5, 2012

Contributor

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

Contributor

adaptabi commented May 5, 2012

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 10, 2012

Contributor

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

Contributor

toddparker commented May 10, 2012

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

@adaptabi

This comment has been minimized.

Show comment
Hide comment
@adaptabi

adaptabi May 10, 2012

Contributor

Thanks @toddparker

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

Contributor

adaptabi commented May 10, 2012

Thanks @toddparker

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 7, 2012

Member

Closing as fixed (commit 8509d57).

Member

jaspermdegroot commented Jun 7, 2012

Closing as fixed (commit 8509d57).

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