search

nottinghamcollege / HTML-Email-Boilerplate-Redux

A rewrite of the original HTML email boilerplate (originally written by Sean Powell) that keeps up with the latest developments of email clients, providing a solid foundation for our email campaigns, and yours too!
MIT License
79 stars 15 forks source link

Floating tables in Safari 5.0/5.1 (Windows) #10

Closed jamesmacwhite closed 10 years ago

jamesmacwhite commented 10 years ago

Came across an interesting issue with Safari 5.1.7 (Windows) when floating two tables. Compare the two images, the first screenshot is the correct and expected output and the other Safari 5.1.7 on Windows, where things are a little broken to say the least:

Expected visual:

correct-web-version

Safari 5.1.7 (Windows):

safari-windows-5-1-7

What brought up this detection was an Inbox Inspection test that happened to be the AOL webmail client running on Safari 5.0 (Windows). So this behaviour is at least present in the Safari 5.x series on Windows.

The Windows version of Safari has been discontinued so its using an older version of the webkit engine, however its behaviour in handling the two floating tables is rather strange, using development tools and Firefox as a comparison, you can see how the elements are displayed differently.

Firefox 31 Developer Tools:

firefox-dom

Safari 5.1.7 Developer tools:

safari-windows-5-1-7-dom

Safari seems to display the table at 100%, despite the specific width set both as an attribute and CSS property, causing the two floated tables to appear below each other as if it being stacked on a mobile. The float seemingly doesn't work at all but as the table is taking up 100% space this is probably why.

jamesmacwhite commented 10 years ago

Using the developer tools in Safari and seeing how it treats the table as a clue, it seems setting the display value of the table with the float (align attribute) to any of the following seems to stop from this from happening:

Various table display values also seem to work.

jamesmacwhite commented 10 years ago

After testing this more, it looks like Safari 5.0/5.1 Windows is a bit sensitive to the table align attribute. In this scenario, there were a couple of unneeded align="center" attributes on the table cell containing the nested floated table and also one within the floated table itself which seemed to cause the issue where by the float had been completely removed and hence stacked.

Setting the affected table cells to align="left" displays the table and floats as expected without any display properties being used.