Tutorial :Doing a top level navigation with drop downs: have IE bugs



Question:

So I was trying to do a top level navigation and it works pretty well across the regular browsers (it has kinks but those I can iron out).

But for whatever reason, in IE6/7 the links are placed over the dropdowns when the browser viewport shrinks. It functions in what I think is most of the other browsers, and I do not for the life of me know how to fix it. I have tried z-ordering, I have tried many many things. Any advice?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>    <meta http-equiv="content-type" content="text/html; charset=utf-8">        </script>    <style type="text/css">           /* RESET ------------------------------------- */  html, body, div, span, applet, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite, code,  del, dfn, em, font, img, ins, kbd, q, s, samp,  small, strike, strong, sub, sup, tt, var,  b, u, i, center,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td {    margin: 0;    padding: 0; }    body {    font-size: 62.5%; }    /* END OF RESET ------------------------------ */  a img {    border: none; }    #header {    width: 100%;    height: 90px;    background: #FFFFFF; }    ul#nav {    width: 100%;    position: relative;    background: url(../images/partners/renew_b2b/silver_bar.png) repeat; }    ul#nav li {      display: inline-block;      vertical-align: middle;      font: normal 11px Verdana;      list-style-type: none; }      body.ie6 ul#nav li, body.ie7 ul#nav li {        display: inline; }      ul#nav li h2 {        display: inline-block;        vertical-align: middle;        font: normal 11px Verdana; }        body.ie6 ul#nav li h2, body.ie7 ul#nav li h2 {          display: inline; }        ul#nav li h2 a {          display: inline-block;          vertical-align: middle;          z-index: 4;          background: green;          height: 1%;          text-decoration: none;          position: relative;          color: #999;          padding: 20px 10px 20px 40px;          white-space: nowrap; }          body.ie6 ul#nav li h2 a, body.ie7 ul#nav li h2 a {            display: inline; }    ul#nav li.mega {      position: relative; }    ul#nav li.mega div {      position: absolute;      z-index: 100;      padding: 10px;      border-left: 1px solid #999;      border-right: 3px solid #999;      border-bottom: 2px solid #999;      top: 52px;      left: 0;      margin-right: 40px;      background: #f09; }      ul#nav li.mega div h3 {        display: inline;        font: bold 13px Verdana; }    ul#nav li.hovering div {      display: block; }    ul#nav img {      position: absolute;      z-index: -1;      top: 50%;      margin-top: -12px;      left: 8px; }    #main {    width: 100%;    overflow: hidden;    background: url(../images/partners/renew_b2b/sidebar_background.png) repeat-y top right; }    #content {    float: left;    display: inline;    height: 300px; }    #sidebar {    width: 200px;    color: black;    float: right;    display: inline;    height: 300px; }    #footer {    width: 100%;    clear: both;    background: #333; }    #footer ul {      display: inline-block;      margin: 30px; }      body.ie6 #footer ul, body.ie7 #footer ul {        display: inline; }      #footer ul li {        display: inline-block;        list-style-type: none;        margin: 0 9px; }        body.ie6 #footer ul li, body.ie7 #footer ul li {          display: inline; }        #footer ul li a {          color: #FFF;          text-decoration: none;          font: normal 1.4em Verdana; }      </style>    </head>  <!--[if lte IE 6]><body class="ie6 ie7"><![endif]-->  <!--[if lte IE 7]><body class="ie7"><![endif]-->  <!--[if gte IE 8]><!--><body><!--<![endif]-->      <div id="header"></div>    <ul id="nav">            <li>      <h2><a href="fixme">Link 1</a></h2>      </li><li class="mega">          <h2><a href="fixme">Link 2</a></h2>        <div>          <h3>Dropdown:</h3>           <p>            <a href="fixme">Filter 1</a>,            <a href="fixme">Filter 2</a>,            <a href="fixme">Filter 3</a>,            <a href="fixme">Filter 4</a>,          </p>          </div>      </li><li class="mega">        <h2><a href="fixme">Link 3</a></h2>      <div>          <h3>Dropdown:</h3>           <p>            <a href="fixme">Filter 1</a>,            <a href="fixme">Filter 2</a>,            <a href="fixme">Filter 3</a>,            <a href="fixme">Filter 4</a>,            <a href="fixme">Filter 5</a>,            <a href="fixme">Filter 6</a>            </p>        </div>      </li><li>        <h2><a href="fixme">Link 4</a></h2>      </li><li class="mega">        <h2><a href="fixme">Link 5</a></h2>        <div>            <h3>Filters</h3>           <p>            <a href="fixme">Filter 1</a>,            <a href="fixme">Filter 2</a>,            <a href="fixme">Filter 3</a>          </p>          <h3>Filters</h3>           <p>              <a href="fixme">Filter 1</a>,            <a href="fixme">Filter 2</a>,            <a href="fixme">Filter 3</a>          </p>        </div>       </li>    </ul>      <div id="main">        <div id="content">       </div>        <div id="sidebar">stuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff here</div>        </div>      <div id="footer">      <ul>        <li><a href="fixme">Foter Link 2</a></li>        <li><a href="fixme">Footer Link 1</a></li>      </ul>    </div>    </body>  </html>  


Solution:1

z-index and IE<8: hours of fun!

Here are two great resources about z-index in general and IE<8 bugs in particular:

Mozilla Dev Center: Understanding CSS z-index doesn't speak of IE bugs, obviously.

And here is a corrected code (marked with *** where I modified sth plus style attributes on li)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>    <meta http-equiv="content-type" content="text/html; charset=utf-8">        </script>    <style type="text/css">           /* RESET ------------------------------------- */  html, body, div, span, applet, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite, code,  del, dfn, em, font, img, ins, kbd, q, s, samp,  small, strike, strong, sub, sup, tt, var,  b, u, i, center,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td {    margin: 0;    padding: 0; }    body {    font-size: 62.5%; }    /* END OF RESET ------------------------------ */  a img {    border: none; }    #header {    width: 100%;    height: 90px;    background: #FFFFFF; }    ul#nav {    width: 100%;    position: relative;    background: url(../images/partners/renew_b2b/silver_bar.png) repeat; }    ul#nav li {      display: inline-block;      vertical-align: middle;      font: normal 11px Verdana;      list-style-type: none;  position: relative; /* *** */   }      body.ie6 ul#nav li, body.ie7 ul#nav li {        display: inline; }      ul#nav li h2 {        display: inline-block;        vertical-align: middle;        font: normal 11px Verdana; }        body.ie6 ul#nav li h2, body.ie7 ul#nav li h2 {          display: inline; }        ul#nav li h2 a {          display: inline-block;          vertical-align: middle;          z-index: 4;          background: green;          height: 1%;          text-decoration: none;          position: relative;          color: #999;          padding: 20px 10px 20px 40px;          white-space: nowrap; }          body.ie6 ul#nav li h2 a, body.ie7 ul#nav li h2 a {            display: inline; }    ul#nav li.mega {      /*position: relative;*** */ }    ul#nav li.mega div {      position: absolute;      z-index: 100;      padding: 10px;      border-left: 1px solid #999;      border-right: 3px solid #999;      border-bottom: 2px solid #999;      top: 52px;      left: 0;      margin-right: 40px;      background: #f09; }      ul#nav li.mega div h3 {        display: inline;        font: bold 13px Verdana; }    ul#nav li.hovering div {      display: block; }    ul#nav img {      position: absolute;      z-index: -1;      top: 50%;      margin-top: -12px;      left: 8px; }    #main {    width: 100%;    overflow: hidden;    background: url(../images/partners/renew_b2b/sidebar_background.png) repeat-y top right; }    #content {    float: left;    display: inline;    height: 300px; }    #sidebar {    width: 200px;    color: black;    float: right;    display: inline;    height: 300px; }    #footer {    width: 100%;    clear: both;    background: #333; }    #footer ul {      display: inline-block;      margin: 30px; }      body.ie6 #footer ul, body.ie7 #footer ul {        display: inline; }      #footer ul li {        display: inline-block;        list-style-type: none;        margin: 0 9px; }        body.ie6 #footer ul li, body.ie7 #footer ul li {          display: inline; }        #footer ul li a {          color: #FFF;          text-decoration: none;          font: normal 1.4em Verdana; }      </style>    </head>  <!--[if lte IE 6]><body class="ie6 ie7"><![endif]-->  <!--[if lte IE 7]><body class="ie7"><![endif]-->  <!--[if gte IE 8]><!--><body><!--<![endif]-->      <div id="header"></div>    <ul id="nav">            <li style="z-index:60;">      <h2><a href="fixme">Link 1</a></h2>      </li><li class="mega" style="z-index:50;">          <h2><a href="fixme">Link 2</a></h2>        <div>          <h3>Dropdown:</h3>           <p>            <a href="fixme">Filter 1</a>,            <a href="fixme">Filter 2</a>,            <a href="fixme">Filter 3</a>,            <a href="fixme">Filter 4</a>,          </p>          </div>      </li><li class="mega" style="z-index:40;">        <h2><a href="fixme">Link 3</a></h2>      <div>          <h3>Dropdown:</h3>           <p>            <a href="fixme">Filter 1</a>,            <a href="fixme">Filter 2</a>,            <a href="fixme">Filter 3</a>,            <a href="fixme">Filter 4</a>,            <a href="fixme">Filter 5</a>,            <a href="fixme">Filter 6</a>            </p>        </div>      </li><li style="z-index:30;">        <h2><a href="fixme">Link 4</a></h2>      </li><li class="mega" style="z-index:20;">        <h2><a href="fixme">Link 5</a></h2>        <div>            <h3>Filters</h3>           <p>            <a href="fixme">Filter 1</a>,            <a href="fixme">Filter 2</a>,            <a href="fixme">Filter 3</a>          </p>          <h3>Filters</h3>           <p>              <a href="fixme">Filter 1</a>,            <a href="fixme">Filter 2</a>,            <a href="fixme">Filter 3</a>          </p>        </div>       </li>    </ul>      <div id="main">        <div id="content">       </div>        <div id="sidebar">stuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff here</div>        </div>      <div id="footer">      <ul>        <li><a href="fixme">Foter Link 2</a></li>        <li><a href="fixme">Footer Link 1</a></li>      </ul>    </div>    </body>  </html>  

In short: relative positioning of every li and not only li.mega ones; z-index on each one from a high value to a low one. You already have a z-index: 100; on div


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »