Email HTML/CSS: Get rid of ul top margin in Outlook 2007

HTML & CSS
1

I’m doing some HTML/CSS for email and I need to eliminate the ul top margin in Outlook 2007. Unfortunately margin is not supported in Outlook 2007. (pretty horrible if you ask me)

Anyone know any tricks for removing the margin? Even if it’s ugly, I don’t care.

2

You can just move the UL up the margin space instead. Using top:-(how many px);

3

How about dont use a <ul> in the first place? And for the bullet markers just use straight up images. This is ghetto, but hey, this is the world of email.

4

Assuming he adds a position:relative? I think I remember some negative top value failing in some email client… it might have been a legacy one.

5

According to the table here and the [URL=“http://msdn.microsoft.com/en-us/library/aa338201.aspx”]table here margin is supported in outlook 2007.

Therefore you could try writing an inline style in the tag itself.
e.g.

<ul style="margin:0>

However I only use tables and inline styles when creating html emails these days. I try to allow the table to do all the positioning and avoid using margins where possible.

Or you could base the email on some tested temlplates etc.

6

You’re right - it is ghetto, but it is email and Outlook 2007 CSS is yet another Microsoft fail. I’ll probably go with no ul and use image bullets as you suggest, as style: top doesn’t work either.

7

It would be

style="position:relative;top:-20px;"

or something to that effect. It may work, it may break and cause new bugs in other email clients.

I understand your hate for Outlook 07, it’s horrible… why did they even release it if it’s rendering engine is crappier than 03’s.

8

Maybe it is supported on some elements, but it definitely does not work on <ul>. I tried <ul style="margin:0> and it definitely does not work in Outlook 2007.

9

Are you sure there isn’t a typo of some sort?

<ul style="margin:0; padding:0;">

Is how it should be.

10

According to the msdn table I posted above margin is supported but I wouldn’t put it pass them to hard code some things or simply to strip your inline styles away.

You could try <ul style=“margin:0!important”> but I’m guessing that won’t work either.

I don’t have outlook 2007 to play with so I can’t confirm or deny. Do you have the whole email template that we can look at? (It will probably make no difference though.)

Outlook 2007 doesn’t understand position either :slight_smile:

11

I am going to just abandon the ul tag and go with image bullets so I don’t really need to solve this. For grins and giggles though the code for the section is below. I have tried both <ul style=“margin:0;”> and <ul style=“margin-top:0;”>.


<font size="2" face="Arial, Helvetica, sans-serif"><b>Lorem ipsum dolor sit amet, consectetur adipisicing elit:</b></font><ul style="margin:0;"><li><font size="2" face="Arial, Helvetica, sans-serif">aaaaaaaaaa</font></li>
                    <li><font size="2" face="Arial, Helvetica, sans-serif">aaaaaaaaa/font></li>
                    <li><font size="2" face="Arial, Helvetica, sans-serif">bbbbbbb</font></li>
                    <li><font size="2" face="Arial, Helvetica, sans-serif">cccccccc</font></li>
                    <li><font size="2" face="Arial, Helvetica, sans-serif">dddddddddd</font></li>
                    
                  
                    
                  </ul>
12

I dont mean to drag back an old thread but had to give my 2 cents on the issue.

yes, margin/padding is supported to an extent (like it work on some tags and not others; and left and right work but not top and bottom). Thats one thing I hate about those MSDN tables, they dont tell you the extent.

13

It’s not the tables fault-it’s the program that implimented crappy extent-aka outlook.

14