I am using different jQuery plugins on my site. For example jQuery Notice, jQuery bloackUI and jQuery UI DatePicker. But all these are shown bigger on my site when compared to original one with same configuration, on same browser and with same resolution. There are many css files in my site but I don't know what is effecting the size of all these. Any Idea ? Thanks
Example 1:
Original on Plugin official site:
On My website:
Example 2
Original on Plugin official site:
On My site:
jQuery UI sites got
body {
font-size: 10px
}
Rest of sizes, also jQuery UI dialogs, datepickers etc, got sizes relatively to that.
Just check: http://jsfiddle.net/6YfGc/
Use a DOM inspector (Chrome's Inspect Element tool, IE's Developer Tools, Firebug...) to see what styles are being applied to your elements. Find out what's overriding what and fix it like that.
Install something like FireBug. That will allow for you to see what CSS rules are affecting the different elements in the DOM. Then you'll be able to trace it back to the specific line in the specified stylesheet. After that point, you can either change the rogue rule, OR you can set up a more specialized rule of your own, to have it display the way you want.