Widths handled differently in Safari than in Chrome

I am having some trouble getting my site to display correctly in Safari.
I have been developing it in Chrome mainly and am noticing a few issues with widths being inconsistent across browsers.

The site’s URL is: http://fivestarmusic.com.au
Here is a screenshot of the issue:

screenshot of the issue

An example of the HTML for the menu is as follows.

<div id="menu-main-menu" class="main-menu">
    <ul id="menu-main-menu" class="main-menu">
        <li id="menu-item-1" class="menu-item">
            <a href="some.url">Guitars</a>
            <div class="custom-sub-menu">
                <ul class="sub-menu" style="-webkit-column-count: 3;">
                    <li id="menu-item-2" class="menu-item">
                        <a href="someother.url">Electric Guitars</a>
                        <div class="custom-sub-menu">
                            <ul class="sub-menu">
                                <li id="menu-item-3" class="menu-item">
                                    <a href="anotherlink.url">Fender</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

As I am using SASS the code for the menu is:

    div.menu-main-menu-container {
    padding: 29px 0 29px 0;
    float: right;
    > ul.main-menu {
        list-style: none;
        > li.menu-item {
            display: inline;
            float: left;
            position: relative;
            @include clearer;
            > a {
                @include font($openSans, $sFont, $navText);
                padding: 10px;
                text-decoration: none;
                text-transform: uppercase;
            }
            > div.custom-sub-menu {
                display: none;
                position: absolute;
                top: 28px;
                background: white;
                padding-top: 10px;
                margin-left: -1px;
                border-left: 1px solid $navColor;
                border-right: 1px solid $navColor;
                border-bottom: 1px solid $navColor;
                > ul.sub-menu {
                    list-style: none;
                    column-gap: 0px;
                    column-count: 2;
                    -webkit-column-gap: 0px;
                    -webkit-column-count: 2;
                    -mox-column-gap: 0px;
                    -moz-column-count: 2;
                    > li.menu-item {
                        padding: 0 0 10px 10px;
                        white-space: nowrap;
                        display: block;
                        > a {
                            @include font($openSans, $sFont, $navColor);
                            font-weight: 700;
                            padding: 0;
                            text-decoration: none;
                            text-transform: uppercase;
                            &:hover {
                                color: $hoverText;
                            }
                        }
                        > div.custom-sub-menu {
                            > ul.sub-menu {
                                list-style: none;
                                > li.menu-item {
                                    white-space: none;
                                    padding: 10px 10px 0 10px;
                                    > a {
                                        @include font($openSans, $sFont, $navColor);
                                        text-transform: uppercase;
                                        padding: 0px;
                                        text-decoration: none;
                                        &:hover {
                                            color: $hoverText;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Any Ideas what might be causing the menu to not obey widths?
Many thanks in advance this one’s doing my head in!
– Mikey


Source: cross-browser

Leave a Reply