sorting columns in pageblocktable

I would have to presume that the problem stems from the data appearing as an actual string to the sorting algorithm, thus producing lexicographical sorting (e.g. sorting as a string). You have plenty of choices to choose from if you want to introduce easy sorting: AngularJS has an orderBy directive, jQuery has a tableSort, module you can add into it (and others, just search for them), as well as most other JS frameworks. Of course, it would be fairly easy to roll your own sorting command in about 20-40 lines of code, as outlined on StackExchange.

Internet Explorer 7 and 8 are shortly losing their support in salesforce.com, and it is generally time to upgrade as developers as a whole work towards supporting standards instead of the browser/feature detection fragmented past spawned by the browser wars. Make sure you're testing your code in IE 9 or, even better, IE 10, which has already dwarfed previous versions, largely thanks to the automatic upgrades provided by Microsoft.

Personally, I would write my own table sorting algorithm using a data attribute or JavaScript function parameter on the header column that would instruct my function to treat the values as either text, numbers, or dates, and parse the values in each column appropriately with some handy regular expressions to strip numbers down to something I could pass into parseFloat, sort the resulting set of data, then re-order the tables. I don't think this would weigh in much over 100 lines of code, tops, given the links I provided above.

I have followed the steps in this link and I was able to fix the sorting on my apex:pageblocktable.

It uses the jQuery tablesorter plugin to sort the table client-side.

<apex:page standardController="Opportunity" tabStyle="Opportunity" extensions="myext" id="thepage">
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"/>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    <apex:includeScript value="{!URLFOR($Resource.tablesorter, 'jquery.tablesorter.min.js')}"/>

    <script type="text/javascript">
        $j = jQuery.noConflict();    
        $j(document).ready(function () {
        $j("[id$=theaddrs]").tablesorter();
        });    
    </script>

    <apex:pageBlock id="theaddrsblock">
        <apex:pageBlockTable value="{!Addrs}" var="a" id="theaddrs" styleClass="tablesorter" headerClass="header">
            <apex:column>
                <apex:facet name="header">
                    <apex:outputText styleClass="header" value="{!$ObjectType.Address__c.Fields.Street__c.Label}" />
                </apex:facet>
                <apex:outputText value="{!a.Street__c}" />
            </apex:column>
        <!-- the other columns, closing tags, and that's it -->