When I view that web page in Safari on any Mac or in Safari on my iPhone or in the XCODE Simulator or in IE 11 on a Windows 8.1 PC (I have no means to test Android, so if you do please let me know), all the text within each row of those tables is perfectly centered vertically, which is also how it looks within Blocs too. But when I preview in FireFox or Chrome on any Mac or a Windows 8.1 PC, the text is thrown to the bottom of each row, which looks quite bad as shown in this screenshot:
Why is this happening only in FF & Chrome (and possibly Android, but I need someone’s help to confirm that)?
How can I fix it?
Here’s my Blocs document for the entire site including all graphics (please click on the “download” page if it isn’t already selected when you open the document).
Well, I spent all day and finally got vertical centering to sort of work in an acceptable way to me – “sort of” in that in FireFox content is just a tad bit off, but I guess that cannot be helped.
What did I do to fix the problem? Well, I killed the vertical centering on all Columns and Rows holding my table via the right sidebar. FireFox and Chrome don’t like that for some reason. I then selected the paragraphs inside each row and column of my table, and I then added Top Margin only. I tried adding Padding at the top, but that didn’t work consistently across browsers (especially FireFox) for some reason. I had to use Margin. The thing is, using Margin at the top of the text to vertically center it is somewhat of a guessing game. It’s not absolute vertical centering. And if the font size changes even the least in the browser, it won’t be absolutely centered vertically because the applied Margin at top remains the same.
Here’s the latest version of my Blocs document, for those of you curious and wanting to compare with my previous version document (found in my opening post).
