CSS - line-height problem firefox

Hello experts,

IE and Chrome displays this correctly but Firefox not, here's the screen:
http://tinypic.com/r/33m0iua/8

The problem is that line-height: 46px is not 46px in firefox. Do you know how to solve this issue?

Short CSS here:
.nav {
    .material-icons {
      font-size: 45px;
    }
    li {
      margin-right: 20px;
      &:last-child {
        margin-right: 0;
      }
    }
    li.icons {
      a {
      padding: 0;
      line-height: 46px;
      color: #fff;
      }
      a:focus, a:visited {
        background-color: transparent;
      }
      a:hover {
        background-color: #D94A38;
      }
    }
  }

Open in new window

LVL 1
Fajer39Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
Can you give us also a sample of the html that gets this css applied?
Dave BaldwinFixer of ProblemsCommented:
DON'T Click on that link.  It locked up Firefox twice on me.  

Fajer39, please post your images here on Experts Exchange along with your question.  There is no reason to put it on a site like that.
Alexandre SimõesManager / Technology SpecialistCommented:
Here it opened fine but it's not much help either.

With the HTML we'll be able to reproduce the issue.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Fajer39Author Commented:
Ok guys, I will make an codepen for you ASAP. Thanks.
Brandon LyonSenior Frontend DeveloperCommented:
An anchor tag defaults to inline unless you specify inline-block or block. You want to add display: inline-block to that anchor tag.
Fajer39Author Commented:
It has a display: block on it, display: inline-block doesn't changed that.

Here's the codepen (I cannot reproduced the actual situation, but it's good enough) : http://codepen.io/Fajer39Tests/pen/Kdgxwp?editors=110

*Note- mind only the people material icon and its parent <li>. My Q is why the anchor gets bigger height when it doesn't have bigger content in it? When I specify height the same as line-height, everythings is Ok, but is it neccesery to specify height along with line-height every time?
Brandon LyonSenior Frontend DeveloperCommented:
.navbar-default has a height of 46px, which is shorter than the rest of the items. The "Link" anchor is 50px tall (20px with 15px of padding on either side). The extra padding is coming from the media query for > 768px. That media query appears to be in the bootstrap defaults.
Fajer39Author Commented:
Please mind only  <li class="wrongLineHeight">- it's the link with "people icon"... anchor and  li doesn't have any padding and it still have strange values.
Brandon LyonSenior Frontend DeveloperCommented:
I honestly can't figure out where that size is being calculated from, but you can override it by placing a height on the anchor. The line-height does appear to be calculated as 46px in all browsers, but for some reason the height is being calculatead as 63px.

li.wrongLineHeight a {height: 46px;}

Open in new window

Fajer39Author Commented:
Thank You Brandon, but that's what i've already knew so I appreaciate your help but I'd like some specific answer for this problem. Height is a fix obviously but I would rather understand why to use it here.
Brandon LyonSenior Frontend DeveloperCommented:
Unfortunately the browser developer tools are only presenting the calculated height without specifying where it came from, which is highly unusual. I'm not familiar enough with bootstrap to be able to guess where it might be coming from. I will be unable to help any further but good luck with your search.
Fajer39Author Commented:
Ok thank you anyway- I will give you some points for sure. But first, I'm gonna try request for attention.
Slick812Commented:
Not sure what kind of answer you are lookin 4 here? ? I will say that you seem to think that the CSS "line-height" has an effect on the actual height of a displayed element, what "line-height" does is set the browser to display the Lines Of Text or "inline" elements with spacing (distance) between lines, if there is a single line of display (as u have here) it can move the text or inline image, up and down relative to the internal dimensions of the containing element the <a href="#"> in this case, if the containing element can change it height, then  the height of the container can change with different "line-height", , Not sure about the diferences in the display of Chrome, IE, and firefox, but the element in question here - <i class="material-icons">people</i>  seems to be displayed as an IMAGE,  BUT what is needed is to have the <a href="#"> NOT be larger than it's container <div class="navbar">  and <li class="wrongLineHeight"> , which has it height as a FIXED height  -
      .navbar {height: 46px; min-height: 0;}
of 46 pixels. I think I see a gray border in the code-pen so the <li> height you may need could be 44px, , as to the Line height thing, I would set it to "BELOW the default" as -

li.wrongLineHeight {
  a {
      padding: 0;
  line-height:30%;
      color: #000;
      background-color: #4a4;
    }

since the IMAGE seems to be a height of around 45 pixels, reducing the line height will maybe remove the line padding (vertical spacing) and have the <a> be the same , height as the 46 pixel container ? ? Or just set the height to 44px, which may nor may not effect OTHER responsive display? ?
Fajer39Author Commented:
Yes, reducing the line-height to 30% for li.wrongLineHeight a works great and it's a responsive solution what I wanted as you correctly guessed.

Thank You for a good explanation of line-height. I didn't think that line-height just automatically replace height, but when the container's default height is smaller then the children's with line-height assigned, the container will strech with the children without the need of manually assign it height:45px eg. when the children has line-height: 45px, do I understand line-height correctly?

What is strange is why the <a> has 63px by default...do you have any idea why? The <li> is exact 45px without a border when I apply your fix, no border without fix ofc too.

Is it because of bootstrap or google material icons?
Slick812Commented:
OK, u say - "do I understand line-height correctly?" , I do not think so? you say - "strech with the children without the need of manually assign it height:45px eg. , when the children has line-height: 45px,"

No , because the line height is NOT so dependent on the size "height" of the text or elements (people icon here), but suggests to the browser how much vertical spacing to try and give around (above and below) the text or element, , the actual display height of the text or image don't change wid "line-height" change.

BUT, , Line height is easy 4 me to understand in a multi-line text display, as the top and bottom spacing between lines grows or shrinks.
BUT, , , in a single line display like this, there's no other lines involved, so the effect of "line-height" in the display, is not so easy 4 me to understand and use, but again it effects the spacing used, and that gives some "ODD" seeming effects in display change.

I do not know why a value of  " line-height: 46px ", , I have had BAD usage experiences with pixel set line height, I always use a percentage  %  whenever possible, because different elements (fonts) can have different spacing depending on the font and the size (height) of display, the bigger the font the bigger the default spacing. You say it works in IE and chrome, so I guess thats why,  I think I saw a font-size of 46px somewhere, , so maybe it was to match that?
Fajer39Author Commented:
I used line-height: 46px because of centering the element relative to its parent who's nav which has a height of 46px too.

Last Q before I close this- every time I use this centering trick I have to also set the height with the same number as the line-height? I'm asking because I have it in other thing and it work fine just with line-height but I guess it's not the best practise and something can break down as happend here with this example.

@Brandon Lyon- please try to answer this last Q too.
Brandon LyonSenior Frontend DeveloperCommented:
Usually line-height alone is adequate, assuming the text does not wrap. If I am trying to limit the height of something then I usually put line-height with height or height with padding. I'm still unsure why this particular example doesn't calculate to the correct height without manually specifying it.
Slick812Commented:
OK , you say - "set the height with the same number as the line-height?"

I have said, that the line-height CAN be used to move single line output up and down usually relative to the inner element display (accounting for padding and other factors), , HOWEVER, as I have said this can work as expected in some "height" sets, and not so well in others (especially if I have any font-text size variations in responsive. IF I USE FIXED HEIGHT for  a container (46px as u have here), it may work out better to change the  padding-top in the container to move the text-image Down to a ver center, but I would not recommend using both padding- top container, AND line-height. The actual  environment with the container and its factors (height, padding, margin, font size, the font used, image, etc.) and the element being centered factors, (margin, float, relative position, single height or varying height, etc.) all can throw a ver center off the desired position. Sorry, if I sound like vertical centering is undependable and not the same for all situations, but that's the case as far as I know, I have read several web articles, and tutorials about ver centering, and they also say it can vary per situation.
The only "sure fire" display  4 v center may be a display as "table CELL" with CSS as   vertical-align: middle;
BUT that also may have some conditioning? ?

I have used the line-height for ver center and it worked in that place, but I always use a percentage like  line-height: 152.5%;      to increase the spacing above the text-image and move it down to close to middle.

I also find it useful to set and Image or block (<div>) to CSS  "position: relative;" and then set the "top: 5px;" to move it down in the display (for appearance position) and if unchanging heights and sizes, it can work for ver center, but if other things are out of the browser positioning relavance like float elements, then this may overlap and not look right.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Fajer39Author Commented:
Thank You guys. It's a strange example, I've never seen this kind of weird calculation neither.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.