I have implemented a Facebook Like button into my site.
I wanted to make other buttons which fit the same style as the like button. I made them the same height as the like button, yet regardless my button would appear one pixel above, or below the like button – this was really obvious and looked bad.
Now I am relatively new to CSS, and I dont know what best practices are.
Using Firebug, I tracked back, and worked out that FBML (however it works) is producing a span within which the like button is contained. I assumed this had something to do with the problem.
My resolution was as follows
<div style="display: inline; position: relative; top: 1px;">
<img src="images/button.png">
</div>
<fb:like layout="button_count" show_faces="false"></fb:like>
I would be really grateful (for my knowledge) if someone could explain why the FB like button was showing this behaviour, and if how I have fixed it is the best resolution?
Also as a general aside… I have eventually gotten my page displaying exactly as I want.
To do this I have utilized 25 <div>s. This seemed a lot – although my page is somewhat complicated. Is this OK?
Thanks a lot!
EDIT
My div usage is for positioning elements. For example, I want some content to appear on the left and some on the right, so i have a two divs of 50% width side by side.
Then I want a button to appear centered so I have a div with text-align:center; I have done this as i was informed that this was preferable to </center.
After this again i want things on the left and right so i have the same class as the first point output twice again.. This is padded, I want a border around the content. As such I have another div inside which has border:1px solid black;
Is this correct/acceptable usage?
Thx
Have you checked the image doesn’t include any white space to confuse the spacing issue?