First time email creator here, everything works well on my Mac browsers but once I jump into Outlook I run into a few problems.
Outlook (2007, and no doubt other versions) is adding margins around images, some are receiving top and bottom margin, some just top or bottom. I've applied the widths to the images (email size is no bigger than 600px wide) and also tried border="0: on them but no avail. Also made sure I don't have any margins set to my tables (which can take affect on nested TD's).
Outlook 2007/2010 adds 15px top/bottom and 10px left/right body padding to all html emails. You can't get rid of it.
See Rich HTML emails in Outlook 2007 and 2010… how do you remove the top margin? for more information.
Related
My horizontal nav bar and footer look perfect on PC, but when testing on Mac, the font is lifted about 30px above its position in the horizontal nav bar.
After trying every CSS reset and line-height adjustment, what finally worked on Mac made the font drop about 30px below its position in the horizontal nav bar on PC this time.
One Stackoverflow answer mentioned editing the glyph/baseline of a font.
I downloaded a free font editing program and noticed the characters inside of each respective square were lifted as if to have a 40px margin underneath, but I can't adjust the height of the baseline in the program.
Is there a free font manipulation program that will allow me to adjust the glyph/baseline of the font?
I appreciate your time in advance.
Try to generate your font via http://www.fontsquirrel.com/, and use the CSS for font-faces it gave you.
If the above does not work for you, try this:
Try to find out with JavaScript if the app is running on Mac. If so, load a new font-fix-mac.css file, where you will put margin-top:30px on all elements where the font is lifted above.
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
I'm trying to display an image next to my 600px Content-Table on the left and right.
The image is 1px wide and 400px high and should be streched or tiled on the X-Axis.
Ofcourse it works with different approaches in all clients but Outlook 07/10/13.
My first approach was a background-image using various VML-Methods like v:rect, v:background or v:image which all did not work.
My latest approach is to simply use an img-Tag and use width:100%, width="100%" and even mso-width-percent:1000.
Sadly, none of the 100% methods seem to work in any Outlook later than 03.
Image tag will work at 100%, but only if the image dimensions are larger than the 100%. Outlook doesn't stretch past the default image width, which in your case is only 1px.
VML should also work, try emailbg.net
I have a static layout (750px width) and I'm trying to make it renders centered and disable the horizontal scroll as well.
I did dozens of searches in google, tried lots of different viewport settings but nothing worked.
This is the site: www.motocross.es
estilos_2012.css lines 18 and 11 have a min-width: 1200px for your body. take those off and your problem is solved.
also if you want to disable horizontal scroll an overflow-x: hidden on the element you want to prevent scrolling would do the trick. read more about it here.
That is because you have min-width:1200px on your body.
On the website Ymlp.com I've designed a newsletter. Two images are below each other, but in Outlook (2007) there is a small white gap between them. Gmail, Hotmail and Thunderbird don't have this problem. On http://www.yn5.nl/2b-xcl/mailing/map/witregel.jpg you can see the problem.
This is the mailing: http://www.yn5.nl/2b-xcl/mailing/map/view.html
How to remove the white space?
You need display:block; in the style tag of your images