Menu Padding Variations

Question

I have an 8 item menu, to get it evenly spaced across IE, Chrome Firefox and when viewed using an ipad I've had to use extraneous padding within the stylesheet which works but is so messy. Not helping is the fact each menu item is a different width.

Having spent several hours on google I've achieved absolutely nothing. If possible looking for a much cleaner solution, HTML and CSS below

<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Shop</a></li>
<li><a href="">Convertible Roofs</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Customer Comments</a></li>
<li class="active"><a href="">Buyers Guide</a></li>
<li><a href="">Leather Care</a></li>
</ul>
</nav>



nav ul {
margin:0;
padding:0;
background:rgba(0,0,0,.2);
}

nav ul li {
display:inline-block;
border-right:1px solid rgba(255,255,255,.2);
margin-right:-3px;
}

nav ul li:last-child {
border-right:none;
}

nav ul li a {
display:inline-block;
padding:14px 21.3px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
font-size:0.938em;
outline:0;
color:#fff;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {  
nav ul li a {
padding:14px 20.7px;
}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
nav ul li a {
padding:14px 21.3px;
}
}

@-moz-document url-prefix() { 
nav ul li a {
padding:14px 20.7px;
}
}

nav ul li a:hover,nav li.active a {
color:#fff;
background:rgba(0,0,0,.4);
}

Answer 1

Did a bit more digging and found this answer by @Rob Lowe on this page how to make a ul li css menu with variable space between items, very close to your method @Jayx so thanks again.

nav {
width:960px;
display:table;
background:rgba(0,0,0,.2);
border-collapse:collapse;
margin:0;
padding:0;
}

nav ul {
display:table-row-group;
list-style:none;
margin:0;
padding:0;
}

nav li {
display:table-cell;
border-right:1px solid rgba(255,255,255,.2);
vertical-align:middle;
}

nav li a {
display:block;
padding:12px 15px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
font-size:0.938em;
outline:0;
color:#fff;
}

Answer 2

See if you can follow this as is; if not, I'll do you a fiddle ...

The basic premise is to make the elements behave like table cells so you don't need the padding. I did a quick edit in Firebug - see if it works for you:

nav {
    display: table;
    height: 50px;
    width: 100%;
}
nav ul {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
    display: table-row;
    margin: 0;
    padding: 0;
    width: 100%;
}
nav ul li {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    display: table-cell;
    line-height: 50px;
}
nav ul li a {
    color: #fff;
    display: block;
    font-size: 0.938em;
    outline: 0 none;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

You can remove the rule that adds the padding (line 170).

Disclaimer: Not tested in anything other than Firefox.