MacOS – Safari 10.1 doesn’t display the page correctly:

displaymacossafari

Safari 10.1 doesn’t display the page correctly in part that the picture and title that supposed to be on the middle and display properly on Fair Fox and Chrome displayed on the side of the screen.

I find a similar question on Apple Communities:

https://discussions.apple.com/message/31621999#31621999

The suggested solution is to Restore Standard Fonts:

Try Applications > Font Book > File > Restore Standard Fonts

But I could not find where in Applications > the Font Book File located.

How do I find it or use it in another solution to fix formatting issues in Safari 10.1?

example

//EDITED

<style type="text/css">
    .pics-wrapper {           
  display: -ms-flexbox;      
  display: -webkit-flex;     
  display: flex; 
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.pics-wrapper: width: 851px;

table {             
  display: -ms-flexbox;      
  display: -webkit-flex;     
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

.left-pics p,
.right-pics p 
.bottom-pic p
{            
  display: -ms-flexbox;      
  display: -webkit-flex;     
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;

}

.left-pics img,
.right-pics img 
.bottom-pic img
{
  padding:2px;
}



@media (max-width:960px) {
 .left-pics p,
 .right-pics p 
 .bottom-pic p
 {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
 }
   }

Best Answer

It seems like you've run into a bug with the Safari renderer. Resize the window vertically and the page reflows correctly. Resize horizontally and the page extends horizontally incorrectly. I'd avoid using tables for layout and stick to using flex.

Extract the image out of the table layout. Replace the following from your code:

<table id="Table_01" border="0" width="851" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2">&nbsp;</td>
    <td colspan="7" rowspan="9"><img id="biggest_one" style="display: block; margin-left: auto; margin-right: auto;" src="https://www.nycgo.com/images/uploads/homepage/Empire-State-Building-Observatory-Tom-Perry-2618.jpg" alt="" width="480" height="640" name="biggest_one"
      /></td>
    <td colspan="2" rowspan="10">&nbsp;</td>
    <td><img src="photo_over/spacer.gif" alt="" width="1" height="3" /></td>
  </tr>
</table>

with the following:

<img id="biggest_one" style="display: block; margin-left: auto; margin-right: auto;" src="https://www.nycgo.com/images/uploads/homepage/Empire-State-Building-Observatory-Tom-Perry-2618.jpg" alt="" width="480" height="640" name="biggest_one">

Then add the following CSS to .pics-wrapper: width: 851px;.

The solution referred to in your link (not that it would solve the problem here but it's something you asked for) is as follows:

  1. Open the Font Book app from the Applications folder.

  2. Choose the File menu followed by Restore Standard Fonts.

Related Question