[SOLVED] JQuery UI Elements' Image not shown

JQuery UI Elements' Image not shown

I'm using a JQuery DatePicker element on my website. But, I'm not able to see the little arrows that are shown at both the sides of the month on top. The area is clickable & I can browse through the months by clicking on the area. But its actually blank & no arrows seen.

Eg: '<' July 2013 '>'

I encounterd a similar problem in the close button of JQuery Dialog Control. Here, the close button image, something like --> 'X', wouldn't appear on the top right corner. But clicking on that area closes the dialog.

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" href="styles/jquery-ui.css" /> 
    <script language="javascript" type="text/javascript" src="js/jquery.js" ></script> 
    <script language="javascript" type="text/javascript" src="js/jquery-ui.js"></script> 
</head>

This is how the sequence of the included file is. Below is the link which I'm referring. I've used the css file posted on this link for download.

http://jqueryui.com/datepicker/#default

Please help.

Solution

Thanks Guys for all your help, I found it!!!

.ui-widget-header .ui-icon { 
     background-image: url(images/ui-icons_222222_256x240.png);
 }

This is the image path that does the purpose. The file is same as code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css.

I'm really glad for all the help. Thanks again, @j08691 , @Tim B James, @John ツ, @Lopsided!! :)