Facebook like button not aligned in Opera and IE8-

HTML & CSS
1

Hi,

I inserted Facebook like button to my website and it looks fine on Chrome, Firefox, Safari, acceptable in IE 9 but it is a little below the line on Opera (11.51). It looks like this:

I tried many things including padding, line-height, list etc. but they didn’t work. Here is the code I have:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="/style.css" />
	<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
</head>
<body>
	<div id="container">
		<div id="header">
			<div id="header-left">
				<div id="logo"><a href="http://site.com/" title="Site"><img src="/logo.png" width="100" height="40" title="Site" alt="Site" /></a></div>
			</div>
			<div id="header-right">
				<div id="like">
					<div class="fb-like" data-href="http://site.com/" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" data-font="trebuchet ms"></div>PicRank
				</div>

and

body {
	margin: 0;
	background: #eee;
	font-family: 'trebuchet ms', helvetica, sans-serif;
}
img {
	border-style: none;
}
#container {
	margin: auto;
	width: 810px;
	background: #fff;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
#header {
	padding: 20px 20px;
	height: 46px;
	border-bottom: 1px solid #ddd;
}
#header-left {
	float: left;
}
#logo {
	margin: 6px 0 0 0;
}
#header-right {
	float: right;
	line-height: 2em;
}
#like {
	text-align: right;
	padding: 0 6px 0 0;
}
#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#navigation li {
	display:inline;
}

Also, the like button is messed in IE8 and lower. Thanks for any ideas.

2

HI,

Try this:


.fb-like img,
#like iframe,
.fb_iframe_widget{vertical-align:middle}
3

Paul, thank you very much. I used the following code and now it is perfectly aligned in IE9 and Opera.


#like iframe {
	vertical-align: middle;
}

The problem with IE8- still exists.

Here is the normal layout in all other browsers:

Here is how it looks like in IE8/7/6:

Somehow, Like button and “Website” text does not stay in one line and that pushes the navigation down.

No change in the HTML code, here is the new CSS code:


body {
	margin: 0;
	background: #eee;
	font-family: 'trebuchet ms', helvetica, sans-serif;
}
img {
	border-style: none;
}
#container {
	margin: auto;
	width: 810px;
	background: #fff;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
#header {
	padding: 20px 20px;
	height: 46px;
	border-bottom: 1px solid #ddd;
}
#header-left {
	float: left;
}
#logo {
	margin: 6px 0 0 0;
}
#header-right {
	float: right;
	line-height: 2em;
}
#like {
	float: right;
	padding: 0 6px 0 0;
}
#like iframe {
	vertical-align: middle;
}
#navigation {
	clear: both;
}
#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#navigation li {
	display:inline;
}
#navigation li a {
	padding: 3px 6px;
	font-weight: bold;
	text-decoration: none;
	color: #0090ae;
}
#navigation li a:hover {
	text-decoration: underline;
}

IE is such a waste of time for the designers.

4

I’d need to see the site to find a solution because the code I gave above is working fine for me in IE8. I’ll either need a link or at least a full working example that exhibits the problem you mention.

5

I was working on local server but uploaded the files to my test domain:

http://thesoftwaretruth.com/

Thanks again.

6

It’s working ok in IE8 but IE7/6 are pushing to a new line

You need this fix:


.fb-like{display:inline-block}
* html .fb-like{display:inline}/* ie6 inline block fix*/
*+html .fb-like{display:inline}/* ie7 inline block fix*/
7

It worked. Thanks a lot Paul.

8

Hi Paul,

I got the similar kind of problem in button alignment.
Buttons are not aligned properly. Please see the attached screen shot.
We have three buttons out of which two are having icons attached to it and one without icon, so for the buttons having icons attached contain this css

.btn_secondary {
.button;
.gradient(@secondarybuttoncolor, (darken(@secondarybuttoncolor, 20%)));
color: @secondarybuttontextcolor;
border: 1px solid (darken(@secondarybuttoncolor, 20%));
border-top: 1px solid (darken(@secondarybuttoncolor, 30%));
border-bottom: 1px solid (darken(@secondarybuttoncolor, 40%));

/* We need the hover states, or the colors default back to the .button base class */
&:hover{
		.gradient((darken(@secondarybuttoncolor, 20%)), @secondarybuttoncolor);
		color: (lighten(@secondarybuttontextcolor, 20%));
		border: 1px solid (darken(@secondarybuttoncolor, 40%));
	}

}

.icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: text-top;
}
 .icon_next {
   .icon;
   background: url("../images/icons/next.png") 0 0 no-repeat;
   margin-left: .25em;
   margin-right: -.5em;
}
.icon_previous {
   .icon;
   background: url("../images/icons/previous.png") 0 0 no-repeat;
   margin-right: .5em;
   margin-left: -.5em;
}

While the one which does not have icon attached contains this css

.btn_secondary {
.button;
.gradient(@secondarybuttoncolor, (darken(@secondarybuttoncolor, 20%)));
color: @secondarybuttontextcolor;
border: 1px solid (darken(@secondarybuttoncolor, 20%));
border-top: 1px solid (darken(@secondarybuttoncolor, 30%));
border-bottom: 1px solid (darken(@secondarybuttoncolor, 40%));

/* We need the hover states, or the colors default back to the .button base class */
&:hover{
		.gradient((darken(@secondarybuttoncolor, 20%)), @secondarybuttoncolor);
		color: (lighten(@secondarybuttontextcolor, 20%));
		border: 1px solid (darken(@secondarybuttoncolor, 40%));
	}

}

This works fine on my local on ie8 and ie7, but our QA is facing issue on ie8.

can you please suggest what could be the reason ?

9

Hi,

I’d need to see the page in question to debug properly or at least a working demo with (real) css and html :slight_smile:

I wouldn’t use text-top on the buttons as that is unreliable cross browser. Make sure all buttons are inline-block and vertical-align:middle and that there are no erroneous margins on them. If it is displaying correctly in one IE8 and not in someone else’s IE8 then its usually because they have tripped compatibility mode in error via the browsers controls. Compatibility mode is a waste of time in most cases as it breaks more things than it fixes.

However, it could be one of many other things and without seeing the page in question its hard to guess.

10

Hi Paul,

Thanks for your help, inline-block and vertical align trick work for me. :slight_smile:

Govind