css - Fluid-width nav in IE7 -
working on revamping client's site, , 1 of requests change nav accommodate text of size. here's trick: i can't change html, css , javascript. oh, , version of jquery on site 1.4.4 - can't change either.
i've got javascript-based solution in place, , it's working across modern browsers - can't seem function in ie7. solution relies on nav elements rendering in native width (i.e. wrapping instead of resizing), in order calculate necessary width changes. in ie7, nav items don't clear - last 1 shrinks tiny size fit first row, , javascript can't tell resizing needs calculated.
the javascript should work fine, main issue need know css isn't doing force last element wrap instead of resize in ie7. i've tried exhaustive number of combinations of display: inline-block;
, white-space: nowrap;
, , float: left;
no avail.
i isolated nav in question , put in fiddle right here. if has ideas, or knows better way can implement, let me know - suggestions welcome!
i have 2 versions of jsfiddle here compare , verify you're going for. cleaned css bit main thing did set percentage width
on li
in navigation. have 6 elements 100/6 = 16.6666%. should not removed jquery in jsfiddles below.
http://jsfiddle.net/d8etp/1/ , http://jsfiddle.net/d8etp/2/
css
body { margin: 0; } #top-nav{ padding-top: 30px; width: 940px; } #nav { color: #fff; font-size: 12px; margin: 0; padding: 0; text-transform: uppercase; min-height: 49px; background-color: #007369; overflow: hidden; } #nav > li { display: block; float: left; list-style-type: none; margin: 0; padding: 9px 0 0 0; width: 16.6666666666%; } #nav > li > { display: block; box-sizing: border-box; text-align: center; padding: 7px 12px 17px 12px; line-height: 16px; margin: 0 4px; color: #fff; text-decoration: none; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; overflow: hidden; } #nav > li > a:hover { background: #b0a893; } #nav > li > a:hover { text-decoration: none; }
Comments
Post a Comment