Plus 1 button won't align with others

Something causing newline

[Kickedout]

Can anybody tell me how to make the google +1 button behave and align with all the rest?

For some reason is generating a new line....

My css stylesheet

#contain {
 float: left;
 display: inline;
width:auto;
height: 25px;
position: absolute;
top: 106px;
right: 12px;
overflow:visible;
margin: 0px;
padding: 0px;
border: thin solid #006600;
 
}

#plus{
display: inline;
overflow:visible;
position:relative;
width:auto;
vertical-align:top;
background-color: #00CC33;
margin: 0px;
padding: 0px;
height: 25px;
/*background-color:#00CC99;*/
}

HTML:

<div id="contain"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;send=false&amp;layout=button_count&amp;width=108
&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&a
mp;height=21" scrolling="no" frameborder="0" style="border:none; 
overflow:hidden; vertical-align:top; display:inline; width:108px; height:21px; margin:0px;" allowTransparency="true"></iframe> <div id="plus"><!-- twitter --> <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="onlinehoteles" data-lang="es">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><!-- fin twitter --><!-- myspace --> <a href="javascript:void(window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent
(document.location.toString()),'ptm','height=450,width=550').focus
())"> <img src="../images/myspace.gif" alt="Share on Myspace" name="my" width="20" height="20" border="0" /></a><!-- fin myspace --> <a href="javascript:print()"><img src="../images/imprimir.gif" alt="Imprimir" border="0"></a> <g:plusone size="medium" count="false"></g:plusone><!-- fin redes --></div></div>

[edited by: alt131 at 7:44 pm (utc) on Jun 30, 2011]
[edit reason] Side Scroll [/edit]

[SuzyUK]

get yourself firebug (Firefox addon) this will show you the generated HTML code for all these buttons, the code for most will produce

iframes

therefore it's the iframes you need to float to get them to line up, not the divs they are contained in (as the iframes will generally appear in the same div)

e.g. with the code you provided, which is not enough for afull solution.. I have this which aligns what I can see..

HTML:

<div id="contain">
 <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;send=false&amp;layout=button_count&amp;width=108
&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&a
mp;height=21" scrolling="no" frameborder="0" style="border:none; 
overflow:hidden; vertical-align:top; display:inline; width:108px; 
height:21px; margin:0px;" allowTransparency="true"></iframe>
 <div id="plus">
<!-- twitter --> 
 <a href="http://twitter.com/share" class="twitter-share-button" data-
count="none" data-via="onlinehoteles" data-lang="es">Tweet</a>
 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 <!-- fin twitter -->
 
 <!-- myspace --> 
 <a href="javascript:void(window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent
(document.location.toString()),'ptm','height=450,width=550').focus())"> 
 <img src="../images/myspace.gif" alt="Share on Myspace" name="my" 
width="20" height="20" border="0" /></a>
 <!-- fin myspace --> 
 
 <a href="javascript:print()"><img src="../images/imprimir.gif" alt="Imprimir" border="0"></a> 
 <g:plusone size="medium" count="false"></g:plusone><!-- fin redes -->
 </div>
</div>

CSS:

#contain iframe {background: #dad; float: left;}
#plus iframe {height: 21px !important;}

[edited by: alt131 at 11:14 pm (utc) on Jun 30, 2011]
[edit reason] Side Scroll [/edit]

[Kickedout]

Thanks a lot.

BTW my code already worked ok in Firefox, in IE8 is showing the newline.

I'm Not sure to understand.

Why is 21px height important? And what is #dad ? (since not applied to anything in the code?



Also tried

#contain iframe {background: float: left;}
#plus iframe {height: 21px !important; float: left;}

No joy, same thing in IE this far

[alt131]

Hi Kickedout, Suzy has limited time, so I'll try to explain what I think she was thinking until she has time herself.

BTW my code already worked ok in Firefox, in IE8 is showing the newline

Are you saying that because Suzy suggested firebug for firefox? If so, that is because you need to understand what code is being applied to fix the problem. ie8 has the developer tools, but firebug is easier to use and more powerful.

And what is #dad ? (since not applied to anything in the code

#dad is a background colour and setting it is a coding tecnique to help identify the dimensions of the elements when things are causing trouble. It can be any colour at all. As you see from the selector it is being applied to any iframe that is a descendent of div#plus.

Look in firebug or the developer tools in ie8 and you will see that although there is no iframe coded into the html, the twitter link loads one into div#plus. Test the code sample Suzy provided and you will see the background-color is being applied to that iframe.

Why is 21px height important?

This is to set a uniform height for all the iframes. Notice the twitter iframe and myspace button are only 20px high - while the facebook iframe is 21px? Setting 21px height removes that difference.

#contain iframe {background: float: left;}

There is no value for the background property so that code won't work as it is invalid. The Opera webdevelopers course has a better explanation about properties and values [dev.opera.com].

I'm not seeing a newline in ie8 in either your posted code or Suzy's sample. That suggests there is something else in the code that is causing it. I suggest you validate your html and css. Then look for a <br>, and if not, the styles being applied to the elements. If you can't figure out how to adjust the styles yourself, post a short sample of what you have now (just as you did for the OP) so we can take a look.

[SuzyUK]

alt131, thanks that's exactly it :)

@kickedout the 21px is not really important, it's just to even up all the iframes as alt says - but what I think you were asking is about the

!important

- this is used to override the inline style produced by the script, however if you're not worried about a 1px difference which is hardly noticeable, just omit that.

I tried to have a look at generated Google+ button code and couldn't get it to work, however I think it actually does produce its own wrapper div, so after me saying it's the iframes that need floated if you have a look at the generated code for the page it may be that there is a div instead for the + button that needs floated too

example of generated code:

<div id="___plusone_0" style="height: 24px; width: 106px; display: inline-block; text-indent: 0pt; margin: 0pt; padding: 0pt; background: none repeat scroll 0% 0% transparent; border-style: none; float: none;">

In that code I can see that the container div is display: inline-block but that won't be working in IE7 and below, and if you do want to float that

div

you'll have to use !important in order to override the inline

float: none;

- So, very possibly easier, if you want to go with

inline-block

and vertically align your links/images to match the iframes.. try this:

#plus, #plus div, #plus a, #plus img {display: inline-block; vertical-align: top;}
#plus, #plus div, #plus a, #plus img {display: inline !important;}

I am seeing a new line after the facebook button, but I'm seeing that in all browsers because of the

#plus

div - the code above makes everything including the

#plus div

itself display as an inline block ,

display: inline !important

rule is a hack to make IE7 play nice with inline-block too, and because the Google+ button uses it it may be better this way than using/overriding float rules

If you still have a new line in IE8 is the container that these links/buttons are in, wide enough to hold them all?

[Kickedout]

Thanks. I don't want to have them vertically aligned (just to be sure we are talking about the same thing), I want all buttons one next to the other horizontally, so I understand inline-block is an enemy.

I do have enough width, I'm in fact using 300px just to ensure and that's not the problem.

The #plus, #plus div, #plus a, #plus img {display: inline !important;}
makes it work in IE8, and now unhapilly the undesired effect is happening now in Firefox: the +1 button though has enough spot to be in, comes down to next line :(

This will never end.

This is what I see in Firebug

<div id="contain">
<iframe scrolling="no" frameborder="0" allowtransparency="true" 
style="border:none; overflow:hidden; vertical-align:top; 
display:inline; width:108px; height:21px; margin:0px;" 
src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%
2Fwww.example.com&send=false&layout=button_count&width=108&show_faces=
false&action=like&colorscheme=light&font&height=21">
<div id="plus">
<iframe class="twitter-share-button twitter-count-none" 
scrolling="no" frameborder="0" allowtransparency="true" src="http://platform0.twitter.com/widgets/tweet_button.html?
_=1309885909914&count=none&id=twitter_tweet_button_0&lang=es&original_
referer=http%3A%2F%2Fwww.example.com&text=Hoteles%20en%20Carlos%20Paz%
3A%20hoteles%2C%20Posadas%20en%20Carlos%20Paz&url=http%3A%2F%
2Fwww.example.com%2Fvillacarlospaz%2Fhoteles.htm&via=example" 
style="width: 64px; height: 20px;" title="Twi`tter para sitios web: 
Botón para Twittear">
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
<a href="javascript:void(window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent
(document.location.toString()),'ptm','height=450,width=550').focus
())">
<a href="javascript:print()">
<div id="___plusone_0" style="height: 20px; width: 32px; display: 
inline-block; text-indent: 0pt; margin: 0pt; padding: 0pt; 
background: none repeat scroll 0% 0% transparent; border-style: none; 
float: none;">

<iframe width="100%" scrolling="no" frameborder="0" vspace="0" 
tabindex="-1" style="position: static; left: 0pt; top: 0pt; width: 
300px; height: 20px; visibility: visible;" 
src="https://plusone.google.com/u/0/_/+1/button?hl=es-419&amp;jsh=r%
3Bgc%2F22203364-e7648d15#url=http%3A%2F%2Fwww.example.com%
2Fvillacarlospaz%
2Fhoteles.htm&amp;size=medium&amp;count=false&amp;id=I1_1309885910804&
amp;parent=http%3A%2F%2Fwww.online-
hoteles.com.ar&amp;rpctoken=865905068&amp;_methods=onPlusOne%2C_ready%
2C_close%2C_open%2C_resizeMe" name="I1_1309885910804" marginwidth="0" 
marginheight="0" id="I1_1309885910804" hspace="0" 
allowtransparency="true"></iframe>

And this is my css

#contain {
 display: inline;
width:300px;
height: 21px;
position: absolute;
top: 106px;
right: 12px;
overflow:visible;
margin: 0px;
padding: 0px;
border: thin solid #006600;
 }

#plus, #plus div, #plus a, #plus img {display: inline !important;}

[edited by: Kickedout at 5:27 pm (utc) on Jul 5, 2011]

[edited by: alt131 at 4:55 pm (utc) on Jul 6, 2011]
[edit reason] Side Scroll [/edit]

[londrum]

i know i'll probably get shot for suggesting this... but you could always use a simple little table, and stick each button in a different cell.

[SuzyUK]

@londrum, I'm not pointing my pistol ;)

@kickedout - 300px is not wide enough**,

display: inline-block

is not the enemy, it is your friend in this case (glad it's working in IE now!) - most of the newer "like it" "friend it" "+ it" buttons will increasingly use it as it's the "new float" !

When I said vertically align - I meant by that that the buttons/images should be side by side but that because they are, or may be, different heights they should align on the center of their vertical axis too so we are on the same track..

The other thing about

display: inline-block;

is that when using it it will leave about 4px (0.25em is possibly the more correct way to think of this as it's related to font-size and word-spacing) space between the elements.. coming back to this

I can't see the exact widths of all your elements in that

contain div

but I have 3 of 4 I think

facebook iframe = 108px wide
twitter iframe = 110px wide
Myspace = not sure but lets say 20px wide like your image suggests
Google+ iframe = 90px wide

all those added together = 345px

now that's not exact as I can't see all the iframes, but I hope you get the idea (look at firebug, computed width, to find your exact measurements)

then with the 4px spacing between them which inline-block adds say another 12px you are looking at needing a 340-350px** wide container

you can of course try some code to reduce the whitespacing between inline elements.. I find

margin-left: -0.25em

works quite well although it has to be hidden from IE7 and below.

or you can try a table as suggested by londrum, but you may still have different spacing issues even within it, though maybe not :)

[SuzyUK]

@kickedout cancel that last message (well nearly.. firebug was my friend at last!) - the G+1 iframe with "count=false" is adding some weird inline code.. and I think I finally see your "new line".. be right back

---

later... it's a weird one.. I saw the new line because of width: 100% and absolute positioning and all sorts and then it crashed my editor, once I got everything back open and re setup it's now working fine, and button is displaying properly and all, even though I never saw it before now?

It's no longer producing completely at odds code to what you were showing, nor is it producing the same code? - So the only thing I can do now is paste the code that I have that appears to be now working fine..

HTML (not generated): - nothing new added I except the script call for the G+ button and a placeholder image

<div id="contain">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%
2Fwww.example.com&amp;send=false&amp;layout=button_count&amp;width=108
&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&a
mp;height=21" scrolling="no" frameborder="0" style="border:none;
overflow:hidden; vertical-align:top; display:inline; width:108px;
height:21px; margin:0px;" allowTransparency="true">
</iframe>

<div id="plus">

<!-- twitter -->
<a href="http://twitter.com/share" class="twitter-share-button" data-
count="none" data-via="onlinehoteles" data-lang="es">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- fin twitter -->

<!-- myspace -->
<a href="javascript:void(window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent
(document.location.toString()),'ptm','height=450,width=550').focus
())"> <img src="http://placekitten.com/20/20/" alt="Share on Myspace"
name="my" width="20" height="20" border="0" /></a>
<!-- fin myspace -->

<a href="javascript:print()"><img src="../images/imprimir.gif"
alt="Imprimir" border="0"></a>

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium" count="false"></g:plusone>
<!-- fin redes -->
</div>

</div>
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

CSS (nothing else but this):

#plus, #plus div, #plus a, #plus img {display: inline-block; vertical-
align: top;}
#plus, #plus div, #plus a, #plus img {display: inline !ie7;}

sorry I got the IE hack wrong in my last post, but you do need both lines and the second one is only read by IE7 and below only and the

!ie7

is the hack (not !important like I had before) - the first line should make it work in IE8, FF, Webkit et al.. when it does the second one will make it work in IE7 and below

the generated code for the G+ button now looks like this:

<div id="___plusone_0" style="height: 20px; width: 32px; display: inline-block; text-indent: 0pt; margin: 0pt; padding: 0pt;
background: none repeat scroll 0% 0% transparent; border-style: none;
float: none;">
<iframe width="100%" scrolling="no" frameborder="0" vspace="0"
tabindex="-1" style="position: static; left: 0pt; top: 0pt; width:
32px; height: 20px; visibility: visible;"
src="https://plusone.google.com/u/0/_/+1/button?hl=en-US&amp;jsh=r%
3Bgc%2F22203364-e7648d15#url=http%3A%2F%2Flocalhost%
2FPAGENAME&amp;size=medium&amp;count=false&amp;id=I1_1309900397508&amp
;parent=http%3A%2F%
2Flocalhost&amp;rpctoken=119786061&amp;_methods=onPlusOne%2C_ready%
2C_close%2C_open%2C_resizeMe" name="I1_1309900397508" marginwidth="0"
marginheight="0" id="I1_1309900397508" hspace="0"
allowtransparency="true"></iframe>
</div>

notice the width on that is now 32px.. whereas your code any my previous code , before crash, was 100%?

[edited by: alt131 at 4:57 pm (utc) on Jul 6, 2011]
[edit reason] Side Scroll [/edit]

[Kickedout]

@londrum though sad, I had to do what you suggest because nothing worked with css, and can't keep spending time on this.

@SuzyUK Thanks a lot for all your time, didn't work for me but I appreciate your help. Same for all the rest who posted here.

[SuzyUK]

@kickedout no worries, sometimes it's best just to get it done ;) -

though having seen a link to the page I see it is quirksmode (IE5 rendering) if you continue to run across things that don't quite work as expected this could be a reason why..

your present Doctype, trigger Quirks rendering

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

you can re-trigger a standards rendering mode by changing to a compliant Doctype like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">

or even the much neater new one

<!DOCTYPE html>