...

View Full Version : CSS for Facebook 'Like' button on Wordpress



JBmedia
10-24-2010, 07:51 PM
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
www.mandylansdale.co.uk

The HTML for the button is in header.php and is:


<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 :


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! :)

JBmedia
10-25-2010, 09:48 AM
Any ideas at all? I'm sure it's not hard to solve. Cheers!

SB65
10-25-2010, 01:02 PM
The page to which you link does not appear to include that html (or a Facebook icon)...

JBmedia
10-25-2010, 01:17 PM
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.

SB65
10-25-2010, 01:54 PM
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?

JBmedia
10-25-2010, 01:59 PM
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:


<?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:


<?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 -->

SB65
10-25-2010, 02:38 PM
Then your home page is calling header-main.php rather than header.php, via:


get_header("main");


That might be the issue.

JBmedia
10-25-2010, 02:47 PM
Then your home page is calling header-main.php rather than header.php, via:


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 :)

SB65
10-25-2010, 02:59 PM
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.

JBmedia
10-25-2010, 03:04 PM
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!

JBmedia
10-25-2010, 06:45 PM
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?

SB65
10-25-2010, 07:04 PM
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.

JBmedia
10-25-2010, 07:20 PM
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
div.navwrap .og {position: absolute; top: 134px; left: 20px;} however the button just appears centred at the top of the page now.

SB65
10-25-2010, 07:29 PM
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.

JBmedia
10-25-2010, 07:33 PM
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! :)

SB65
10-25-2010, 07:53 PM
Um, earlier, the home page was using header-main.php - if that's still the case that's what you need to edit.

JBmedia
10-25-2010, 08:00 PM
Um, earlier, the home page was using header-main.php - if that's still the case that's what you need to edit.

Ah...good one. I seriously need to organise my files more so I know what the hell I am doing.

Thank you SO much, all is working well at my end now!! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum