I'm not sure I understand what your problem is. In IE7 I'm able to see a rollover on the media button.
The problem I see is that when you resize the browser, the logo shifts the left.
Maybe this general logic will help you out.
Now, container can be floated in the absolute center using a technique like this: http://www.milov.nl/code/css/verticalcenter.html.
<div id='logo'><img src='logo.png'></div>
Next, header should have a CSS value of position:relative.
Lastly, you can use absolute positioning on the elements within the header (logo, media button, contact us, etc...). You don't have to use it for all the elements but I suggest you do so that everything is constant when you resize. Note: absolute position is relative to the header div (i.e. top:1px is 1 pixel from the top of the header div not the page).
That should fix your problems. Sorry I can't help more but your HTML is way too hard to read.
Perhaps get rid of the table? You're already using CSS...why not go all the way?