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

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -