Results 1 to 5 of 5

Thread: Image not aligned in all browsers

  1. #1
    Join Date
    Dec 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image not aligned in all browsers

    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?
    PHP Code:
       <td align="left">
         <div>
           <div style="float:left;">
              <?php
                $publickey 
    "6Lfn...";
                if (
    $request_type =='SSL')
                   echo 
    recaptcha_get_html($publickey0$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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,000
    Thanks
    44
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,000
    Thanks
    44
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

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

    Code:
           <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:

    Code:
           <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.
    Last edited by jscheuer1; 08-25-2013 at 05:47 AM. Reason: add alternative
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much, John. That fixed it.

Similar Threads

  1. Text and Image Crawler v1.5 Speed difference in different browsers
    By philrutter in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 10-26-2012, 06:05 PM
  2. Form aligned differntly between browsers
    By MotherMother in forum CSS
    Replies: 0
    Last Post: 05-02-2011, 09:02 PM
  3. Image Thumbnail Viewer II - Fading that works in all browsers
    By kittentaboo in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-19-2010, 09:01 PM
  4. Lightbox Overlay and Image not aligned
    By bazodee in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 01-10-2010, 01:05 PM
  5. image map on center aligned image
    By nomad0325 in forum CSS
    Replies: 1
    Last Post: 09-25-2008, 02:40 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •