[Plugin: Buddybar Widget] "Notices" and "Friends" overlap

Can you give me a link? I’m not sure how they could be overlapping…

Each section has a height of 100px, which gives them enough clearance for all the links in that section. They shouldn’t overlap unless there’s something weird in your theme’s CSS.

I can’t give a link, because the page isn’t live, but I’ll post a screen shot https://tinypic.com/r/zt9isp/7 <- sorry couldn’t figure out how to upload photos on this thread.

Very odd. It has something to do with the CSS, but I wouldn’t be able to get more specific without seeing the page. Are you using Chrome or Firefox? If so, you can use Chrome’s Dev Tools or Firebug for Firefox to inspect the CSS settings and see what’s conflicting. I’m betting something in your theme’s CSS is overriding the section height. The Activity and Messages sections should be the exact same height so the other boxes float underneath automatically without overlapping like that.

I’ve played around with my theme (custom community for buddypress)’s settings, but I can’t seem to fix it…One interesting thing is that when I use firebug and use the element select tool, the notify and friends fall under the same element (well that’s how it looks). Upon further investigation of the CSS via firebug, this may be the code interrupting it?

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

is the “display:block” the problem?

This seems like what CSS is used (adminbar.css)

body {
	padding-top: 25px;
}

#wp-admin-bar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	height: 25px;
	font-size: 11px;
	width: 100%;
	z-index: 1000;
}
	#wp-admin-bar .padder {
		position: relative;
		padding: 0;
		width: 100%;
		margin: 0 auto;
		background: url( ../images/60pc_black.png );
		height: 25px;
	}
		body#bp-default #wp-admin-bar .padder {
			min-width: 960px;
			max-width: 1250px;
		}

		body#bp-default.activity-permalink #wp-admin-bar .padder {
			min-width: 960px;
			max-width: 960px;
		}

#wp-admin-bar * { z-index: 999; }

#wp-admin-bar div#admin-bar-logo {
	position: absolute;
	top: 5px;
	left: 10px;
}

#wp-admin-bar a img {
	border: none;
}

#wp-admin-bar li {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 100%;
	text-align: left;
}

#wp-admin-bar li a {
	padding: 7px 15px 7px 15px;
	color: #eee;
	text-decoration: none;
	font-size: 11px;
}
	#wp-admin-bar li.alt { border: none; }

	#wp-admin-bar li.no-arrow a {
		padding-right: 15px;
	}

	#wp-admin-bar ul li ul li a span {
		display: none;
	}

#wp-admin-bar li:hover, #wp-admin-bar li.hover {
	position: static;
}

#admin-bar-logo {
	float: left;
	font-weight: bold;
	font-size: 11px;
	padding: 5px 8px;
	margin: 0;
	text-decoration: none;
	color: #fff;
}
	body#bp-default #admin-bar-logo { padding: 2px 8px; }

/*******************/

#wp-admin-bar ul { /* all lists */
	margin: 0;
	list-style: none;
	line-height: 1;
	cursor: pointer;
	height: auto;
	padding: 0;
}

#wp-admin-bar ul li { /* all list items */
	padding: 0;
	float: left;
	position: relative;
	background: url( ../images/admin-menu-arrow.gif ) 88% 53% no-repeat;
	padding-right: 11px;
}
	#wp-admin-bar ul li.no-arrow {
		background: none;
		padding-right: 0;
	}

	#wp-admin-bar ul li ul li {
		background-image: none;
	}

#wp-admin-bar ul li.align-right {
	position: absolute;
	right: 0;
}

#wp-admin-bar ul li a {
	display: block;
}

#wp-admin-bar ul.main-nav li:hover, #wp-admin-bar ul.main-nav li.sfhover, #wp-admin-bar ul.main-nav li ul li.sfhover {
	background-color: #333;
}

/* second-level lists */

#wp-admin-bar ul li ul {
	position: absolute;
	width: 185px;
	left: -999em;
	margin-left: 0;
	background: #333;
	border: 1px solid #222;
	-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius-topleft: 0;
	-webkit-border-top-left-radius: 0;
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
}
	#wp-admin-bar ul li > ul {
		border-top: none;
	}

	#wp-admin-bar ul li ul a {
		color: #eee;
	}

#wp-admin-bar ul li ul li {
	float: left;
	width: 174px;
	margin: 0;
}
	#wp-admin-bar ul li ul li:hover a {
		color: #fff;
	}

#wp-admin-bar ul li div.admin-bar-clear {
	clear: both;
}

#wp-admin-bar ul.main-nav li ul li:hover, #wp-admin-bar ul.main-nav li ul li.sfhover, #wp-admin-bar ul.main-nav li ul li.sfhover {
	background-color: #222;
}

/* third-and-above-level lists */

#wp-admin-bar ul li ul ul {
	margin: -25px 0 0 184px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
	#wp-admin-bar ul li ul li:hover ul li a {
		color: #eee;
	}
		#wp-admin-bar ul li ul li ul li:hover a {
			color: #fff;
		}

#wp-admin-bar ul li:hover ul, #wp-admin-bar ul li ul li:hover ul, #wp-admin-bar ul li.sfhover ul, #wp-admin-bar ul li ul li.sfhover ul  {
	left: auto;
}

#wp-admin-bar ul li.align-right:hover ul {
	right: 0;
}

#wp-admin-bar ul li:hover ul ul, #wp-admin-bar li.sfhover ul li ul {
	left: -999em;
}

/* Menu item css */

#wp-admin-bar img.avatar {
	float: left;
	margin-right: 8px;
}

#wp-admin-bar span.activity {
	display: block;
	margin-left: 34px;
	padding: 0;
}

#wp-admin-bar ul.author-list li a { height: 17px; }

#wp-admin-bar ul li#bp-adminbar-notifications-menu a span {
	padding: 0 6px;
	margin-left: 2px;
	background: #fff;
	color: #000;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

anything conflicting?

Maybe it’s a problem with the “groups” area, because there is a giant space between the friends category and groups category. Is it possible groups is pushing friends up into the messages area?

The CSS for the Admin bar shouldn’t affect the BuddyBar Widget at all. Since you have Firebug, try inspecting the widget and turning off each line of CSS one a time until it changes. That will show you where the problem lies. It’s definitely a CSS issue, I’m still betting it’s something in your theme that’s affecting it, I’m just not sure how exactly.