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