Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts

    Can you use Margin in HTML Emails?

    All,
    I know that I can't use the margin CSS in HTML messages because they aren't read by Gmail or Hotmail etc. Is there any kind of alternative to using Margin to position an image? Thanks in advance

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    As far as I know you can use inline CSS in HTML e-mails. Just write <img src="…" alt="…" style="margin-left: 20px">. If that doesn’t work then, of course, the alternative is using tables or a transparent spacer image.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    I tried to control it both with a div and that didn't work and then I tried to do it with this code:

    Code:
    <img src="http://website.com/newsletters/place/images/logoWatermark2.gif" height="150" width="150" style="position:absolute; margin-top:90px; margin-left:130px;">
    However this still doesn't work again.

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    i seem to remember helping someone with an email "template" a while back and they couldn't get margins to work either... I ended up suggesting he make tables via empty table cells without borders and what-not as VIP was eluding to

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    Yeah, I can't really do that since they want the image to basically overlap the corners of four different cells. Sounds like the image just has to get moved...

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Quote Originally Posted by treeleaf20 View Post
    […] then I tried to do it with this code:

    Code:
    <img src="http://website.com/newsletters/place/images/logoWatermark2.gif" height="150" width="150" style="position:absolute; margin-top:90px; margin-left:130px;">
    However this still doesn't work again.
    Well, yeah, this wouldn’t work in any regular browser, too, since absolutely positioned elements’ margins have no effect on the rest of the page.

  • #7
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    I don't want any of the other elements on the page to be affected. I only wanted the image to be affected. The other elements are in a table so I don't want them changed. I'm trying to overlay the image so that is why I was doing it that way.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •