Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by patrickknowles
patrickknowles
1,150 Points

Image in HTML Email - Why Is There Spacing Between My Image and Borders?

I've created an HTML Email file with a header. The header contains 2 sections: One section with 145 pixels on the left side of the header. It contains an image that is linked. The second is 445px and contains text and link to another image.

Everything displays normally with a 5px border surrounding both sections, however when I insert my HTML email as text in Outlook (or open in IE), section One, with the picture, displays taller than section two. In other words, the section with the image no longer lined up to match the section on the right. It matches well in Chrome and Safari - it just doesn't work in Outlook or IE. Can somebody shed light?

Adam Rolfson
Adam Rolfson
2,132 Points

Hi Patrick Knowles,

I believe it is to do with how Outlook handles images, you may fare better if you externally size the image to what you would like it to display as before injecting it in through the image link. Basically crop it down in some image editor (GIMP is FREE!) and then re-export it to the same file name so you don't have to change any code if you don't want to.

IE should render the HTML (roughly the same as Chrome and Firefox). This could be just a simple issue with the HTML, or an older version of IE not rendering the more modern code. Make sure you have the most current version of IE.

If you can paste in the HTML you reference we can then help to look it over things to figure it out.

1 Answer

patrickknowles
patrickknowles
1,150 Points
patrickknowles
patrickknowles
1,150 Points

HI Adam, I've tried to insert code but can't seem to get it to display.

Adam Rolfson
Adam Rolfson
2,132 Points

Use three backticks before and after your code like my example below. (In my example I am using apostrophes, to prevent it from placing the example inside the code box.) The backtick looks like character after the arrow --> `

Directly after the first set of backticks, identify the type of code you are inputting. Make sure to separate your other comments by at least one line above the top backticks and one line below the bottom backticks.

'''html

Insert Code Here

'''

The backtick is the key directly above the 'Tab' key on your keyboard, also located directly below the 'Esc' key.

Done correctly, it should appear like the below. (There is a preview button in the bottom right of the comment box, be sure to check that before you post, so you know your code shows correctly)

insert code here