internet explorer 8 and margins

I have some pretty simple html which is meant to make a layout as below.

To push the tabs down from the userbar I am using

margin-top: 35px;

However in internet explorer the tabs are completly misaligned(the top of the tabs is where the bottom should be).

So I need to use margin-top: -50px; for internet explorer.

Why is this and how can I fix it without using a ie specific stylesheet

layout example http://webspirited.com/layout.png

<div id="pageHead">
  <div id="userBar">
    <span class="bold">Hi Matthew Hailwood | <a href="#">Logout</a>
  </div>
  <a href="http://localhost/buzz/" id="pageLogo"></a>  
  <div id="pageTabs" class="clearfix">
    <ul>
      <li><a href="http://localhost/buzzil/templates">Templates</a></li>
      <li><a href="http://localhost/buzzil/messaging">Messaging</a></li>
      <li><a href="http://localhost/buzzil/contacts">Contacts</a></li>
    </ul>
  </div>
</div>

With the css being

#pageHead {
    height: 100px;
}

#pageLogo {
    float: left;
    width: 149px;
    height: 77px;
    margin-top: 11px;
    background: transparent url('../开发者_如何转开发images/logo.png') no-repeat;
}

#userBar {
    text-align: right;
    color: #fff;
    margin-top: 10px;
}

#userBar a:link,
#userBar a:visited,
#userBar a:active {
    font-weight: normal;
    color: #E0B343;
    text-decoration: none;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

#pageTabs {
    float: right;
    margin-top: 35px;
}

#pageTabs ul {
    position: relative;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid #000;
}

#pageTabs ul li {
    float: right;
    background: url(../images/tabsBg.png) no-repeat 0% 0%;
    border-left: 1px solid #000;
    margin-left: -1px;
}

#pageTabs ul li a:link,
#pageTabs ul li a:visited,
#pageTabs ul li a:active {
    color: #fff;
    background: url(../images/tabsBg.png) no-repeat 100% 0%;
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 42px;
    text-transform: uppercase;
    padding: 4px 32px;
    text-decoration: none;
}

#pageTabs ul li a:hover,
#pageTabs ul li a:focus {
    text-decoration: underline;
}

IE does not like negative margins, it tends to have discrepancies. Try using position instead, along with left, right, top and bottom - it's more compatible, from personal experience.

You may just be able to convert your whole page from margins to positioning with minor tweaks.

Try not using the html tag for any kind of styling. Use the body tag instead. Also, try setting your pageHead to relative positioning, and then position the other divs via relative or absolute and using top, bottom, left, right, as MT mentioned.

xD Looks like I was a bit late. Sorry. :3