Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Question Can't center the Facebook Like button!

    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:
    Code:
    <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:
    Code:
    <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?
    Last edited by MancunianMacca; 05-28-2012 at 09:08 PM. Reason: Did <code> instead of [code]

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello MancunianMacca,
    iFrames are so weird...

    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto


    To center your facebook iframe, you will need to add display: block; as well.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    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!)

  • #4
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Anyone Else? It's really bugging me this!

  • #5
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Worked it out for myself yay !


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •