Facebook like button not aligned in Opera and IE8-

**nayen** · Oct 18, 2011 07:36

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:

facebook-button.png

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

HTML Code:

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

HTML 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 {
	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.

**Paul O'B** · Oct 18, 2011 11:03

HI,

Try this:

Code:

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

**nayen** · Oct 19, 2011 00:52

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

Code:

#like iframe {
	vertical-align: middle;
}

The problem with IE8- still exists.

Here is the normal layout in all other browsers:

1.png

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

2.png

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:

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.

**Paul O'B** · Oct 19, 2011 05:49

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.

**nayen** · Oct 19, 2011 06:09

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

Code:

http://thesoftwaretruth.com/

Thanks again.

**Paul O'B** · Oct 19, 2011 14:38

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

You need this fix:

Code:

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

**nayen** · Oct 20, 2011 05:17

It worked. Thanks a lot Paul.

**Govind05** · May 17, 2012 02:48

Hi Paul,

I got the similar kind of problem in button alignment.
Buttons are not aligned properly. Please see the attached screen shot.buttonalignment.JPG
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 ?

**Paul O'B** · May 17, 2012 03:17

Hi,

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

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.

**Govind05** · May 24, 2012 21:07

Hi Paul,

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

Govind

Originally Posted by Paul O'B

Hi,

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

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.

User Tag List

Thread: Facebook like button not aligned in Opera and IE8-

Thread Tools

Display

Facebook like button not aligned in Opera and IE8-

Bookmarks

Bookmarks

Posting Permissions