Why is this CSS3 gradient breaking my page layout in IE? - html

Question

It took me a long time to figure out what was breaking my layout (the issue is only in ie). I am using html5 (with moderizr) and I figured out the layout was fine if I removed the following from the css:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5ede1, endColorstr=#f5ede1);
I want the gradient there for the design, though... Why does the filter break the layout in Internet Explorer?
The html for the header is:
<header>
<section id="header">
<div id="logo"><img alt="Congress" src="../img/congress-logo.png"></div>
<div id="ons-logo"><a target="_blank" href="http://ons.org"><img width="175" height="77" alt="Oncology Nursing Society" src="../img/ons-logo.png"></a></div>
</section>
<nav id="main-nav">
<ul>
<li id="register"><span>Register</span>
<ul class="subNav">
<li>subnav</li>
</ul>
</li>
<li id="exhibit"><span>Exhibit Hall</span>
<ul class="subNav">
<li>subnav</li>
</ul>
</li>
<li id="networking"><span>Networking</span>
<ul class="subNav" style="display: none;">
<li>subnav</li>
</ul>
</li>
</ul>
</nav>
</header>
And this is my CSS:
img {
border: 0;
width: 100%;
display: block;
max-width: 100%;
}
header{
background: #f5ede1; /* Old browsers */
background: -moz-linear-gradient(top, #f5ede1 0%, #fbf8f3 48%, #f5ede1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5ede1), color-stop(48%,#fbf8f3), color-stop(100%,#f5ede1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f5ede1 0%,#fbf8f3 48%,#f5ede1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f5ede1 0%,#fbf8f3 48%,#f5ede1 100%); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5ede1, endColorstr=#f5ede1); /*IE6-9 */
background: -ms-linear-gradient(top, #f5ede1 0%,#fbf8f3 48%,#f5ede1 100%); /* IE10+ */
padding-bottom: 10em;
position:relative;
max-width: 100%;
margin: 0px;
}
.ie7 header/*, .ie8 header*/{
padding-bottom:0px;
}
section#header{
max-width: 900px;
margin: auto;
position: relative;
}
div#logo {
float: left;
margin: 1em 0 0 2em;
max-width:365px;
}
.ie8 div#logo{
width:365px;
}
div#ons-logo{
max-width: 175px;
padding-left: 23em;
float:left;
}
.ie8 div#ons-logo{
width: 175px;
}
nav#main-nav {
margin-top: -30px;
padding: 0.5em 5% 0.5em 35%;
width: 60%;
float: left;
background: #d56d2a; /* Old browsers */
background: -moz-linear-gradient(top, #d56d2a 1%, #f47d31 10%, #f47d31 85%, #ea8f52 100%, #f47d31 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#d56d2a), color-stop(10%,#f47d31), color-stop(85%,#f47d31), color-stop(100%,#ea8f52), color-stop(100%,#f47d31)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d56d2a 1%,#f47d31 10%,#f47d31 85%,#ea8f52 100%,#f47d31 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d56d2a 1%,#f47d31 10%,#f47d31 85%,#ea8f52 100%,#f47d31 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d56d2a 1%,#f47d31 10%,#f47d31 85%,#ea8f52 100%,#f47d31 100%); /* IE10+ */
background: linear-gradient(to bottom, #d56d2a 1%,#f47d31 10%,#f47d31 85%,#ea8f52 100%,#f47d31 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d56d2a', endColorstr='#f47d31',GradientType=0 ); /* IE6-9 */
border-bottom: 2px solid #F5D8C7;
border-top: 2px solid #F5D8C7;
box-shadow: 0 10px 9px rgba(0, 0, 0, 0.55);
}

Answer 1

add this meta tag in header for campatibility with IE9:
<meta http-equiv="X-UA-Compatible" content="IE=9" />

Answer 2

Try to generate your gradient with colorzilla:
http://www.colorzilla.com/gradient-editor/
It's very simple.