If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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?

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:

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.