Display:inline-block not working on safari

Question

I've stucked with my friends website on a menu issue. The URL of the website is: colorfil.webd.pl/sandbox/sylwia/

Please take a look on the menu (main navigation + top right menu + filers menu). On all modern browsers: chrome, FF, opera menu looks good. On Safari it sucks. I use this simple css (for main nav):

    #header-container li {
    display:inline-block;
    margin:0 1em;
}

Issue - menu is being extended into total page width (so the gaps between menu items are HUGE).

Can you advice me something on that?

Answer 1

Debugging

If something like this happens to you in the future you need to debug it.

All modern browsers feature in-built Web Inspectors/Developer Tools (and if they're not good enough for you - you can always grab Firebug ).

If website looks different in X browsers all you need to do is to inspect the different-looking elements and then see what CSS rules are being applied to them. The differences are almost always related to different rules being applied. If you can't track existing rules in your CSS files they're most likely being added with JavaScript.

I've recorded a quick gif for your case, notice everything is fine after you remove floats and min-widths from your links (as previously stated by Imube). You don't actually need floats there, as inline-block will work just fine. I'd generally recommend avoiding floats wherever possible.

Opera vs Safari - tracking your problem using Dev Tools

Uncompressed: https://gifyu.com/images/debug47afb.gif

Why it was not working

Looks like Safari interprets ignores min-width: auto in comparison other browsers (by the way what is auto supposed to mean in this case?).

Here's a demo that uses min-width of 150px for inline-block link and then overwrites it with auto . It works fine in other browsers, but in Safari the links are still 150px wide.

It's really easy to track down using dev tools:

Opera:

Safari:

DEMO

Learn more

Read more about dev tools for Chrome , Firefox and in Safari .