html - CSS Bug with inline ul li in IE7 -


i've got little issue inline menu, bug appears in ie7. menu li has menu underneath it, not inline rest, rest seem appear pushed down.

html

<div id="topnav"> <ul id="jsddm"> <li id=""> <a id="" href="/">home</a> </li> <li id=""> <a href="/about.aspx">about</a> <ul style="visibility: hidden;"> <li> <a href="/about/board.aspx">board</a> </li> <li> <a href="/about/contact.aspx">contact</a> </li> </ul> </li> <li> <a href="/practices.aspx">practices</a> </li> <li> <a href="/how-we-work.aspx">how work</a> </li> <li> <a href="/patients.aspx">patients</a> </li> <li> <a href="/news-links.aspx">news &amp; links</a> </li> <li> <a href="/link.aspx">link</a> </li> </ul> </div> 

css

    #jsddm {   margin: 0;     padding: 0;     width: 100%; }  #jsddm li {        display: inline-block;     list-style: none;     font: 12px tahoma, arial;     width: 100px;     text-align: center; }  *+html #jsddm li { display:inline } * html #jsddm li { display:inline }  #jsddm ul li {        display: block;     font: 12px tahoma, arial; }  #jsddm li ul {        margin: 0 0 0 0;     padding: 0;     position: absolute;     visibility: hidden;     border-top: 0px solid white;     *margin: 0 0 0 -50px; /* ie 7 , below */      /* margin: 0 0 0 -50px\9; ie 8 , below */ }  #jsddm ul li ul li {                font: 12px tahoma, arial }  #jsddm li {     display: block;     background: #009ee0;     padding: 0;     line-height: 28px;     text-decoration: none;     border-right: 0px solid white;     width: 70px;     color: #eaffed;     white-space: nowrap;     font-weight: bold;     width: 100%; }  #jsddm li a:hover {   background: #1a4473}  #jsddm li ul li {        float: none;     *margin: -2px 0 0 0;     *padding:0; }  +html #jsddm li ul li {  }  #jsddm li ul li {     width: auto;     background: #009ee0     font-weight: bold; }  #jsddm li ul li a:hover {   background: #0e559c } 

it uses jquery function display dropdownmenu does'nt effect static html/css.

thanks.

ie7 doesn't support inline-block. try float elements in - http://jsfiddle.net/ssdnd/1/

#jsddm li {        display: inline-block;     list-style: none;     font: 12px tahoma, arial;     width: 100px;     text-align: center;     *float: left; } 

Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c++ - Using OpenSSL in a multi-threaded application -

All overlapping substrings matching a java regex -