CSS Alignment of images. There is always 1px difference. Why how?

Question

Hey guys. I have implemented the Facebook Like button on my website.

I wanted to make other buttons that match the same style as the button. I made them the same height as the button, but despite the fact that my button will be displayed one pixel higher or lower than the similar button - it was really obvious and looked bad.

Now I'm relatively new to CSS, and I don't know what best practices are.

Using Firebug, I tracked and found out that FBML (however it works) creates a range that contains a similar button. I suggested that this has something to do with the problem.

My solution 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 very grateful (as far as I know) if someone could explain why the FB button showed this behavior, and if I fixed it, is this the best resolution?

Just as generic aside ... I ended up getting my page displaying what I want. For this, I used 25 <div> s. It was a lot, although my page is somewhat complicated. This is normal?

Thanks a lot!

EDIT My div is used to position elements. For example, I want some content to appear on the left, and some on the right, so I have two divs with a width of 50% side by side.

Then I want the button to look centered, so I have a div with text-align: center; I did this because I was informed that it is preferable

After that, again I want things left and right, so again I get the same class as the first output of the output. This is complemented, I want a border around the content. So I have another div inside which there is a border: 1px solid black;

Is this the correct / acceptable use? thanks

Answer 1

Have you checked that the image does not contain spaces to confuse the problem with the interval?

Answer 2

Not sure if this is still a problem for you, but I recently had this problem with the image, for some reason I was getting extra 2px of space at the bottom of the image without swearing, how many other styles I shared my page, but I was able to fix is ​​very easy:

  .divname img { display:block; } 

This may or may not work for you.

Answer 3

Thomas, in Firefox, try highlighting the "Like" button, right-clicking and choosing the type of source selected. I looked at three sites to check their consistency, and all three show that the text "Like" is enclosed in a table, div, span and anchor; everyone can change the interval depending on how the styling is done.

If you have firebug installed in FF, you can play around with CSS and see what you need to make your alignment a little easier. Keep in mind borders, padding, margins, line height, cell size / padding, etc.

Answer 4

sounds like 2 things may be happening

at first it is most obvious what is related to relative positioning in css, to check here for more.

the second is that it can display the default border, so add this to your styles and see what happens:

 * { border:none; } 

Answer 5

Try using CSS reset.

It looks like it could be a margin problem, a filling problem, or a border problem.

Try:

 * { margin:0; padding:0; border:0; outline:0; } 

Answer 6

I would go with Craig's answer to a stylish CSS reset style, or if you are building a complete website, maybe you can try something like a CSS framework, like 960.gs or Blueprint for example, which already include reset css behavior.

These are good solutions with relatively low performance and guarantee your website is compatible with a 99.99% cross-browser.

In another note, getting some information will help, for example, the original width and height of the image, the width and height of the image, your html markup displaying the image, and your CSS style.

Sorry for english if any error comes up.

Answer 7

Try swapping the button code in <div class="whatever"> and use the following CSS:

 div.whatever { diaplay: inline; margin-top: -1; } 

Negative fields usually work to push elements.