Forums

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

Home › Forums › CSS › using calc() with rem & px: Not working in Firefox?

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 30, 2014 at 5:05 am #161394
    thefairystamp
    Participant

    Hello everyone,

    hopefully someone of you might be able to help me with this: I have a horizontal navigation of li’s, and on :hover, they have a border-top. In order to align these vertically, I am setting the line-height: calc(4rem – 1px); – whereas the 1px is the border-top. That way, the li’s are all properly aligned vertically, in my main navigation.

    I am working with Codekit and use compass for several mixins etc. I have been using the calc function, since I have heard in a podcast, that the browser support for it is very good, and it actually is: http://caniuse.com/calc Firefox seems to have full support for calc, as well as the rem unit.

    So I have no Idea, what the actual problem is, or how to work around it. Has anyone a solution for that problem?

    Thanks in advance!

    January 30, 2014 at 5:17 am #161395
    Paulie_D
    Member

    Can you provide a reduced case Codepen or a link?

    BTW are you using box-sizing:border-box?…This would probably do away with the requirement for the calc in the first place.

    January 30, 2014 at 5:42 am #161396
    thefairystamp
    Participant

    No, I am not using box-sizing: border-box. Thanks for suggesting it, that might solve the problem, Ill try it. I wasn’t even thinking of it.

    Here is the pen: Your text to link here…

    Id still like to know, why this isnt working in ff.

    January 30, 2014 at 6:02 am #161398
    Paulie_D
    Member

    Actually it is working but, for some reason (in FF) the border is under the FF toolbar.

    You can test this by giving the body a bg color and some padding-top: Demo

    January 30, 2014 at 6:28 am #161400
    thefairystamp
    Participant

    Well, for me its not working. I am using FF 26. Here is a screenshot: Screenshot

    January 30, 2014 at 6:37 am #161401
    Paulie_D
    Member

    Did you try the demo link?

    January 30, 2014 at 6:41 am #161402
    thefairystamp
    Participant

    Yep, its the same.

    But with a gap between the navigation and a black background :P

    January 30, 2014 at 7:46 am #161404
    Paulie_D
    Member

    Well on W7 with FF I can see the top-border…so it’s definitely working.

    January 30, 2014 at 7:49 am #161406
    thefairystamp
    Participant

    Okay, so I have obviously not been able to communicate my problem. I dont care about the border, I care about the fact, that firefox does not interpret the line-height propery. That is the case in your picture as well. If you take a look at the developer tools, youll see that there is no line-height propery at the selector.

    That was the initial question. Does the calc function not work, if you are using rem & px?

    January 30, 2014 at 7:59 am #161409
    Paulie_D
    Member

    Hmmm…interesting

    calc: Method of allowing calculated values for length units, i.e. width: calc(100% – 3em)

    This should apply to height (Chrome clearly does)…but does FF?

    January 30, 2014 at 8:01 am #161410
    thefairystamp
    Participant

    Not according to my tests – it doesnt work with em’s either.

    January 30, 2014 at 8:05 am #161412
    Paulie_D
    Member

    Experimentation seems to indicate that FF will not use calc for line-height…only px values.

    Oh, Google: https://bugzilla.mozilla.org/show_bug.cgi?id=594933

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