Hi,
Just had a quick look using dev tools in Chrome, and it looks like the hover tab issue is because you’ve got a border-bottom set on a:hover, as well as various other anchor hovers. Either look through and remove all of those, or add a bottom border to the ‘unhovered’ state.
and the positioning of the select box is because of:
div.item-list-tabs ul li.last {
margin: 7px 20px 0 0;
}
You could try changing the right margin (the 20px one) on that…
It’s well worth using dev tools if you don’t already. Open Chrome and press F12. For anchor hover states and such to chow, make sure you select the ‘show inherited’ box. Then, you can select the magnifying glass tool and hover over items of interest in the main region which will highlight the relevant CSS in the panel below.
(Sorry if you know about this – don’t mean to patronize, but the info might be useful for others).
Good luck.
edit// X posted with above
There are a number of properties that won’t suit your theme such as 100% width and margin left that is causing the issue for order-by li selector.
All those styles are maintained from bp.css in the template pack plugin folder, you can either try and override those styles using the themes style.css file or disable those styles and copy them over to your theme somewhere more convenient to work on. You will probably need to get comfortable with using Firebug to identify what rulesets are managing a particular aspect of layout elements.
Alternatively if you can wait BP 1.7 will dispense with the need for template pack and allow BP to work with any theme making life much easier for non coders.