html - Clear float last li element for ie6 and 7 -


i have following html menu

<ul>     <li id="btnhome"><a href="#">link one</a></li>     <li id="btnabout"><a href="#">link two</a></li>     <li id="btncontact"><a href="#">link three</a></li>     <li id="btnlinks"><a href="#">link four</a></li> </ul> 

and following css it

ul {     margin: 0;     padding: 0; }  ul li {     list-style-type: none; }  #nav {     background: #999;     padding: 2%; }  #nav ul li {     float: left;     margin-right: 2%; } 

i use above ie6 , 7 in order display links in single row. float: left displays menu items in row changes style #nav div , menu items not appear inside #nav div anymore.

how can fix issue ie6 , 7?

note: using display: inline-block modern browser , works fine.

you use css declaration zoom: 1; #nav element trigger haslayout on ie 6-7.

#nav {     background: #999;     padding: 2%;     *zoom: 1; } 

note: star/asterisk prefix css hack targeting ie 6/7.

other options

you might want take @ nicolas gallagher's micro clearfix hack.


Comments

Popular posts from this blog

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -

java - JavaFX 2 slider labelFormatter not being used -