Changes to Hotmail
Just another example of how we need to keep up with web technology.
- Comments: Both comments and pings are currently closed.
Microsoft, and in this case Hotmail always have the tendency to do something a little different, just for the sake of it.
While there has always been hotmail specific issues when creating eflyers. e.g. gaps between the images, therefore often disrupting designs and layouts, this was easily fixed by applying and inline style of style=”display:block;” to each and every image. Google Mail soon followed displaying images in a similar fashion (and fixed by display:block).
There has been some interesting changes made to Hotmail within recent weeks. While most of them can be seen as positive it has however had a few issues when displaying email, the main issues being, centrally aligning tables/divs and applying background colours. While the code seems to be working correctly in all other browsers and even in hotmail (if you disable certain hotmail stylesheet elements or extend the width of the initial table/div), it ultimately seems to be overwritten by javascript and stylesheets created and used within the surrounding hotmail interface (therefore untouchable).
If you have the firefox plugin try displaying the following class .ReadMsgBody .ExternalClass {display:inline-block;} seems to be the main issue. (the inline-block disabling all content outside the main table/div structure. While it is possible to extend a tables width past 770px so that it may centralise it in hotmail, for usability purposes it is not advised, with the user having to then use the horizontal scrollbar to view the content).
To compensate this, within the header section of your eflyer if you add the following simple bit of code it seems to nicely overwrite the new code mentioned above and display the eflyer in the correct way it is displayed in all other browsers.
<style type=”text/css”>
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
</style>
Comments.
- Comments: No responses to this article
