I have the "Facebook Social Plugin" installed and the "Facebook Like Button" widget added to the top of my right sidebar. I'd like to move this widget to be inline with my page menu but aligned to the left side with some left padding. I can create a new widget area but I'm not sure where to place it to accomplish this. Any suggestions? the site is http://www.hotels-onsale.com.

I have some menu CSS inserts and then there's the default ATA menu CSS inserts that I'll cut and paste here as reference:

div#menu1 {
padding-top: 2px;
padding-bottom: 2px;
border: solid 0px #000000;
background: #ffffff;
}
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
font-weight: bold;
}
div#menu1 ul.rMenu li a:hover {
text-decoration: underline;
}
div#menu1 ul.rMenu {
background: transparent;
}

/* Adjustments for the menu bars, which in their default
state have 1px borders plus -1px margins to avoid 1+1=2px
borders between neighbor items. */

ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; }
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px; }
ul.rMenu-hor { padding-left: 0px; }
ul.rMenu-ver li { margin-top: 0xp; }

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 6px 10px;
}

/* Space between items of page menu bar */

div#menu1 ul.rMenu li {
margin-right: 3px;
}

/* Reset margin for 2nd+ level items */

div#menu1 ul.rMenu li li {
margin-right: 0;
}

/* Removing the padding here and putting them on the sidebars instead. That way the middle column aligns nicely with the header when there are no sidebars */

td#middle {
padding: 0;
}

Thanks!
Thomas

If you put the following in ATO>Add HTML/CSS Inserts>CSS Inserts it should work in Firefox. I didn't test in IE however.

#olussierfsp_likebutton-3 {
margin-top: -43px;
position: relative;
margin-bottom: 6px !important;
}

Thanks Larry - I had to experiment a bit. I had a CSS (previous) insert (that you probably saw) to remove the bottom margin for the FB widget to space it better on the page and I commented that out and then commented out the padding you added to just first experiment with the negative value margin. At -43 px it was squatting on and hiding the horizontal border but at 47 px it works great in FFX and Chrome - without any padding. So this gets me half way there I think. I'm trying to move it to the left hand side of the menu\left hand side of the page..centered between the left margin and the home button. Any idea how to do that?

Also, and kind of more urgently, in IE my footer is sitting on my header! Any idea how to fix this? freaken ie..

Thanks!
Thomas

Well - I guess maybe I should try putting the widget at the top of the left sidebar

After moving the widget to the top of the left sidebar, I added a 15 px margin to the top of the text-5 search widget and then:

#olussierfsp_likebutton-3 {
margin-top: -55px;
position: relative;
}

and it looks great in FFX and Chrome. Is it OK to do it this way?

Also in IE, the FB widget doesn't show at all but the footer is back at the bottom. Sadly though, the site in general is still pretty hosed. It looks like there wasn't enough horizontal space to hold all the sidebars so it stacked them - plus my menu is squatting on "find a hotel sale" which is widget text-5.

So I guess I'll start searching around for ie issues - what a nightmare - any help on that would be great!

Thanks
Thomas

Update: I discovered that I had a sidebar used on another page that should not have been marked to be used on the home page so I removed the home page page number from that sidebar, got all excited, reloaded the home page, and no change.

I then discovered that the FB widget was roughly 400px wide which was likely the culprit that was kicking the other sidebars underneath td#left. I added width: 225px; to the FB widget to shorten the horizontal footprint and after an obligatory crash, ie seems to be rendering my site a little better but it's locked up now trying to download the "bullet" images and, woops, just crashed again. Hmm..ie is now just utterly not responding on my site - total "faded white" screen of death. suggestions?

I am getting the same faded white not responding in IE. Have you tried deactivating plugins to see if any of them is the culprit?

Hi Larry - Most of my plugins (and there aren't that many) are widely used, heavily tested plugins like contact-7, wp-supercache, google XML sitemaps, etc and the 2 or 3 that are maybe less known & less tested I have deactivated, cleared cache and tried again with IE8 and still I'm getting almost immediately locked up. I installed the IE7 Compatibility Plugin which semed to help a bit but still locking up almost right away. I have wp-tables-reloaded that has so much html code in it that took a lot of work (all text formatting of table entries) and I'm hesitant to deactivate that for a test. I assume that all data and settings are held intact but I've never been told that and I've never read it anywhere so I'm a little bit gun-shy to potentially cause a problem that will take hours to put back together - I'm behind enough as it is with this problem.

The problem seems to be IE locking up when downloading images. I saw a post or two on this and that IE8 may not cache all images. I did make one change to wp-supercache and set it to serve images with .htaccess instead of php.

Today I was trying some more tests and as IE was locking up, the status bar read something to the effect of, "waiting for javascript = false." Not much online about that with a quick search.

I have so much work to do and this problem is just sucking away at my valuable work time this week - any other ideas? Isn't there a utility that will tell me which file is causing a problem upon loading? I fiddled with the developer tools in IE8 but of course it locked up also. I also went to that w3 validation site and identified some CSS errors and fixed some. There are more but I don't know how big the errors are..seemed like a lot of small things but you never know.

What about that option to keep my CSS and javascript in an external file. Does that require a lot of setup? Do I need to create that file, map it, etc. Or do I just choose the option and it's automatic. Do you think that will help?

Thanks!
Thomas

New info: I have another site that uses the WP-Tables Reloaded plugin and I just opened it with no problems in IE8 so I don't think it's that plugin.

Did you find the answer? I was just looking at your site and it seemed to start loading OK in IE.

This is really interesting. I commented the code out that you helped me with that moved the Facebook Social Plugin widget up to be in horizontal alignment with the menu bar and in FFX and Chrome, the widget just showed as normally should - in the top widget location in the sidebar.

I then went to IE, thinking maybe it was that code causing things to lock up, and the page loads and looks perfect (except I don't see the facebook widget) - but only for a few seconds. Then, it doesn't lock up but it throws all of the sidebars except the left sidebar underneath it (the left sidebar.)

Then I saw the facebook widget way down, not just at the bottom of the three widgets in the left sidebar, but at the bottom of the entire stack. So then I firebugged (firebug lite for IE using favorites) the site and as soon as I clicked on inspect, the FB widget dissapeared!

So I deactivated the facebook social plugin, cleared my cache, did a CTRL F5 in IE and it loads fine, no problems.

Wow. I'm going to restore the few CSS insert adjustments I had when the widget was up aligned with the menu and then reactivate the plugin to see if still causes trouble.

So I guess I'm back to square 1 trying to find a way to put that plugin (or another if I have to use a different one) aligned with the page menu on the left side. Larry, I don't know if I mentioned this before because I had given you access to the site and I knew you'd see it but my header image is in a custom widget. Here's the ATA Style & edit HEADER AREA > Configure Header Area:

<?php bfa_widget_area('name=Header&cells=1&align_1=1&wid th_1=894&before_widget=<div id="%1$s" class="header-widget%2$s">&after_widget=</div>');?> %bar1 %page-center %bar2

maybe I need to add another custom widget area that would somehow be aligned horizontally with the page menu (%page-center) but to the left? I don't know why I have %bar1 in there - I think maybe it was for spacing.

You don't want to put another widget area. Just change cells=1 to cells=2 in the code any you should have 2 cells side by side. You should probably make a copy of the text or code in the widget area that is there now "just in case".

But my header image is pretty much the width of my site and even if I shortened it horizontally, I don't want the facebook like button way up there - I want it aligned left of the page menu..just above the horbar

I have in the past wrapped %pages in a div and left floated it. Here is an example of the general idea.

<div style="float:left;">%page-center</div> Code_For_FB_Like <hr style="clear:both;height:0;" />

The HR is a 0 height horizontal rule for clearing the float. You may need to add some right margin for spacing.

Larry - Interesting..I made sure my CSS inserts were clean and then reactivated the FB plugin. In IE, sidebars still getting stacked but no freezing. I then moved the widget to the top of the right sidebar and:

1. In FFX and Chrome, it shows fine
2. In IE it shows up at the bottom of the 3 widgets
3. In IE, even with it displaying at the bottom (incorrectly) there still seems to be a placeholder for it at the top location

Any idea why IE is throwing that widget down to the bottom of the stack while leaving it's original space empty?

Originally Posted by lmilesw

I have in the past wrapped %pages in a div and left floated it. Here is an example of the general idea.

<div style="float:left;">%page-center</div> Code_For_FB_Like <hr style="clear:both;height:0;" />

The HR is a 0 height horizontal rule for clearing the float. You may need to add some right margin for spacing.

I'm not grasping this 100% - where does this all go? Which code for the fb widget? Is this to help build a new widget area floated to the left of the page menu bar? I'm confused because my page menu bar IS %page-center

Is this to help build a new widget area left of the page menu bar that I put the FB widget into?

I just wanted to add that I deactivated the IE7 compatibility plugin and IE renders the same. I guess that's good news. Also, it's IE8 64 bit - just in case that helps.

You would put that code is the same place you put %page-center (ATO>Style & edit Header Area>Configure Header Area). In your particular case I would use something like the following. I did discover the menu won't center with page-center so instead you can use %pages and set a left margin to approximate centering the menu as I have in the example. The script in the example is for you site.

<div style="float:left;margin-left: 200px;">%pages</div> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like 
href="http://www.hotels-onsale.com/" show_faces="false" width="450"></fb:like> <hr style="clear:both;height:0;" />

I got the script code from from the Facebook developers site.

That almost does it - I just started looking at that facebook developers area as I've been developing the Hotels-OnSale Facebook page..pretty cool stuff. I first of all deactivated the plugin and then inserted the code as you indicated and it did show up to the left of the menu but all in one line, not wrapped to two lines as it is normally. This pushed the menu up off of the horbar a good bit. I then shortened the width a couple of times and when I set it to 200, it did wrap and the menu came back down to the normal spot, but the like button is on the right! just can't win How can we move this to the left?

And oh yeah, as expected, it's a little off in IE. both horbars show for some reason and below the menus & button..But this is almost there!

Could you please post the code you have the Configure Header Area box?

I just moved the fb code to the left of %pages, fiddled with the left margin of the menu (it's perfect now) and also deleted %bar1 because if you look in IE, there is a bar rendering but I removed it - is this because of the hr code you included?

In FFX and Chrome it is really close - I'd like to see if possible probably a 5 px margin to keep it off the left border and I can probably do that in "inserts" but what I still probably need help with is lowering it down so it rests on %bar2 just like the menu.

The only other issue is removing the top bar in the IE view and having the like button rest on the %bar2 also with the menu..Here's the code that is live now:

<?php bfa_widget_area('name=Header&cells=1&align_1=1&wid th_1=894&before_widget=<div id="%1$s" class="header-widget%2$s">&after_widget=</div>');?> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.hotels-onsale.com/" show_faces="false" width="230"></fb:like> <hr style="clear:both;height:0;"/><div style="float:left;margin-left:235px;">%pages</div> %bar2

I thought you wanted the FB like to be on the same row with the menu and the way you have the code now the hr tag for clearing the float is doing nothing as is the float: left for the menu bar.

Do you want your header as follows?

Widget_Area
Left_Aligned_FB Like
Centered_menu
%bar2

Or do you want it this way?

Widget_Area
FB_Like Centered_Menu
%bar2

The second:

Widget_Area
FB_Like Centered_Menu
%bar2

Looks more like it will do what I'm looking for which is to have the like button and page menu horizontally aligned so they are on the same latitude, sitting right on the %bar2 - with the like button to the left, with just a bit of margin to left of like button so it isn't flush with the left edge.

Some of the pages of my site sit on priceline's servers and there are extra steps to have them update headers and footers but right now, the page menu (with the left margin set where it is) aligns the page menu on all pages so I'd like to keep that where it is.

Here is the code I would use (may need to be tweaked) to get what you want.

<?php bfa_widget_area('name=Header&cells=1&align_1=1&wid th_1=894&before_widget=<div id="%1$s" class="header-widget%2$s">&after_widget=</div>');?> <div style="height: 25px;"><div style="float:left;margin-left: 20px;margin-right:150px;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.hotels-onsale.com/" show_faces="false" width="300"></fb:like></div> %pages</div> %bar2

This works in all three browsers - anything wrong with the code? The only funny thing is when the pages all load you can see the menu way to the left (margin-left:0px for a split second before the facebook widget code is picked up which pushes the page menu to it's proper position which is 235 px from the left edge. The width of the facebook like button is 225 px and its left-margin is 10px = all totaling 235px. That's why I set the page menu to have no left margin. Is there a better, cleaner way to do the same thing or a way to eliminate the brief flash of the menu to the left? I don't want the site to cause any seizures!

<?php bfa_widget_area('name=Header&cells=1&align_1=1&wid th_1=894&before_widget=<div id="%1$s" class="header-widget%2$s">&after_widget=</div>');?> <div style="height:25px;"><div style="float:left;margin-left:10px;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.hotels-onsale.com/" show_faces="false" width="225"></fb:like></div> <div style="float:left; margin-left:0px;"</div>%pages</div> %bar2