Firefox padding ignores position absolute?

Question

https://dev.siterecruitment.co.uk/

Take a look here, the 'services' link is the following code:

<li class="expandable">
    <a>Services <span class="dropdown-arrow"></span></a>
    <div class="dropdown">
        <div class="inner">
        ...
        </div>
    </div>
</li>

.dropdown-arrow has the following, which should take it out of the flow and out of any dimension calculations:

.dropdown-arrow {
    width: 8px;
    height: 8px;
    position: absolute;
    right: 30px;
    top: 44%;
}

Its parent, nav a, has the following:

.nav a {
    display: inline-block;
    line-height: 0;
    padding: 50px;
    color: #12A19A;
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
}

Check the links height in comparison to the Services link. They are different seemingly because of the presence of .dropdown-arrow. When the span is removed the padding reverts to making the links the same height, which shouldn't be the case because the span is set to position: absolute and shouldn't be influencing the dimensions of its parent. Tested on Firefox v36. What am I missing?

Check the links height in comparison to the `services` link. They are different seemingly because of the presence of a span (`.dropdown-arrow`) inserted into the link. When the span is removed the padding reverts to making the links the same height, which shouldn't be the case because the span is set to position: absolute and shouldn't be influencing the dimensions of its parent. — styke, May 13 '15 at 14:24

score 1 · Accepted Answer · answered May 13 '15 at 14:32

1

nav a - line-height: 0;

to

nav a - line-height: normal;

answered May 13 '15 at 14:32

Dmitriy

4,475
3
29
37

Bizarre issue and bizarre solution. Thank you! – styke May 13 '15 at 14:33

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

span is an inline-element so height should not work, you may try to add display:inline-block

Have a look here How to set height property for SPAN

edited May 23 '17 at 11:58

Community

1
1

answered May 13 '15 at 14:19

Matteo

1,654
17
24

I've tried both `block` and `inline-block`, neither have any effect. – styke May 13 '15 at 14:21

Dr Upvote · Answer 3 · 2015-05-13T14:33:17.873

I don't really know what your problem is...

But maybe; wrap this area '<a>Services </a>' in a div, right now you have a  which is sometimes tricky to get what you want as the other answer described. (spans are mostly used to for inline text formatting, not so much heights, nesting, and much more) Read More about  Click Here

And your also nesting the  within an <a> tag making that the outter element. Add a wrapper div here for more stability and flexibility in terms of selector styling.

<div class="dothis"><a>Services <span class="dropdown-arrow"></span></a></a>

_

.dothis { 
   display: // whatever the problem
   max-height: 20px; // set the max height if issue
   line-height: 1;
   vertical-align: text-top; // I don't know what your doing, but you get the idea
   /// all your styles
}

Firefox padding ignores position absolute?

3 Answers3