thelma — 2012-04-02T12:35:56-04:00 — #1
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, …<br><a style="color: #ffffff;" href="http://xxx.html">more … </a></p>
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?
ralphm — 2012-04-02T19:20:35-04:00 — #2
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?
<img src="http://xxx.jpg" ... style="display:block; margin-left: 8px;<font color='"#FF0000"'> background: #5a89b5;</font>">
Worth a try, anyhow.
thelma — 2012-04-03T12:47:34-04:00 — #3
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.
ralphm — 2012-04-03T18:11:13-04:00 — #4
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.
thelma — 2012-04-03T21:24:07-04:00 — #5
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.