title: Jqgrid pagination icons missing
body: <p>Issue is pagination icons in jqgrid are not visible. I could see that the .png images are not found in my console.</p>
  
  <pre><code>GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
  GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
  </code></pre>
  
  <p>Also even though width is 'auto' there is a horizontal scroll bar appearing.</p>
  
  <p>The data gets loaded properly and my DB pagination is working fine. on first page only hand icon is visible and when clicked goes to page 2. but on page 2 no icon is visible.</p>
  
  <p>I downloaded again jqgrid but no .png icons were there in the installation</p>
  
  <p>My jsp code goes as below -</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;style&gt;
  
  div.ui-jqgrid-titlebar {
      height: 10px;
  }
  
  
          #sidebar {
              float: left;
              width: 150px;
              padding: 10px 10px;
             // background-color:yellow
          }
  
  
          #container {
              margin: 0px 320px 0px 170px;
              text-align: center;
             // background-color:red
          }
  
  
  
  &lt;/style&gt;
  
  &lt;link rel="stylesheet" href="../styles/ui.all.css" type="text/css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="../styles/jquery-ui.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="../styles/ui.jqgrid.css" /&gt;
      &lt;script type="text/javascript" src="../js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../js/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../js/grid.locale-en.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="../js/jquery.jqGrid.min.js"&gt;&lt;/script&gt;
      &lt;link href="../images/favicon.ico"  type="image/x-icon" rel="shortcut icon"&gt;
      &lt;script type="text/javascript"&gt;
          $.jgrid.no_legacy_api = true;
          $.jgrid.useJSON = true;
      &lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  //index is used to override the column name passed to the server in the query param sidx
          var myColModel = [
                          { name: "promId", index: 'Promotionid', width: 60 },
                          { name: "promoCode", index: 'promotioncode', width: 110 },
                          { name: "name", index: 'name', width: 160 },
                          { name: "description", index: 'description', width: 250 },
                          { name: "distCode", index: 'distributor_code', width: 110 },
                          { name: "status", index: 'status', width: 110 },
                          { name: "startDate", index: 'start_date', width: 100, sorttype: "date", align: "right" },
                          { name: "endDate", index: 'end_date', width: 100, sorttype: "date", align: "right" },
                          { name: "discount", index: 'discount', width: 90 },
                          { name: "extension", index: 'extension', width: 90 }
                      ];
  
              $(function () {
                  $("#list").jqGrid({
                      url: 'some/url',
                      datatype: "json",
                      mtype: "GET",
                      colNames: ["Promo ID", "Promo Code", "Name", "Description", "Distributor Code", "Status", "Start Date", "End Date", "Discount", "Extension"],
                      colModel: myColModel,
                      pager: "#pager",
                      rowNum: 10,
                      rowList: [10, 20, 30],
                      sortname: "end_date",
                      sortorder: "asc",
                      viewrecords: true,
                      gridview: true,
                      rownumber: true,
                      autoencode: true,
                      width: 'auto',
                      height: 'auto',
                      caption: "Promotion Summary"
                  });
  
              }); 
  
  
  &lt;/script&gt;    
  &lt;/head&gt;   
  
  &lt;br&gt;&lt;/br&gt;
  &lt;body&gt;
      &lt;br&gt;
      &lt;br&gt;
  
      &lt;center&gt;
          &lt;hr /&gt;
          &lt;div class="clear"&gt;
              &lt;%@ include file="header.jsp"%&gt;
          &lt;/div&gt;
      &lt;/center&gt;
      &lt;div class="sidebar"&gt;
          &lt;%@ include file="/admin/User.jsp"%&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;br&gt;
  
  
  
      &lt;div id="container" border="2px solid green"
          style="left: 5%; position: relative;"&gt;
  
          &lt;div id="tableContent" width="100%"&gt;
              &lt;div&gt;Summary&lt;/div&gt;
              &lt;div style = "margin: 0px auto 0px 150px;"&gt;
                  &lt;table id="list"&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;/table&gt;
                  &lt;div id="pager"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>