jquery mobile css always overwrites my css

Question

I'm loading my css after jQuery Mobile's css file:

<head>
    <link rel="stylesheet" href=".../1.1.1/jquery.mobile-1.1.1.min.css" />
    <link rel="stylesheet" href="main.css" />
</head>

But my margin attribute always get overwritten:

firebug showing overwritten margin attribute

Is jquery's css getting loaded dynamically after mine somehow? I've tried using ThemeRoller but it is too simple, I can't change the margins.

Thanks!

Salketer · Accepted Answer · 2012-10-02 13:57:12Z

2

The reason why your CSS is getting overwritten is because the jQuery's CSS is more accurate with its selectors.

You say that all items with class .ui-radio should have margin, which is taken first, then all items with .ui-radio that are inside .ui-controlgroup-vertical have a set margin too.

A simple trick would be to make sure to use the same selector, .ui-controlgroup-vertical .ui-radio in this case, this should do the trick if your CSS is loaded after. Else, use one more parent container and you will be fine.

Little read to make it clearer: http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector

answered Oct 2, 2012 at 13:57

Salketer

15.8k2 gold badges32 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery mobile css always overwrites my css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related