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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts

    CSS for Facebook 'Like' button on Wordpress

    Hey there,

    Basically I am trying to get the Facebook 'Like' button to appear on each page of my Wordpress site, in the same position (on the navigation bar at the very left). For some reason my bodge job of CSS seems to work on SOME browsers on any page other than index.php. For example, in Safari on a Mac it works fine. In IE it doesn't show at all, and in Firefox it's in the wrong position.

    The site is
    Code:
    www.mandylansdale.co.uk
    The HTML for the button is in header.php and is:

    Code:
    <div class="og">
    	<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.mandylansdale.co.uk/" layout="button_count"></fb:like>
    	</div>
    And the CSS for the button is :

    Code:
    DIV.header .og				{position: absolute; top: 134px; left: 20px; z-index: 999;}
    The CSS is coded by someone who hasn't learned CSS...me...so I'd appreciate any help available! Thanks!

  • #2
    New Coder
    Join Date
    Aug 2010
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Any ideas at all? I'm sure it's not hard to solve. Cheers!

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The page to which you link does not appear to include that html (or a Facebook icon)...

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    That seems to be part of the problem. Click on any other page and you may or may not see it. It appeared on the homepage before I messed around with the CSS, the HTML is actually in my header.php file so it should show up on every page.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Right, it appears consistently on the other pages, provided I've got javascript enabled. I'm guessing it's coming from a plugin. Are you using a different template on your home page than the other pages?

  • #6
    New Coder
    Join Date
    Aug 2010
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Right, it appears consistently on the other pages, provided I've got javascript enabled. I'm guessing it's coming from a plugin. Are you using a different template on your home page than the other pages?
    Yes I am.

    Home page template:

    Code:
    <?php
    Template Name: HomePage
    */
    ?>
    <?php
    	get_header("main");
    ?>
    
    <div class="boxes_3col">
    	<div class="box1_3col">
    		<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Home Page Box1')){}?>
    	</div>
    	
    	<div class="box2_3col">
    		<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Home Page Box2')){}?>
    	</div>
    
    	<div class="box3_3col">
    		<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Home Page Box3')){}?>
    	</div>
    	<div class="clear"></div>
    </div>
    
    
    <?php /*get_sidebar(); */?>
    <?php get_footer(); ?>
    
    <!-- PAGE.PHP -->
    Default page template:

    Code:
    <?php
    	get_header();
    ?>
    
    <div class="box_full subpage">
    	<div class="rightcolumn">
    	<div class="box_body">
    	<div class="box_top"></div>
    		<div class="contents">
    			<?php get_sidebar()?>
    			<div class="page">
    			<div class="page_border">
    				<h1><?php the_title(); ?></h1>
    				<?php the_content();?>
    			</div>
    			</div>
    			<div class="clear"></div>
    		</div>
    		<div class="clear"></div>
    	<div class="box_down"></div>
    	</div>
    	</div>
    </div>
    
    
    <?php /*get_sidebar(); */?>
    <?php get_footer(); ?>
    
    <!-- PAGE.PHP -->

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Then your home page is calling header-main.php rather than header.php, via:

    Code:
    get_header("main");
    That might be the issue.

  • Users who have thanked SB65 for this post:

    JBmedia (10-25-2010)

  • #8
    New Coder
    Join Date
    Aug 2010
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Then your home page is calling header-main.php rather than header.php, via:

    Code:
    get_header("main");
    That might be the issue.
    You're right! So the button is fixed for the homepage, now there is just my poor CSS and browser compatibility problems. I couldn't see the button at all in Internet Explorer when I tested the site, however it seems okay in Firefox and Safari on my Mac.

    Thanks so much for your help, it's really appreciated

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The element is there in IE7 (haven't checked IE8), but hidden beneath the div .top-home. IE is a pain when it comes to z-index, but have a try with adding z-index:-1 to .top-home.

  • Users who have thanked SB65 for this post:

    JBmedia (10-25-2010)

  • #10
    New Coder
    Join Date
    Aug 2010
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    The element is there in IE7 (haven't checked IE8), but hidden beneath the div .top-home. IE is a pain when it comes to z-index, but have a try with adding z-index:-1 to .top-home.
    Thanks, I've changed the z index from 50 (the default setting) to -1. Still looks okay in Firefox and Safari, so hopefully this will have worked!

  • #11
    New Coder
    Join Date
    Aug 2010
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Ah...big problem here. Setting the z index for .top-home to -1 means that the navigation links aren't clickable.

    What do you think?

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Is there any reason that the facebook div is within #header? Can it be placed, and positioned, directly within #navwrap instead? That should avoid the issue in the first place.

  • Users who have thanked SB65 for this post:

    JBmedia (10-25-2010)

  • #13
    New Coder
    Join Date
    Aug 2010
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Is there any reason that the facebook div is within #header? Can it be placed, and positioned, directly within #navwrap instead? That should avoid the issue in the first place.
    I made
    Code:
    div.navwrap .og				{position: absolute; top: 134px; left: 20px;}
    however the button just appears centred at the top of the page now.

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    All you've changed there is the css. At the moment the #og div within your html is within #header. What I'm saying is can this div be placed within #nav-wrap within your html. You'd need to edit your header.php and/or page.php (probably) file to achieve this.

    Paste you header.php if this doesn't make sense.

  • Users who have thanked SB65 for this post:

    JBmedia (10-25-2010)

  • #15
    New Coder
    Join Date
    Aug 2010
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    All you've changed there is the css. At the moment the #og div within your html is within #header. What I'm saying is can this div be placed within #nav-wrap within your html. You'd need to edit your header.php and/or page.php (probably) file to achieve this.

    Paste you header.php if this doesn't make sense.
    This isn't going well, totally didn't click save changes after changing the HTML. Arghh. I'll try it again.

    EDIT: Okay, changed the header.php HTML and also the CSS properties, so it's working fine on everything but the homepage, which uses homepage.php as a template. I can't think of what to put where now to make sure that the homepage works.

    Really sorry about this, I am learning though!
    Last edited by JBmedia; 10-25-2010 at 07:45 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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