Why is my image located correctly in most browsers but not in IE?

I have the following HAML:

%header
  .grid
    %a{:name => "top"}
      .logo
        %a{:href => root_path}
          =image_tag("logo3.png")
    .tagline
      .clearfloat
      %p Fast Facts About Your Website, Your Competitors And Best Practice

Which compiles to the following HTML:

<header>
  <div class='grid'>
    <a name='top'>
      <div class='logo'>
        <a href='/'><img alt="Logo3" src="/assets/logo3-f98780b46c9b7f088007b22a6a6d3605.png" /></a>
      </div>
    </a>
  <div class='tagline'>
    <div class='clearfloat'></div>
    <p>Fast Facts About Your Website, Your Competitors And Best Practice</p>
  </div>
</div>
</header>

I also have the following SASS (inc Susy):

@import "compass/reset";
header {
  clear: both;
  padding: 1.25em;
  @include content-box;

  .grid {
    padding-bottom: 0em;
    padding-top: 0em;

    .logo {
      @include span-columns(3, 9);
      padding-left: 3.75em;
      margin: 0;
      height: 3.25em;
    }

    .tagline {
      @include span-columns(6 omega, 9);
      height: 3.25em;

      p {
        position:absolute;
        top: 3.25em;
        text-align: right;
        width: 50%;
      }}}}

.grid {
  @include container;
  padding-top: 3.75em;
  padding-bottom: 3.75em;
  padding-left: 1.25em;
  padding-right: 1.25em;  
  }

.clearfloat {clear: both;}

This compiles to the following CSS:

body {
    margin: 0;
    background-image: url(/assets/background-15f6db398b101b42f0b97400986e777a.png);
}
.container {
    *zoom: 1;
    max-width: 86.25em;
    _width: 86.25em;
    padding-left: 3.75em;
    padding-right: 3.75em;
    margin-left: auto;
    margin-right: auto;
}
.container:after {
    content: "";
    display: table;
    clear: both;
}
header {
    clear: both;
    padding: 1.25em;
    background-image: url(/assets/subtle_dots3-4c8426c60999e17a694d2d04c7df3c1d.png);
    -webkit-box-shadow: #191919 3px 3px 6px;
    -moz-box-shadow: #191919 3px 3px 6px;
    box-shadow: #191919 3px 3px 6px;
}
header .grid {
    padding-bottom: 0em;
    padding-top: 0em;
}
header .grid .logo {
    width: 30.43478%;
    float: left;
    margin-right: 4.34783%;
    display: inline;
    padding-left: 3.75em;
    margin: 0;
    height: 3.25em;
}
header .grid .tagline {
    width: 65.21739%;
    float: right;
    margin-right: 0;
    #margin-left: -3.75em;
    display: inline;
    height: 3.25em;
}
header .grid .tagline p {
    position: absolute;
    top: 3.25em;
    text-align: right;
    width: 50%;
}
.grid {
    *zoom: 1;
    max-width: 86.25em;
    _width: 86.25em;
    padding-left: 3.75em;
    padding-right: 3.75em;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3.75em;
    padding-bottom: 3.75em;
    padding-left: 1.25em;
    padding-right: 1.25em;
}
.grid:after {
    content: "";
    display: table;
    clear: both;
}
.clearfloat { clear: both }

On most browsers including Chrome, this correctly sticks my logo in the left portion of my header area, like this:

Works on Chrome etc

But on IE, inc 9 (I haven't tested 10), it mangles the location of the logo, placing it behind the tagline like this:

enter image description here

Solution

The HTML code is invalid. You can't nest an anchor (a) element inside another anchor element. Also, unless you use HTML5, you can't nest a block element (div) inside an inline element (a).

When different browsers parse it, they will have different ways to fix the invalid code. To get a consistent result you need to create valid HTML code.