positioning problem

Stevo2007

This is part of my breadcrumbs navigation bar:

The google +1 Button used to be in the middle and not hogging the top so it was inline with the tweet button.

Happened over night and I didn't touch it, so not sure how it happened.

Tried removing the button code/script and re-adding but the issues still there. Also happens on every page, not just the one.

Any ideas would be appreciated!

tricky D

Page URL?

HairMonster

or the code that includes it?

Stevo2007

the code used is:

[PHP]<div class="social-widgets">
<ul>
<li><!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium" annotation="none"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></li>[/PHP]

and this is the CSS.

/* ========== Social Widgets ============*/
.social-widgets {position:absolute; right:0px; top:0px;}
.social-widgets li {float:left; margin-right:20px;}
/*--- ie8 fix --*/
.social-widgets li  .fb_share_size_Small  {top: 5px\0/; position:relative\0/;}
.social-widgets li iframe{margin-top:5px;}

This is what I used before aswel, and it worked fine but now for some reason the google button is raised.

tricky D

For ease and speed, page URL. Please?

Stevo2007

tricky D wrote: »

For ease and speed, page URL. Please?

Site isn't online yet.

HairMonster

If it happened overnight and you didn't change anything on your site, then it would have to be an external change?

I suggest wrapping everything in the li tag in a div.
I always put external elements in a div and position the div instead to prevent any external changes affecting my layout.