html - Why is the header off on IE7?

Question

I have this page and if you view the header in IE7 you will see the header is a bit off....Here is my code

HTML

<div id="header">
<a href="/"><img width="222" height="91" src="/images/logo.png" alt="pos system" id="logo"></a> 
<span class="phone fr">877.727.3548</span>
<div class="cl">&nbsp;</div>    
<div id="navigation">
    <ul class="shop-nav">
        <li class="systems"><a href="/pos_systems">Shop Systems</a></li>
        <li class="equipment"><a href="/shop_pos">Shop Equipment</a></li>
        <li class="supplies"><a href="/shop_pos/pos_supplies">Shop Supplies</a></li>
        <li class="software"><a href="/pos_software">Shop Software</a></li>
    </ul>
    <ul class="utility-nav">
                            <li class="login"><a href="/shop_pos/index.php?route=account/login">Log In</a></li>
                <li class="cart"><a href="/shop_pos/index.php?route=checkout/cart">View Cart</a></li>
    </ul>

    <div class="contact-nav">
        <ul>
           <li><a href="http://www.facebook.com/pages/POS-Nation/120410367994730?ref=sgm"><img width="40" height="39" alt="" src="/pos_systems/css/images/icon-facebook.png"></a></li>
           <li><a href="http://twitter.com/POSNation"><img width="40" height="39" alt="" src="/pos_systems/css/images/icon-twitter.png"></a></li>
        </ul>
        <div class="cl">&nbsp;</div>
        <p class="ar"><a href="/shop_pos/index.php?route=information/contact">Contact Us </a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/shop_pos/about">About Us</a></p>
    </div>      
</div>

I can paste the CSS but there is alot...i think a developer tool will show you what i am talking about

Thanks in advance

Answer 1

Looks like I was talking rubbish when I said in a previous question:

I had a quick look, and at first glance it doesn't look easy enough that I can just write in a comment here.

You can fix it simply by adding float: left to #logo.

It's yet another instance of IE7 dropping down floats when it shouldn't.