Hey Guys, been a while since I've been on but I have hit a little bit of a problem! If you would look at http://www.mancunianmacca.co.uk you will notice on my side social scroller the Facebook like button is not centering. I have tried many things to get it to center. For example- Containing it with the <center></center> tags and increasing border size. But no luck. Could you please take a look. Here is the code for my social scroller:

<style>
div.floating-menu {position:fixed;background:#BFFFFFF;border:2px solid #BFFFFFF;width:90px;z-index:100;border-radius: 15px;}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
</style>
<div class='floating-menu'>
<a class='body_con' href='http://www.facebook.com/mancunianmacca' title='Facebook!'><img height='56' src='https://lh6.googleusercontent.com/-FlLEke94kTY/T7pk8ufZ_yI/AAAAAAAAAJw/E_anQSfmqkg/s545-c-k/facebook.png' width='56'/>
</a>
<a class='body_con' href='https://twitter.com/#!/MancunianMacca' title='Twitter!'><img height='56' src='https://lh4.googleusercontent.com/-f29DrLnMB9A/T7pk8jBjnoI/AAAAAAAAAJ4/HEg4JEN4a2Q/w241-h241-n-k/twitter.png' width='56'/>
</a>
<a class='body_con' href='http://www.youtube.com/user/mrbeanlver101' title='YouTube!'><img height='56' src='https://lh6.googleusercontent.com/-16G6WumlBAY/T7pk8sDd1yI/AAAAAAAAAJ0/hmmtvRHflRk/w241-h241-n-k/youtube.png' width='56'/>
</a>
<iframe allowTransparency='true' frameborder='10' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.mancunianmacca.co.uk&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces =false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90&amp;appId=385197641532923' style='border:10px; overflow:hidden; width:450px; height:90px;'/>
</div>


And the facebook IFrame is:

<iframe allowTransparency='true' frameborder='10' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.mancunianmacca.co.uk&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces =false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90&amp;appId=385197641532923' style='border:10px; overflow:hidden; width:450px; height:90px;'/>


Any Ideas?

Hello MancunianMacca,
iFrames are so weird...:rolleyes:

To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto


To center your facebook iframe, you will need to add display: block; as well.

Thanks for the help but I don't really understand you! What am I to do? Just add display: block; to the I-Frame. (Sorry I'm not the best at this stuff!)

Anyone Else? It's really bugging me this!

Worked it out for myself :D yay !