I'm trying to create space between the text and image of Ted Leonsis in this html e-newsletter. When I add padding/margins, the image either covers up the text OR the text goes above the image. Seems to work fine with firefox, chrome, safari but not with IE 7. Any help would be appreciated!

5 answers

1
point

Put a wrapper

around the image and put an inline style that floats the object right and applies the margin like this:

<div style="float:right;width:300px;margin:0 15px 15px 0;"><img src="myimage.jpg" alt="My Image Description" /></div>

Email clients (older ones specifically) like CSS to be in-line, not included or embedded in the from what my extended testing on various platforms has revealed.

Answered over 9 years ago by Gary Hepting
  • Hope you answer got accepted to get your well deserved points. Here's +1. o.k.w over 9 years ago
0
points

Thanks. I tried it and now the text on the left goes down below the image. link text

Answered over 9 years ago by Gopika Prabhu
0
points

Oh I see what's going on. It's because your floating object is outside of any block element, it's just a stupid IE thing.

Try adding the align="right" attribute to your image as well.

<img src="myimage.jpg" align="right" style="float:right;margin:0 15px 15px 0;" alt="My Description" />

Put your <img> inside that first <h4> block element you're having it float with.

IE is stupid and makes non-floating block elements clear floating elements often.

Answered over 9 years ago by Gary Hepting
  • Also, you can use hspace="10" vspace="10" for padding in older clients that don't support CSS Gary Hepting over 9 years ago
0
points

Looks like you got it with align="right", but leave the CSS positioning for the newer browsers. :)

Note: align is deprecated in xHTML 1.0, this is just a fall-back support method for older email clients and IE browsers, etc.

Answered over 9 years ago by Gary Hepting
0
points

great thanks for your help!

Answered over 9 years ago by Gopika Prabhu