0

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"><a href="/"><img alt="Congress" src="../img/congress-logo.png"></a></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);


}
Nightfirecat
  • 11,432
  • 6
  • 35
  • 51
user1836740
  • 1
  • 1
    Try putting the filter as the very last item. It's likely that there's an error in the IE filter code and once that error is reached, the CSS parse skips the rest of the CSS rules that come after it for that selector block. As for why the filter isn't, sorry I'm not familiar enough with IE proprietary code. – jmbertucci Nov 19 '12 at 19:38
  • Technically, that isn't a CSS3 gradient. – Shmiddty Nov 19 '12 at 20:43
  • I think you're missing `GradientType=1` (or 0) in your filter. – Shmiddty Nov 19 '12 at 20:45
  • @jmbertucci - moving the filter to the end had no positive effect (for now, I commented the gradient out for old ie). – user1836740 Nov 19 '12 at 22:43
  • @shmiddty -it doesn't matter either way to have the gradienttype...It will default to 0 – user1836740 Nov 19 '12 at 22:44

2 Answers2

0

add this meta tag in header for campatibility with IE9: 

<meta http-equiv="X-UA-Compatible" content="IE=9" />
Savi
  • 106
  • 4
  • I use: ([link](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge)) – user1836740 Nov 26 '12 at 15:25
-1

Try to generate your gradient with colorzilla:

http://www.colorzilla.com/gradient-editor/

It's very simple.

Gustavo Barbosa
  • 580
  • 3
  • 13