Should be a simple IE7 css fix, but I can't figure it out

Check out http://campbellcustomcoatings.com/ in something other than IE7, then in IE7. You can see t开发者_C百科hat in IE7, the facebook like button is more to the right and up. I'd like to push it down in IE7 as it is in any other browser. I've tried for over an hour and I can't get it to budge.

I changed the following for IE7 and it seemed to place the button in a similar position to how it looks in Chrome.

#fblike {
    margin-left:57px;
    margin-top:10px;
}

I think the problem is coming from the floated <li> items. If you highlight the elements using Chrome DOM browser (F12 then select the Elements tab) you can see that because floats exist, the "nav", "container" and "fblike" <div>s do not strictly contain all the child elements. You could create a horizontal navigation without using floats. A list apart has a nice article on lists which may help cross-browser rendering issues (which I am always getting with floats!)

Just add some left and top margin to the iframe. to do this for just IE7, do:

*margin-top:20px; /*20 looked good for me */
*margin-left:20px; 

Keep in mind that this won't validate as legit CSS (at least, i don't think it does) but other browsers will ignore it and it works fine.

I know exactly what you're talking about as I have the same issue. The button looks different (size and position) in various versions of IE than in other browsers.

However, you cannot modify or apply CSS to a Facebook Like Box plugin because its content is contained within an <iframe> element coming from the Facebook server.

The only styling options you have are the ones given to you by Facebook.

https://developers.facebook.com/docs/reference/plugins/like-box/

More info:

Embedded Facebook Like-Box won't let me style it. Why?

Adding CSS to Facebook Like Box