16

Please have look the below screenshot

enter image description here

I want to positioned the lens in top area.Sadly the position value is not supported by email clients.so what can i do for that.can i use for margin-top value as minus value? hope you can help me..thanks in advance

Krish
  • 1,884
  • 2
  • 16
  • 40

2 Answers2

9

Hotmail and Outlook.com no longer support the following CSS properties:

margin
margin-top
margin-right
margin-bottom
margin-left

Here is the statement given by Litmus ..

Kheema Pandey
  • 9,977
  • 4
  • 25
  • 26
  • 3
    @ you are wrong..plz check the link http://www.campaignmonitor.com/css/.. Gmail is working fine. – Krish Feb 19 '14 at 14:02
  • 1
    @Nikhilkrishnan can you pass the rough HTML page so i can test it and give a try. – Kheema Pandey Feb 20 '14 at 04:40
  • 1
    Gmail and Hotmail do support margins: as @Krish stated: https://www.campaignmonitor.com/css/ Where did you get your source that they don't work in those browsers? – aaron-coding Apr 16 '15 at 22:53
  • 1
    @aaron-coding I've updated the answer and added the source code as well.. I hope you will not say that Litmus is lying.. – Kheema Pandey Apr 20 '15 at 06:45
  • 1
    @KheemaPandey Ok, I un-down-voted your answer because of your added source. – aaron-coding Apr 20 '15 at 21:43
  • 1
    @Krish your link is obsolete, Gmail does not support minus margin see this link https://www.emailonacid.com/blog/article/email-development/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps#gmail_tip4 – Mina Luke Jul 06 '16 at 05:24
  • Link is not valid, so I downvoted the answer. – Mate Paiva Jun 05 '21 at 01:33
5

Although the question was asked a while ago I decided to give an update since there was not complete answer and the question might still occur.

Edit:

I couldn't resist but test position relative and margin-top with a negative value it in a few mail clients...

  • Thunderbird 60: Supports both ✓
  • Gmail.com (in Firefox): Supports neither
  • Outlook.live.com (in Firefox): Supports neither
  • Roundcube 1.2.0 (in Firefox): Supports both ✓
  • K9 5.600 (in Android): Supports both (but positioning is very though) ✓

I have not tested most e-mail clients since this is enough data for me not to use it at the moment (2020-03).

Original:

The position property would support a solution as stated in the question. Read more about it here https://developer.mozilla.org/en-US/docs/Web/CSS/position

I haven't tested it but according to https://templates.mailchimp.com/resources/email-client-css-support/ Outlook, Apple mail, Windows Live mail, iOS 6, Android 4.2, Android 2.3 support properties position and top.

Gmail, Yahoo!, Gmail app, Outlook 2007 - 2013 and DO NOT support the position property.

Only Outlook.com in the list can not use margin. I'm sorry that I can't confirm if negative margins can be used.

Gerben Versluis
  • 547
  • 6
  • 7