How to find conflict between my CSS and JQuery UI CSS?
im using JQuery UI on my website to make for example buttons. It seems like my stylesheets are interefereing with the JQuery UI CSS because the button font-size is too big. How can i find out what's causing the problem? I installed Firebug 1.7 on FF 4.0 but i see it's mostly using JUI CSS from and from my stylesheet just some derived styles which should not affect the font-size of the button. Can someone help how to make the butto开发者_JS百科ns look like they should?
Test page: http://kangurek24.pl/test/loginform.jsp.htm
The font-size: 18px;
comes from the jQuery UI CSS rule on line 59 of jquery-ui.css
.
.ui-widget {
/* snip */
font-size: 1.1em;
}
The default font size is 16px, and 1.1 * 16 = 17.6 ≅ 18
.
To give the buttons the same font size as the rest of the text, add this rule to your custom CSS:
.ui-button {
font-size: .91em; /* ≅ 1/1.1 */
}
Make sure that your custom CSS comes after the jQuery UI CSS.
精彩评论