[Solved] icons in menu on the wrong place in FF

[roelof]

Hello,

Im also testing another layout for my financial app.
I noticed that on FF the icons of the menu are on the wrong place.
There need to be after the name of the menu item not before it.

Anyone who can help me figure this out ?

You can test it on test2.tamarawobben.nl

Roelof

[wahhabb]

It works fine on Firefox on Mac, but fails on Firefox on PC. Don’t have time to debug now, but I will do so later if no one beats me to the punch.

[Senff]

In Chrome, IE and FF I see the same. The icons on the menu (Intro, Portfolio, etc.), are on the left, while the text is on the right.

I don’t see anything wrong with that, because these rules are in place:

#nav ul li a span:before {
    position: absolute;
    left: 0;
    color: #41484c;
    text-align: center;
    width: 1.25em;
    line-height: 1.75em;
}

.fa-home:before {
    content: "\f015";
}

.fa:before {
    display: inline-block;
    font-family: FontAwesome;
    font-size: 1.25em;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[roelof]

Oke,

Then I wonder which browser is wrong :

In IE (windows 7) the page looks like this : http://imgur.com/PlJfdJV
In FF (Windows 7) the same page looks like this : http://imgur.com/oFaxW8L

I like the way IE is displaying more then that FF does.

[Senff]

Looks the same to me in IE as well (icons on the left side).

[wahhabb]

OK, I think I’ve found the issue.

In the versions that work the way you like, you are loading a style sheet called style-narrow.css. Line 86 of that has the following rule:

#nav ul li a span:before {
    left: 100%;
    line-height: 2.25em;
    margin-left: -1.25em;
}

Firefox on Windows is not loading that style sheet.

I don’t see where the style sheet is loaded–it appears to be loaded by JavaScript. It is part of HTML5 UP. Because it is missing, the left:100% is not being executed. That is what moves the icons to the left.

You either need to load that style sheet manually, or find out why it is not being loaded.

Hope that helps!

[roelof]

After some talk with the author things are more clear now.
The layout I see in FF was the good one. In IE I had a zoom of 175% so the platform thought it was displayed on another device.

So there are two options. Let it be or changing the viewports numbers.

I think I go for the first option.

Roelof

[Author]

Posts