Image not aligned in all browsers

[patter]

I have the google recaptcha box on a site and people don't seem to be able to understand the cycle gadget on it. So i am trying to place an image of an arrow pointing to it. The code I have is below. The arrow points to where I want it to in IE and FF but in Chrome it is about 20 pixels farther up the page, almost missing the whole box. Would someone please point out my mistake or how to fix this?

   <td align="left">
     <div>
       <div style="float:left;">
          <?php
            $publickey = "6Lfn...";
            if ($request_type =='SSL')
               echo recaptcha_get_html($publickey, 0, $request_type);
            else
               echo recaptcha_get_html($publickey);
          ?>
       </div>

       <div style="position:absolute; top:840px; left:500px;"><img src="images/recycle.gif"></div>

     </div>
   </td>

[jscheuer1]

Mixing float with absolute positioning generally will have cross browser issues. But this is hardly enough to go on to give you a definitive answer, and the problem might be unrelated to that.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[patter]

I setup a test site here to keep the code size down. As you can see, the arrow points to where it should in IE and FF but not Chrome.

[jscheuer1]

Make the red changes/additions as shown to the two highlighted lines:

       <td align="left">
         <div style="height:129px;position:relative;">
           <div style="float:left;">
              <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LehlrsSAAAAALgrit71rtO2XR7LypU27JAnLzx4"></script>

	<noscript>
  		<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LehlrsSAAAAALgrit71rtO2XR7LypU27JAnLzx4" height="300" width="500" frameborder="0"></iframe><br/>
  		<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  		<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
	</noscript>           </div>
    
           <div style="position:absolute; bottom:0; left:340px;"><img src="images/recycle.gif"></div>
    
         </div>
       </td>

Note: For the div that contains the arrow image (recycle.gif) make sure to remove the top:148px; and replace it with the bottom:0, as shown. If you leave the top:148px; in there, it will override the bottom coord in some browsers.

By setting the other div to position relative and giving it a height equal to the height of the recaptcha feature, the bottom:0 on the image's div will align it perfectly with the bottom of the recaptcha feature.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Alternatively, if you lose the float you don't need to set the height:

       <td align="left">
         <div style="position:relative;">
           <div>
              <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LehlrsSAAAAALgrit71rtO2XR7LypU27JAnLzx4"></script>

	<noscript>
  		<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LehlrsSAAAAALgrit71rtO2XR7LypU27JAnLzx4" height="300" width="500" frameborder="0"></iframe><br/>
  		<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  		<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
	</noscript>           </div>
    
           <div style="position:absolute; bottom:0; left:340px;"><img src="images/recycle.gif"></div>
    
         </div>
       </td>

Which is preferable because, if the browser has javascript turned off and the iframe is used, the height will be different. Without the float the height will be automatically calculated by the browser.

[patter]

Thank you very much, John. That fixed it.