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
- using
overflow: hidden;#navelement create new block formatting context. - creating element
clear: both;css declaration last child of#navelement.
you might want take @ nicolas gallagher's micro clearfix hack.
Comments
Post a Comment