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

Question

Check out http://campbellcustomcoatings.com/ in something other than IE7, then in IE7. You can see that 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 put IE8 into compatibility view (sort-of simulation of IE7) because I don't have IE7 and the Like button just disappeared. I think you might have more problems than just CSS. — rockerest, Jun 08 '11 at 17:56
Try it again. i was just making some changes and messed some things up. It should be working again now. — Catfish, Jun 08 '11 at 18:11

score 1 · Accepted Answer · answered Jun 19 '11 at 21:42

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

score 0 · Answer 2 · answered Jun 08 '11 at 18:15

0

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.

answered Jun 08 '11 at 18:15

Thomas Shields

8,874
5
42
77

I have an IE7 style sheet and I tried that already. Doesn't do anything. – Catfish Jun 08 '11 at 18:17
@Catfish from what i can see, you tried that on the parent `div` ...have you tried it on the actual `iframe`? – Thomas Shields Jun 08 '11 at 18:20
@Catfish interesting. It's working when i apply it from IE dev tools. I'm intrigued. *keeps fiddling* – Thomas Shields Jun 08 '11 at 18:22
@Catfish what about applying some IE-specific padding to the parent div? (if it works i'll edit the answer) – Thomas Shields Jun 08 '11 at 18:25

score 0 · Answer 3 · edited May 23 '17 at 12:04

0

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

edited May 23 '17 at 12:04

Community

1
1

answered Jun 17 '11 at 16:07

Sparky

98,165
25
199
285

I think I just need to set styles to the div that I put around the IFrame and I think it should work, but I can't figure it out for sure. – Catfish Jun 17 '11 at 18:27
@Catfish: Yeah, I have mine in a container div but it has a background color. So my container always appears in the same position even if the button inside moves around or changes. – Sparky Jun 17 '11 at 18:35
can't you apply the styles to the iframe then? – Catfish Jun 17 '11 at 18:49
@Catfish: I believe the `` styles are limited to what FB allows, size, etc. The container is a fixed width with a dynamic height, padding, colored background and rounded corners. The `<iframe>` is inside with a "fixed" width & height. – Sparky Jun 17 '11 at 18:58

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

3 Answers3