Strange behavior of select element when choosing options

Question

Normally when you click on a select element, the option you have selected is highlighted by default and as you scroll to other options the highlight follows the pointer. For some reason all of my selects are broken, when you scroll to other options the highlight jumps back to the original selected option and a small bit of highlight is visible underneath the element you are on on the outside margins. When you click on an option things work normally and it gets selected even though the highlight is visually being shown somewhere else, but I can't figure out whats causing it to act this way.

Image of problem:

In this example "people" was the selected option, and I have the pointer over "clubs", as you can see its very hard to tell what you are selecting. This is happening in both Chrome and Firefox and in IE the selects won't even let me pick a different option at all, as soon as the dropdown opens it closes again (selecting what you already picked).

I have been browsing for hours trying to find a fix and all I have found is this question which describes the same issue in chrome specifically. Very weird Chrome behavior in an open (focused) "select" element

Unfortunately this did not help me because I am not using any javascript on the select elements at all (I removed it as part of trying to figure out what the problem is). I also removed the selected="true" from default selections and ::selection styling on the off chance they somehow related to the problem.

Here is one of the broken selects (bulk of the css is below this with explanation above):

select
{
    font-family: 'CabinSemiBold'; 
    font-size: 14px;
    border-radius:3px; 
    border: 1px solid #000;
    color:#000000; 
}

#reviewsort
{
    width: 110px;
    height:30px;
}

<div class="sitecontentwrapper" >
    <div class="sitecontentrow">
        ...
        <div class="sitecontentcell">
             <div class="nowrap inlineblock">
             ....(omitted "Sort By: " label)...
             <select name="reviewsort" id="reviewsort" class="inlineblock">
                 <option value="date">Date</option>
                 <option value="helpful">Most Helpful</option>
             </select>
             </div>
        </div>
        ....
    </div>
</div>

Where things are wrapped and centered using auto margin and content is designed to shift as the screen size changes because it's being treated as if it were inside a giant table. .inlineblock and .nowrap are used when areas should not wrap or must stay together when wrapping and the rest of the content in a "cell" wraps as needed extending the "row" height. I am fairly new to responsive design and I am sure there are better ways to handle responsive content shifting, but that's not really the point of the question. I am mostly including this in case it is causing the problem somehow as I have tried everything else I can think of and cant figure out how selects are being broken.

.sitecontentwrapper
{
    max-width:1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 50px;
    position:relative;
    display:table;
    border:0px;
    height:100%;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.sitecontentrow
{
    display:table-row;
}

.sitecontentcell
{
    display:table-cell;
    vertical-align: top;
}

.nowrap
{
    white-space: nowrap;
}

.inlineblock
{
    display:inline-block;
    vertical-align:top;
    position: relative;
}

Can anyone come up with a reason why any of this would be causing selects to not work properly? Or point me in the direction of a way to fix the behavior?

EDIT: Apparently the fiddle example from the question I linked is working properly in chrome for some people (not me) so I have removed it as a visual reference for explaining what is happening in my code and attached an image instead. Really hoping it helps as this is a very strange issue

EDIT 2: I found the problem and have added the answer below so I can close the question. Instead of just leaving the answer here.

Answer 1

Found the problem apparently this was being caused because there was a stray display:table tag at a global wrapper that was put in originally to make absolute positioning work properly as content is positioned relatively and z indexes are used to make menus and the like overlay content below them properly. So apparently it was doing an absolute table display, and then displaying table again on the relative level (with z-indexes) causing selects to break. It also tells me I probably need to go back and change the way a few things are done as I am pretty sure I shouldn't need to have this wrapper in the first place but when I take it out it breaks jquery ratings causing the star images to be inserted all over the place instead of in a row. My specialty is backend and database work so I am sort of figuring things out as I go based on a lot of reading and browsing of stackoverflow as I am not used to doing all the CSS work and am trying to get up to speed on most recent / best practices (like responsive).

Hopefully this helps keep someone else from repeating the same blunders. Much thanks to everyone who commented as it really helped in narrowing down where the issue was.

.sitewrapper
{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    position:absolute;
    top:0px;
    left:0px;
    border:0px;
    <display:table> <- stray tag that needed to be removed
}