wrapping text around an image in y! groups
Friday, 27 June 2008 6:38 pm by noelposted in places, tech | tags: html tables, image, yahoo, yahoo groups
i have been using yahoo! groups to send out newsletters. in the pursuit of making these newsletters look a little more attractive i wanted to have some small images with the text wrapping around them. easier said than done. yahoo! groups only allows a small, specific subset of css and html to be used in posts. if your html and css tags are not in that specific subset then your code either gets stripped out or replaced by their “safe” tags. that made things a lot more complicated.
adding css style tags to an image tag doesn’t cut it. its not allowed. i checked the docs. wrapping the image tag in spans or divs doesn’t work either. the end result would be that the text will be placed below the image instead of wrapping around it.
the solution i found is to go retro and table the image — wrap the image tag in a single cell table, i.e.:
<table cellpadding="0" cellspacing="0" border="0" align="left" hspace="10" vspace="10">
<tr><td valign="top">
<img src="url/imagename.ext" width="150" height="150" border="0" alt="" />
</td></tr>
</table>
of course, you replace the url/imagename.ext with the address and name of the image you are using and, depending on your alignment inclination, replace the align=”left” to align=”right” in the table tag if you want the image to either be on the left or right side of the page.
one other quirk with regards posting/sending out newsletters in a yahoo group that you have to watch out for is the margin to the right. because of an advert, the width of the upper part of the newsletter is limited to about 500 pixels, give or take a few (arrows 1 and 2) . you’d have to set the width of your text table to about 490. if you go over that, there a large possibility that the advert will overlap and cover your content (arrows 3 and 4).
links:
list of allowed css and html code in a y! groups post
.
