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.
Hi,
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.
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:
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
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”.
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
(Make sure you don’t have zoom or text resize on by accident )
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.
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 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
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.
I don’t have “Helvetica Neue”, Helvetica or Roboto on my system, only Arial.
