0

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;
 }
   }
  • Can you share a link to the page you are having the issue with? – grg Aug 31 '17 at 16:55
  • the bottom small picture is not in the middle and left pictures are not visible. there is no such issue in other browsers: sfreorealty.com/home/studentt.html – User Aug 31 '17 at 17:36
1

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.

  • This solution doesn't work: the same wrong formatting as earlier. – User Aug 31 '17 at 17:37
  • @User Yes, restoring fonts is for when you have a problem with the display of text content. They play no role in the location issues you have. – Tom Gewecke Aug 31 '17 at 17:42
  • Any idea how to fix this formatting? – User Aug 31 '17 at 18:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .