+ Start a Discussion
TCAdminTCAdmin 

Image not displaying

Hello All,
 
I have ran in to an issue that I have not been able to resolve. I can build a page that looks almost identical to Salesforce's standard pages in an s-control but have not been able to mimic the lookup fields. I have included a simple s-control that lets the user select an Account from my organization, which is working correctly. What isn't working is the displaying of the lookup icon to the right of the field. If you create an s-control using the code below and then call it within Salesforce, I used it in a custom web tab pointing to the s-control, it does not display the magnifying glass next to the text field. If you run your mouse over the area where the image should be you will see that the function is there but not the image. I am hoping someone more familiar with CSS and mimicking Salesforce will be able to let me know where I'm failing.
 
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<meta name="Author" content="Chris">
<meta name="Description" content="New Time Form">
<link href="/dCSS/Theme2/default/common.css" type="text/css" rel="stylesheet" />
<link href="/sCSS/12.0/Theme2/allCustom.css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" type="text/css" />
<script src="/soap/ajax/12.0/connection.js" type="text/javascript"></script>
<script type="text/javascript" src="/dJS/en/1196379626000/library.js"></script>
<script src="/static/081407/desktop/desktopAjax.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="/js/functions.js"></script>
<script language="JavaScript">
 function createTest(){
  alert('create stuff here');
 }
 
 function cancelCreate(){
  alert('cancel stuff here');
 }
</script>

</head>
<body class="Custom64Tab editPage">
<script></script>
<a name="skiplink"><img src="/s.gif" height='1' width='1' alt="Content Starts Here" class="skiplink"></a>
 <div class="bPageTitle">
  <div class="ptBody secondaryPalette">
   <div class="content">
    <img class="pageTitleIcon" title="Time" alt="Time" src="/s.gif" />
    <h1 class="pageType">
     New Test
     <span class="titleSeparatingColon">:</span>
    </h1>
    <h2 class="pageDescription">Test Edit</h2>
    <div class="blank"></div>
   </div>
   <div class="links"></div>
  </div>
  <div class="ptBreadcrumb" />
 </div>

 <FORM NAME="editPage" ID="editPage">
  <div class="bPageBlock secondaryPalette">
   <div class="pbHeader">
    <table cellspacing="0" cellpadding="0" border="0">
     <tbody>
      <tr>
       <td class="pbTitle">
        <img class="minWidth" width="1" height="1" title="" alt="" src="/s.gif" />
        <h2 class="mainTitle">Add Test</h2>
       </td>
       <td id="topButtonRow" class="pbButton">
        <input value=" Add Test " class="btn" type="button" title="upd" name="upd" onclick="createTest()" >
        <input value=" Cancel " class="btn" type="button" name="done" onclick="cancelCreate()" >
        <span>
         <span class=errorMsg id="error_General"></span>
        </span>
       </td>
      </tr>
     </tbody>
    </table>
   </div>
 
   <div class="pbBody">
    <div class="pbSubheader first tertiaryPalette" id="head_1_ep">
     <span class="pbSubExtra">
      <span class="requiredLegend">
       <span class="requiredExampleOuter">
        <span class="requiredExample"></span>
       </span>
       <span class="requiredText"> = Required Information</span>
      </span>
     </span>
     <h3>Test Details<span class="titleSeparatingColon">:</span></h3>
    </div>
    <div class="pbSubsection">
     <table class="detailList" border="0" cellpadding="0" cellspacing="0">
      <tbody>
       <tr>
        <td class="labelCol requiredInput">
         <label for="Account"><span class="requiredMark">*</span>Account</label>
        </td>
        <td class="dataCol co102">
         <div class="requiredInput">
          <div class="requiredBlock"></div>
          <input id="Account_lkid" type="hidden" value="000000000000000" name="Account_lkid"/>
          <input id="Account_lkold" type="hidden" value="null" name="Account_lkold"/>
          <input id="Account_lktp" type="hidden" value="001" name="Account_lktp"/>
          <input id="Account_lspf" type="hidden" value="0" name="Account_lspf"/>
          <input id="Account_mod" type="hidden" value="0" name="Account_mod"/>
          <span class="lookupInput">
           <input tabindex="1" id="Account" type="text" size="20" name="Account" maxLength="255" onchange="getElementByIdCS('Account_lkid').value='';getElementByIdCS('Account_mod').value='1';" />
           <a id="Account_lkwgt" title="Reports To Lookup (New Window)" tabindex="1" onclick="setLastMousePosition(event)" href="JavaScript&colon; openLookup('/_ui/common/data/LookupPage—lkfm=editPage&lknm=Account&lktp=' + document.getElementById('Account_lktp').value,670,document.getElementById('Account_mod').value,'&lksrch=' + escapeUTF(document.getElementById('Account').value))">
            <img class="lookupIcon" title="Reports To Lookup (New Window)" onmouseover="this.className = 'lookupIconOn';this.className = 'lookupIconOn';" onmouseout="this.className = 'lookupIcon';this.className = 'lookupIcon';" onfocus="this.className = 'lookupIconOn';" onblur="this.className = 'lookupIcon';" alt="Reports To Lookup (New Window)" src="/s.gif"/>
           </a>
           <span>
            <span class=errorMsg id="error_Account"></span>
           </span>
          </span>
         </div>
        </td>
        <td class="labelCol">
         <label for="openProject"></label>
        </td>
        <td class="dataCol">
         <span>
          <span class=errorMsg id="error_openProject"></span>
         </span>
        </td>
       </tr>
      </tbody>
     </table>
    </div>
   </div>
   <div class="pbBottomButtons">
    <TABLE cellpadding="0" cellspacing="0" border="0">
     <tbody>
      <TR>
       <TD class="pbTitle">
        <img src="/s.gif" alt="" title="" width=1 height=1 class="minWidth">
       </TD>
       <TD class="pbButtonb" id="bottomButtonRow">
        <input value=" Add Test " class="btn" type="button" title="upd" name="upd" onclick="createTest()" >
        <input value=" Cancel " class="btn" type="button" name="done" onclick="cancelCreate()" >
       </TD>
      </TR>
     </tbody>
    </TABLE>
   </div>
   <div class="pbFooter secondaryPalette">
    <div class="bg"></div>
   </div>
  </div>
 </FORM>
</body>
</HTML>

 


Message Edited by TCAdmin on 05-21-2008 05:15 PM
werewolfwerewolf
Try using the Web Developer plugin for Firefox to determine where exactly in CSS that image is coming from, and then linking to that CSS file.
TCAdminTCAdmin
Hello werewolf,

I have used both the web developer toolkit along with Firebug without resolution. No matter what I've tried so far I was have not been able to display this stupid little image :smileysad:


Message Edited by TCAdmin on 05-23-2008 11:42 AM
TCAdminTCAdmin
Issue is resolved, I missed a CSS file.