Troubleshooting headings - Foundation 5


I’m having trouble finding the reason for the padding or margin that causing this heading to not be vertically aligned. I’m using Foundation 5 (foundation.css) and it’s so massive I can’t find the culprit. I’ve looked at all the heading selectors - even removed them and still no luck. I’ve tried using an inline reset and removed all padding and margin and still no joy. If I remove the css link it falls into place perfectly.
I don’t see anything using the inspector - must be missing it.

Here’s a link to page with test code.

Thanks for any thoughts or solutions!

Hi dafmorgan, welcome to the forums.

If I understand aligned correctly. In the Inspector different vertical margins is found at line 3747 in the foundation.css:


The actual ruleblock:

/* Default header styles */
h1, h2, h3, h4, h5, h6 {
  color: #222222;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  margin-top: 0.2rem;
  text-rendering: optimizeLegibility; 


Yes, been there. The margin values simply move the entire block up or down. They do not affect the position within the border block.
This is what I mean - I’ve visited all the obvious places within the css - all the usual suspects - and nothing has the effect of vertically aligning the text within its own space. The inspector doesn’t list any other elements that would have this effect that I can see.

<h2 style="border: 1px solid #cccccc;">Testing the Headings</h2>

with no css link - aligns perfectly. As soon as I hook it up to the foundation.css it moves.
I guess I will have to remove chunks of code “process of elimination” session until I find the culprit.


Can we clarify the problem?

This is what I see on the link you posted:

Screen Shot 2021-05-01 at 12.31.20

Unless I’m missing something the text looks to be perfectly centred within that border box. If you look at the capital T and the Capital H then the space above and below is exactly the same. Obviously ascenders and decsenders may poke up and down depending on font etc but the text is perfectly centred.

The alignment looks exactly the same to me as a blank page with browser defaults albeit font, fons-size and line-height will all be different but the text will sit in the same place.

The space the text sits in is defined by the line-height which is 1.4 in the foundations css as opposed to normal which is 1.2 in most browsers. However this doesn’t affect where the text sits in that line-box and to some extent will depend on font construction as leading and half-leading may be built into the font itself.

If I look at the html outside of foundation then I see this:

Screen Shot 2021-05-01 at 12.54.08

Which is actually not as well centred due to the odd px line-height and there is one pixel more space under the capital H that at the top.

If you can specifically point to the appearance you would like then maybe we could work to a solution. I think however that I may be looking at the wrong problem :slight_smile:

1 Like

Hey thanks! That’s interesting - I just realized that the alignment issue appears to be only in Firefox (for me anyway) - see screenshot. Top is what I see in 78.10.0 esr with Foundation css - below that is with no css linked.

I just tried in Chrome and Opera and it’s fine. I mainly use Firefox, it’s usually pretty true.
So I guess the “new” question is “why Firefox”.

1 Like

That doesn’t look right :slight_smile:

This is what I see on my Firefox and Chrome (both on Mac).

What version of Firefox and what platform are you using.?

I’ll go and check on my old PC and see if there’s a difference in Windows.

1 Like

Just checked on my PC and Firefox and Chrome (latest versions) show your page exactly as my screenshot above and are both the same. It looks like the issue may just be you or you are using an older version of Firefox perhaps.

I would suggest clearing your cache in Firefox and updating to the latest version and then re-test. If the problem persists then we’ll have to think of something else to try :slight_smile:

(Make sure you don’t have zoom or text resize on by accident )

1 Like

Using 88.0 (64-bit) on Linux Mint 20.1


Ok I don’t have Linux to test on but I can’t believe it would be that far out. Have you tries clearing the cache and retesting?

Can you show a screen shot with the developer tools window open showing the css etc?

1 Like

Just tried wife’s Win 10 Firefox and it’s fine. Just remoted into my work PC, which is Win 10 and it’s fine there as well! What the heck!
I’ve cleared the cache here and still getting that weird padding effect. But only with Foundation linked. This is real head scratcher. :face_with_raised_eyebrow:

Dev tools image attached…

As rendered by an old Firefox


1 Like

It’s the font-stack.

Your Linux Firefox only seems to have has sans-serif in that stack which renders a bit higher than the others.

What font is used in your default heading outside of foundation? have a look on developer tools then perhaps add that to your font-stack before the sans-serif.


I do. smile

Firefox 88 on Ubuntu 20.10:


Yes looks like a linux problem. What font face is that using. It’ll be underlined on Firefox devtools I believe.

1 Like

Interesting. It says “sans serif”, although I do have Arial installed.

1 Like

Ah ha! Mystery may be solved!

This is in Foundation

font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;

I changed the first family to Verdana , and then Arial, instead of Helvetica and it aligns perfectly.

I don’t have Helvetica Neue, Helvetica, or Roboto installed - I do have Arial - so shouldn’t my system have used that font? Do browsers use the stack in order?



Yes it should but maybe there’s a different spelling in linux for Arial. I can’t test unfortunately but you should be able to run a few tests and see for yourself if arial gets used :slight_smile:

1 Like

Hey - thanks for all the help! I’ll figure out the rest as it appears to be completely on my end. :blush:

1 Like

I tested on Chromium and it looked OK.

On Firefox, it was very definitely using the generic sans-serif - until I removed Helvetica from the font stack, at which point it switched to Arial and aligned correctly. upsidedown

I don’t have “Helvetica Neue”, Helvetica or Roboto on my system, only Arial.