html - Menu items break on Chrome/Safari (Mac) but not on Firefox and Chrome for Win -
i ran weird situation when building following menu. on chrome/safari (mac) last menu item breaks when add padding-left: 7px;
<ul>
that's way able display menu centered on firefox , chrome windows.
i tried centering menu display: block; margin: 0 auto;
didn't work well. think i've ran out of possible solutions.
looking forward replies,
cheers!
this because chrome rendering fonts differently , there few pixels difference (about 4 or 5px on screen width in case).
here's little trick picked while ago center nav without padding , such:
.site-header .site-nav ul { display: table; margin: 0 auto; } .site-header .site-nav li { display: block; float: left; }
notice there's no other margins or padding on ul apart auto left , right. you'll need clear ul clearfix because li's floated.
or if don't using display:table
can same display:inline-block
on ul, set text-align:center
on .site-nav
Comments
Post a Comment