Nav Fit spacing about inuit.css HOT 3 CLOSED

Hi,

I see the problem in the initial fiddle, however I believe the ‘solutions’ are less desirable than the initial issue…

The issue seems to be—and forgive me if I’m wrong—that the links don’t quite fill the whole nav, but the solutions all have much more questionable problems of their own (in my opinion).

You raise a valid point, but I think we need to look for a better fix :)

Cheers,
H

from inuit.css.

There's that issue, but more importantly and noticeable, the elements aren't evenly distributed/spaced, due to the table behaviour. You could manually adjust, but then it defeats it's purpose in my mind.

Also, you can't use absolutely positioned pseudo elements with nav--fit in Firefox (thinking about subnavs, etc). Firefox doesn't have position:relative behaviour for table cells. This is a big one for me.

Sure thing, just sharing the love. I know how it isn't 'THE solution' as it is hackey, but has worked for me in instances where nav--fit wouldn't, without much hassle.

from inuit.css.

Okay I've just come across this issue of a gap on the right-hand side in chrome.

Here's the code:

.primary-nav {
    @extend .nav, .nav--block, .nav--fit, .nav--banner;
    .primary-nav__item a {
        background-color: #cceeee;
    }
}

<nav>
    <ul class="primary-nav">
        <li class="primary-nav__item"><a href="#" class="push-half--right">Menu Item 1</a></li>
        <li class="primary-nav__item"><a href="#" class="push-half--right">Menu Item 2</a></li>
        <li class="primary-nav__item"><a href="#" class="push-half--right">Menu Item 3</a></li>
        <li class="primary-nav__item"><a href="#">Menu Item 4</a></li>
    </ul>
</nav>

It fits perfectly in Firefox, but in chrome (27) it's very undesirable. It's the same regardless of the "push-half--right" classes on the link tags.

Is there any progress on getting this resolved?

from inuit.css.