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
Related
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.
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 would be very grateful for some help with a Safari image resizing issue as I have spent three days on this one problem.
I am building a responsive store with Woo Commerce using the Canvas template.
The problem is with the Safari browser...it won't enlarge the images to fit their container div and be evenly spaced and sized.
Here is a category page for your reference: http://omshivaloka.x-gr.net/product-category/shop/men-2/men-malas/
Here is a single product page, with the issue at the bottom beneath: "Products you may like": http://omshivaloka.x-gr.net/shop/hanuman/
I researched extensively all over the internet to find a solution and keep hearing to change the height and width in my CSS to:
ul.products li.product a img {
height: 100%!important;
width: 100%!important;
}
It's making them stretch, and is therefore not a solution.
In my Woo Commerce configuration, I have set the size of that picture to be 210*300px - Safari is not recognizing that...or maybe it is and is not outputting it immediately?
Perhaps you are having the same experience as I am in seeing the image expand when you mouse over it. Strange indeed...
I appreciate any help...thank you!
Cassandra
I have an ecommerce website which uses Wordpress CMS and Woocommerce plugin.
The product images looks good on all the browsers except Internet Explorer.
When a category page loads, the product images have some white dots that disappear after the page completly loads. But on Internet Explorer the dots don't disappear.
I've read something about the jQuery fadeIn function. But I don't know the solution for this.
You can see below the problem:
Full screen image: here
Still no answer. This is important. Any help will be great.
It's an Internet Explorer bug, which appears when using fadeIn animations. You have to adjust the black level of the image by replacing real black (#000000) with very dark gray (e.g. #010101).
You can use Gimp to replace the colors: Colors > Map > Color Range Mapping
More information here, here, here and here.
This is a bit weird. When I apply -webkit-transform: translate3d(0px, 0px, 0px); to images on a site I am building, they look fine initially. But when I start scrolling or resize the browser window to above a certain size (roughly past 1200x1024) the images get all glitched up, containing parts of other images, or of the site. All stretched, cut up. Sometimes even change color and whatnot. This also applies to the #font-face text that is floating above the images. I assume this is very isolated case in combination with Win7x64/ATI Firepro v5800/Chrome version. But its a bit annoying to build a site this way :)
Anyone came across a similar issue and knows how to solve it, or should i just notify google of this?