SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict frankdux's Avatar
    Join Date
    Apr 2004
    Location
    Ashland, North Carolina
    Posts
    267
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    You can just move the UL up the margin space instead. Using top:-(how many px);
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Cross browser css bugs

    Dan Schulz you will be missed

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You can just move the UL up the margin space instead. Using top:-(how many px);
    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.
    Cross browser css bugs

    Dan Schulz you will be missed

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    According to the table here and the 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. #6
    SitePoint Addict frankdux's Avatar
    Join Date
    Apr 2004
    Location
    Ashland, North Carolina
    Posts
    267
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by SoulScratch View Post
    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.

  7. #7
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would be

    Code:
    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.
    Cross browser css bugs

    Dan Schulz you will be missed

  8. #8
    SitePoint Addict frankdux's Avatar
    Join Date
    Apr 2004
    Location
    Ashland, North Carolina
    Posts
    267
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by Paul O'B View Post
    According to the table here and the 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>

  9. #9
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you sure there isn't a typo of some sort?

    Code:
    <ul style="margin:0; padding:0;">
    Is how it should be.
    Cross browser css bugs

    Dan Schulz you will be missed

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by frank
    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.
    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.)

    Quote Originally Posted by SoulScratch
    It would be

    Code:
    style="position:relative;top:-20px;"
    Outlook 2007 doesn't understand position either

  11. #11
    SitePoint Addict frankdux's Avatar
    Join Date
    Apr 2004
    Location
    Ashland, North Carolina
    Posts
    267
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;">.

    HTML Code:
    <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. #12
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    It's not the tables fault-it's the program that implimented crappy extent-aka outlook.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

Bookmarks

Posting Permissions

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