title: Not all parts of the html button is clickable
body: <p>Not all parts of a button "Click to post" is clickable.so when i click "Cli" part of that button, i don't see hand cursor means not clickable and so is not firing respective  event.following are the div where is the problem.look at the last span element which is the button i meant - </p>
  
  <pre><code>&lt;div id="photodivmain" style="padding:4px; "&gt; 
           &lt;div style="padding-bottom:8px; font-size:11px;"&gt;
           &lt;div style="margin-bottom:6px;font-size:11px;"&gt;Write in the message box.Click "Click to post" to publish.&lt;/div&gt; &lt;b&gt;Message:&lt;/b&gt; &lt;div style="border:1px solid gray;padding:4px;margin-top:2px;background-color:white"&gt;&lt;textarea id="postphdesc" style="border:none;border:0px solid transparent; width:100%;" rows="3"&gt;&lt;/textarea&gt;&lt;/div&gt;
           &lt;/div&gt;
            &lt;div id="swfupload-control" style="font-size:11px;"&gt;
            &lt;div style="margin-bottom:2px;"&gt;&lt;b&gt;Select an image file on your computer (jpg, png, gif,bmp).Maximum size of 2 MB)&lt;/b&gt;&lt;/div&gt;&lt;input type="button" id="buttonFileUp" /&gt;&lt;p id="queuestatus" &gt;&lt;/p&gt;&lt;ul style="list-style:none; list-style-type:none; text-decoration:none" id="log"&gt;&lt;li style="list-style-type:none; list-style:none;"&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;                 
           &lt;div style="position:relative;"&gt;
              &lt;span class="postwall-button" style="cursor:hand;cursor:pointer; padding:3px 5px 3px 5px;border:1px solid buttonface; font-weight:bold;margin:5px 0 4px 2px !important;font-size:15px; display:block; width:100px; text-align:center;" onclick="StartToDoWork()"&gt;Click to post&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>also i am using swfupload to choose file to upload by the swfupload-control div above.following shows how i initiate swfupload and when file choosed some elements added in the above </p>
  
  <pre><code> &lt;ul&gt;
  </code></pre>
  
  <p>list.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery('#swfupload-control').swfupload({            
      button_image_url: "&lt;?php echo JURI::root(); ?&gt;modules/mod_posttofb/images/XPButtonNoText_160x22.png",   
      button_width: 160,
      button_height: 22, button_text: '&lt;span&gt;Choose File&lt;/span&gt;',
      button_text_top_padding: 1,
      button_text_left_padding: 44,
      button_placeholder : jQuery('#buttonFileUp')[0],
      ......other main parameters not shown here
  })
      .bind('fileQueued', function(event, file){
          jQuery('#log li').remove();
          var listitem='&lt;li id="'+file.id+'" &gt;'+
              'File: &lt;em&gt;'+file.name+'&lt;/em&gt; ('+Math.round(file.size/1024)+' KB) &lt;span class="progressvalue" style="font-weight:bold;" &gt;&lt;/span&gt;'+
              '&lt;div class="progressbar" &gt;&lt;div class="progress" style="" &gt;&lt;/div&gt;&lt;/div&gt;'+
              '&lt;p class="status" style="margin-bottom:1px;font-weight:bold;"&gt;Attached&lt;/p&gt;&lt;input type="button" class="cancel" value="Cancel" id="cancelbutton" style="padding:2px; cursor:pointer;cursor:hand; font-weight: normal;background-color:#F2F2EE; border:1px solid black; -webkit-border-radius: 0.4em; -moz-border-radius: 0.4em;border-radius: 0.4em;"  /&gt;'+
              '&lt;/li&gt;';
  
          jQuery('#log').append(listitem);                
      })
  ............other functions not shown here 
  &lt;/script&gt;
  </code></pre>
  
  <p>by web research i have not found solution yet but knew giving position:relative attr to span works.but if it has any drawbacks as the app must work in ie8,firefox,chrome...browsers both in xp and win7.And main thing is everything works on other browsers except Firefox.</p>