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;
 }
   }
2
  • Can you share a link to the page you are having the issue with?
    – grg
    Aug 31, 2017 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, 2017 at 17:36

1 Answer 1

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.

3
  • This solution doesn't work: the same wrong formatting as earlier.
    – User
    Aug 31, 2017 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. Aug 31, 2017 at 17:42
  • Any idea how to fix this formatting?
    – User
    Aug 31, 2017 at 18:02

You must log in to answer this question.

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