I have no experience in HTML, I just needed to create an HTML version of an email signature, but the images keep appearing chopped up once viewed by a different screen/maybe browser. They look normal to me when I create them and open in safari, then the client gets a chopped pieces (cropped from the top, some of the them not all) of the slices.
an example of code of one of these signatures is the following:
What is it that I’m missing? Does it have to do with the code or with the slices? Slices are not chopped up the way they appear. And why are they appearing well to me but chopped somewhere else? Any guidance is appreciated!
I’m guessing the problem lies with the 140px height you have given the table.
Your individual rows have heights of 52, 13.9, 13.9, and 73, which adds up to 152.8, so something is going to get cut off to fit within the 140px restriction. Anything set to 13.9px will be rounded to 14px, so your content is 13px larger than your table.
With html email all bets are off but here’s a few suggestions.
You’ve applied line-height:0 which would effectively cut all the text short (if you had any) in normal browsers and text would overlap so I would remove that or set line-height:1 but set line-height:0 on the image instead;
Also you are setting images to display block in the style rule but a lot of email clients strip style tags from the code so you need to apply the styles to each image inline instead.
e.g. <img src="img.gif" width="291" height="52" style="display:block;float:left;" >
Also you added the align attributes in the style block and align attributes are HTML and not css which probably rendered the style block invalid anyway. Barring the fact that you set align twice with different values saying the opposite of each other.
You set the align value like this
e.g. <img align=“absbottom” etc…
Also as @TechnoBear pointed out stop using half pixels as there is no such thing and you don’t need a height on the table as the content will control the height.
You probably also want to add style=“display:block” to the anchors that hold the image unless you have inline content against them. I’m also guessing that your use of float left is not needed either but without real code to test its hard to say.
However none of the above may make any difference as some email clients simply don’t like html
Thank you for your reply! What do suggest for making a signature for Outlook/Office 365? The adjusted html files didn’t work and the images are not showing properly Please advise on how to make something that wont be problematic!
Please advise on how to make something that wont be problematic!