i think you should modify both the buddypress home and the member theme: the base.css file or the custom.css file for both themes. Change the body, the left, right, center column width, and the narrow and wide column.
Allright.. I centered buddypress and the columns.
What really fucks me up is Internet Explorer which shows avatars and infos on wrong places when making window smaller. Firefox is perfect.
Do you know how to fix that? Should i give body width in percent or pixels? I tried both but both were causing problems on IE same as for the columns.
Help me ^^
yes, you have that problem in the original buddypress demo too. There is something wrong in stylesheets, but honestly i think it’s a pain to rewrite all stylesheets of buddypress: they are a lot!
i think the problem is given by divs positioned using distances from margin left or right. And so when you resize the window, the distance from margins change, and you shall refresh the page to correctly rebuild the layout.
Maybe, you just need to rewrite css code for left, center, right, narrow, wide columns and it’not a big pain.
Well this is some kind of confusing.. I open my site with internet explorer. It shows correctly on maximum browser size. But when i smaller the browser avatars, buttons and activity are in same position as with maximum size. When I refresh Internet Explorer everything shows up correctly. When I go back to maximum size, avatars, buttons and activity are in same position as with small size. When I refresh, again everything looks correctly, I never had something like this before when working on stylesheets.. Do you have a suggestion? Did you try it?
cheers
I think I may have experienced the same problem with buddypress. The only solutuion I’ve found so far is to remove “position: relative;” from most of the css file attributes.
I forgot to ask… If there’s and easier way…please…someone help???
As there was no solution provided here and its been some time ago maybe this has been resolved, but its a problem that I encountered.
I haven’t fully tested this but after a hunt around I found a couple of techniquues.
Using javascript to refresh on resize between the <head> tags causes infinite loops in IE in some cases so that will not solve the problem.
I found out though that if you include position:relative in all of your main outer divs including body and body.directory in the IE fixes css files in the bphome and bpmember themes your problems should go away…
Let me know if this works for you….as I’ve only tested it locally and on IE7…
Javascript?! Good lord. Just make a site-wide.css file with one line of code in it
body {width: 970px;}
Does that not work?
Thanks, that’s a better suggestion, not really much of a coder, just stumble across solutions..
If I find something that works I try and share that, but more often than not someone else has a much better idea, so not sure if its a help or hindrance……try to steer clear of javascript where possible though 
Let me know if that works. It would go in wp-content/themes/bphome/css/site-wide.css
When I saw you all talking about using Javascript just to center a theme and give it a fixed width… I sensed someone somewhere along the line went down a rabbit hole LOL.
David,
Sorry realised that I’d already got body width at a fixed size but not in site-wide, which when looking at it now seems obvious.
Problem with IE however is in the calculating of sizes. When a user resizes the screen some elements are left floating and are not in line with the rest of the page. Hitting refresh works but it doesn’t help the user experience.
The body width works fine in most cases, but the need to fix the rendering bug in IE is what has been causing the problem. That is what the javascript has been about. But in drilling down through various forums, the answer has been to try and fix the css. The problem seems to be the inheritance or lack of it of position:relative in IE. Adding this to a top-level div seems to work (for me anyway)…
Hope that makes sense…..
Ahh. I see! I gotcha now.
I have seen this behavior in IE when you try to put a width on the body tag… which the default theme does. The simple solution is just to get rid of any width declarations on body (or maybe 100% would work) so the entire problem goes away. Just add a wrapper div around your entire site and put your page width on that. Open it as the first thing after body and close it just before the close body tag. Give it an id and then apply your width to that… so…
HTML
<html>
<body>
<div id="wrapper">
[everything else]
</div>
</body>
</html>
CSS in site-wide.css
body {
min-width: 100%;
max-width: 100%;
}
#wrapper {
width: 970px;
}
Of course… this means editing your theme files (header and footer)… not just overriding some CSS. But I think this would be a better solution than relying on javascript hacks. Also, I have not tested this in IE… so I’m not 100% sure it will work. You might have to edit the base.css files to completely remove the min-max width declarations rather than just overriding them with 100% in the site-wide.css file.
