SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Thelma's Avatar
    Join Date
    Jun 2004
    Location
    San Antonio. TX
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Email Question

    I have this code for a cell:

    <td bgcolor="#5a89b5" width="200" style="padding: 5px 10px; font-family: Arial, sans-serif;">
    <img src="http://xxx.jpg" alt="Photo of a Pipeline System" width="180" height="239" style="display:block; margin-left: 8px;">
    <h3 style="background-color: #14283c; color: #ffffff; padding: 5px; font-size: 17px;"><a style="color: #ffffff; text-decoration: none;" href="http://www.xxx.html">Turbine Air Inlet Filtration System Life Cycle Cost</a></h3>
    <h2 style="font-size: 13px; color:#ffffff; padding: 0; margin: 0; background-color: #5a89b5; text-align: right;">by: <a style="color: #ffffff; text-decoration: none;" href="http://xxx.com/">xxx.</a></h2>
    <p style="background-color: #99ccff; padding: 15px 10px 15px 10px; text-align: left; font-size: 13px;">Text Text Text, &hellip;<br><a style="color: #ffffff;" href="http://xxx.html">more &hellip; </a></p>
    </td>

    And in Outlook 10, I get a white bar, about 25 px high right under the picture. I cannot figure out what is causing this. I've played around with all my backgrounds - nothing seems to make a difference.
    This cell is in this table:
    <table width="600" bgcolor="#879fb8" cellspacing="0" cellpadding="0" border="0">
    and this is the tr:
    <tr bgcolor="#14283c" style="color: #ffffff;">

    Any ideas what could be causing this?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I was going to suggest adding display: block to the image, but you already have that. How about adding a bg color to the image?

    Code:
    <img src="http://xxx.jpg" ... style="display:block; margin-left: 8px; background: #5a89b5;">
    Worth a try, anyhow.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast Thelma's Avatar
    Join Date
    Jun 2004
    Location
    San Antonio. TX
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - I tried, but that didn't fix it. I ended up adding a margin:0 to the h3, that takes care of it. Unfortunately, it also moves the h3 box directly under the image, but that's better than that white thing.

    I also tried changing that 0 margin to 5px, that gave me a white stripe above and below the h3 text.

    At least I've worked out that it's an issue with the h3 and not the image, just don't know how to fix it yet, bur I can live with the image touching the text box.

    Thanks again.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You could try padding on the <h3> instead.

    I guess it doesn't matter so much with an email, but I'm still ill at easy by your use of headings. There's no logic to using an h3 followed by an h2. I presume you are using them for their presentational qualities, but you could just as well use plain text, or <p>s, styled as needed. Just saying, for future reference.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast Thelma's Avatar
    Join Date
    Jun 2004
    Location
    San Antonio. TX
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's 'just' an email, so SEO isn't an issue, I either just placed them randomly, or I thought, at that time, that the company name was of more importance than the article title. Which, come to think of it, makes more sense even now.


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
  •