Why is IE9, FF,opera adding 20%+ margin vs chrome?

Question

LIVE CODE

How to I fix the margin of class="content_push" to be uniform across browsers.

Chrome is giving me the view I like vs. IE9, opera, ff, looking like:

<div class="content_push">
  <section class="cc">
    <div class="margin_wrapper">
      <header>
        <hgroup>
          <h1 class="at">rocking grass out styles for everyone.</h1>
          <h2 class="ast">The you mice structure for to of almost ability an trying the when designer dissolute that constructing in quickly distinct...</h2>
        </hgroup>
      </header>
      <h3 class="title_header">the good</h3>
      <p></p>
      <h3 class="title_header">the bad</h3>
      <p></p>
      <h3 class="title_header">the ugly</h3>
      <p></p>
    </div>
  </section>

</div>

CSS

.mc {
min-height:100%;
    width:100%;
    background:#fff;
    z-index:1;
    position:absolute;
    border-top:1px #c9cacc solid;
}

.content_push {
    margin-top:-35%;
    position:absolute;
    z-index:10;
    background:#FFF;
}

Answer 1

I don't know if it will work (I think it will), but you can try to "reset" the css and them apply your styles. Take a look here: http://meyerweb.com/eric/tools/css/reset/ Apply the style presented in this URL before you use your styles. There are other css resetters, do a google search.