Hey folks!

I can't best describe this in words, so I'll show you with pictures.

Here's how my designer intends the Gravatar images to look in the sidebar of our site:

Here's the overlay image I made (screenshotted from Photoshop):

Here's how it looks right now...

Not quite ideal, I think you'll agree. This is the CSS code I am using:

.gravatarsidebar {
    float:left; 
    padding:0px;
    width:70px;
}

.gravataroverlay {
 width:68px;
 height:68px;
 background-image: url('http://localhost:8888/images/gravataroverlay.png');
}

And here's the XHTML (and a sprinkle of PHP to fetch the Gravatar based on the user's email address, which is fetched from our database):

<div class="gravataroverlay"></div>

        <div class="gravatarsidebar">
            <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
            echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>  
        </div>

So what can I do? I can't use relative positioning as it makes the word 'Search' in the div below stay moved to the right.

Thanks for your help!

Jack