Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] icons in menu on the wrong place in FF

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #174844
    roelof
    Participant

    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

    #174845
    wahhabb
    Participant

    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.

    #174846
    Senff
    Participant

    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;
    }
    
    #174858
    roelof
    Participant

    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.

    #174859
    Senff
    Participant

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

    #174930
    wahhabb
    Participant

    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!

    #174947
    roelof
    Participant

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.