0

I've run into a problem at work with Safari 6 on OS X. When viewing an archive of a sent email (by clicking the "click here to see online" link), Safari displays the newsletter at about 50% of its actual size. This is not replicable on any browser in Windows (including Safari), which leads me to believe it's an OS X issue???

LINK: http://uofi.uic.edu/emailer/newsletter/41090.html

It's supposed to be a mobile-friendly page that resizes based on viewing size.

I looked into it and realized that the max-width was not having much of an effect (a table should go 100% unless otherwise specified - max-width allows it to go 100% but limits it from exceeding a specific width) and when max-width was replaced by width, it worked perfectly. However, this prevents it from being viewable on a mobile-device or scalable in a desktop browser.

Anyone have any idea what is causing ONLY Safari 6 on OS X to render this badly?

As a side note, if you refresh the page, randomly it displays properly (at 600px rather than 350px). However, this only works if you reenter the URL by highlighting the address bar and clicking Enter. If I click the refresh button, it doesn't work all that often. Regardless, this is not a solution for our user base.

Would greatly appreciate any input/feedback!

Thanks.

Minja
  • 786
  • 1
  • 11
  • 20
  • Why don't you simply set `width: 600px` instead of `max-width: 600px`? Also note as this is a newsletter, that Outlook doesn't support `max-width`: [How make background image on newsletter in outlook?](http://stackoverflow.com/a/12970586/1456376). – insertusernamehere Sep 20 '13 at 16:55

1 Answers1

1

Set display: inline-table; and thats it...

<table.. style="background:#e7e7e7; width:100%; max-width: 600px; display: inline-table;"..>
Black Sheep
  • 6,604
  • 7
  • 30
  • 51
  • Unfortunately this doesn't solve the problem. Also the default display value of a ``-element is `table`.
     – insertusernamehere Sep 20 '13 at 17:06
  • before was: `display: table-row-group;` – Black Sheep Sep 20 '13 at 17:09
  • Really? Safari 6.0.5 shows `display: table` in the inspector, as expected. – insertusernamehere Sep 20 '13 at 17:14
  • Yes.. now.. I updated now my answer... but the problem is the display - option – Black Sheep Sep 20 '13 at 17:18
  • So, none of my table's have the structure you listed above. I can't set the outermost table to have a max-width because it needs to be as wide as the browser window (it displays a background color). The outermost table (the one I presume you want me to make changes on) works perfectly. It's the inner table that's causing problems. – Minja Sep 20 '13 at 17:20