CODEWITHSUNDEEP
css
Alex
Alex

Reputation: 135

CSS Columns not aligned in Safari

I’m using CSS columns to get a multi-column main-navigation on my website (www.alexanderschlosser.de/wordpress – built using Semplice). Everything works great in Chrome, but the top of the columns are not correctly aligned in Safari. Any idea what might cause the issue? _

Here’s how it looks in Chrome and should look everywhere: Chrome Rendering

And here’s how it looks in Safari (second columns begins to low): Safari Rendering

What’s even weirder: Safari still seems to think that the elements are all underneath each other when I use the inspector. Could this be the problem? Safari Inspector Screenshot

_

Here’s my CSS

/***VERTICAL MENU IN TWO COLUMNS***/
nav.standard ul {
    display: block !important; 
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    height: 100px !important;
}

/***DISTANCE BETWEEN MENU ELEMENTS***/
nav.standard ul li {
    padding-bottom: 15px !important;
}

/***STYLING MENU ITEMS***/
.navPrimary a {
    background-image: linear-gradient(to bottom, #252526, #252526);
    background-position: left 0 bottom 0;
    background-repeat: repeat-x;
    background-size: 2px 1px;
}

And my HTML simplified

<nav class="standard">
    <ul class="menu">
        <li class="navPrimary">
            <a href="http://www.alexanderschlosser.de/wordpress/"><span>All Projects</span></a>
        </li>
        <li class="navPrimary">
            <a target="_blank" href="http://blog.alexanderschlosser.de"><span>Blog →</span></a>
        </li>
        <li class="navPrimary">
            <a href="http://www.alexanderschlosser.de/wordpress/about"><span>About Me</span></a>
        </li>
        <li class="navInactive">
            <a href="http://www.alexanderschlosser.de"><span>Alexander Schlosser</span></a>
        </li>
        <li class="navSecondary“>
            <a href="mailto:[email protected]"><span>[email protected] →</span></a>
        </li>
        <li class="navSecondary">
            <a target="_blank" href="tel:004917657807152"><span>0049 176 57 80 71 52 →</span></a>
        </li>
    </ul>
</nav>

_

Many thanks in advance and all the best from Switzerland! Alex

Upvotes: 6

Views: 3354

Answers (3)

Phil
Phil

Reputation: 21

Late reply, but I found this page because I faced the same issue in Safari. The margin bottom killed the top aligning in some breakpoints / viewport sizes. I replaced it with padding-bottom, which works in my case in Safari,Chrome and Firefox (Mac OS Sonoma, Silicon)

Upvotes: 2

Oleg
Oleg

Reputation: 1140

In my case problem was in margin on column items, so when I delete it all was fine. Also display: flex for items solve the problem without removing margin from items

Upvotes: 4

Alex
Alex

Reputation: 135

Ok, seems as if I’ve finally figured something out. Adding this seems to do the trick for me:

nav.standard ul li {
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-column-break-inside: avoid; 
}

Still have no idea why this is working though. What does safari try to break between the columns? Cannot be the margin or padding as the problem still occurs without any distance between the elements at all.

Upvotes: 4

Related Questions