I have been trying to find the issue for this for awhile now and I can't figure out why these thin hairline borders are appearing in Gmail Only. I have tried to set bgcolors on all the TD elements, even all my tables are border:collapse (see code below). Any help would be much appreciated. You can see these on the edges. It looks like a thin border slicing through the email horizontally.
The image is here as I can't post images just yet.
http://imgur.com/Q7IfLnt
table {
border-collapse:collapse !important;
border-spacing: 0 !important;
Margin: 0 auto;
}
Have you inlined the css just to be sure
also put the border collapse on TDs too
Related
I have a responsive email layout where some elements stretch the entire width of the viewport, whatever that may be.
In Android (native mail and Gmail app on 4.4 at least) There appears to be a ~10px padding on either side. Is there any property or trick for negating this?
(I feel like this question should have been asked somewhere already, but searches provide only completely unrelated HTML email margin issues, so sorry if this is a duplicate).
Tried
Cancelling out the body margin. This affected the layout but did not fix the issue. The result of the following code simply removed the padding on the left but doubled the padding on the right in the native app.
html, body{
padding:0 !important;
margin:0 !important;
width:100% !important;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
font-size:100% !important;
width:100% !important;
}
No change in the Gmail app.
More insights
It seems the body remains the same width in the viewport regardless of width settings. If you set the width to 1000px, the email is shrunk to fit in the area with the margin on either side. The margin can be cancelled out using margin:0 on the body but the body stays the same size, resulting in the extra space appearing on the right.
I believe that the client is programmatically resizing the email to fit in a given width. The only way around this is likely to somehow "trick" the client. Nothing seems to have worked yet...
The problem is simply margins, the Android 4.4 email client is applying a margin value on all sides (but its not actually visible on the right side), so even before your email message is rendered, its messed with overall viewport already.
You can normalize it, via the below block.
body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; font-size:100% !important; }
https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat/
The problem is with left and right padding on the outermost div.
So instead, make a wrapper div that is wider than your content div, and center your content div in it. For example, my content div is 350px wide, and my wrapper div is 450px. This centers my content div perfectly, with my desired 50px on each side that I couldn't achieve with padding. This basically mimicked the 50px left and right padding that I was after.
For top and bottom padding, Gmail had no issues. So for the top and bottom of my div, I was able to just use padding.
Hope this helps someone stuck like I was.
This page http://wildlife.x-tremeteam.com utilizes the CSS border-image property and a .png image with a transparent edge to create a "torn paper" look on my divs. It works great except on my Android (Samsung SIII), whether I'm using its default browser or the Chrome app. On that I can see a slight edge on the inside and outside of the 20px border. Interestingly, I do not see the edge on the corners. The background of the div with the border is transparent. I only apply a background color to the div inside that.
Browsers on my desktop, the iPhone I use for testing and all renderings on responsinator.com don't show the edge of the image.
It must have something to do with the div's background-color property because if I set that to RED, the edges do turn red. However, making this property transparent won't remove it.
CSS is as follows, which also includes a default div property which did not help:
div {border: 0; border-style: none; }
.BoxGrunge {
border-color: #7777777; /* this won't really be seen */
border-style: double;/* this won't really be seen */
border-width: 20px 20px 20px 20px;
-webkit-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
-moz-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
background-color: transparent; /* otherwise there is a white edge on Android */ /*THIS DOESN'T HELP */
display: block !important;
margin: 0 0 5px 0;
}
Thanks, I have been staring at this for hours and can't figure it out.
I finally found it myself. Mostly.
It was the REPEAT value of the border-image properties.
After much testing with images and divs of different colors, I realized that all four sides (not the corners) were being slightly repeated in the other/wrong direction as well. So when my image was an orange box that was transparent at the outside edges, a tiny sliver of orange was being repeated on the outside edge. It did not happen on iPhone 6, just Android and possibly older iPhones.
In other words, for the top, the image was being repeated horizontally as needed. But it also repeated vertically just a little bit.
I am guessing this is some sort of Android bug.
I fixed it by using STRETCH instead for smaller media queries.
I don't like it but that's what worked.
It's hard to formulate a brief title. What happens is that the background-color of the centered div extends to the left and right edges of the screen and the background-color of the body is ignored or overridden.
I'm using the twentythirteen theme for this document.
It sets a width smaller than the full width and uses margin:0 auto to center the content divs.
In a standard native web view component in our app on Iphone and Android, the automatic margin (left and right) does not become the background-color of the body, but white. Between elements in the content div the correct background-color shows through their margins.
Also, Chrome on Android shows the same white margins.
Have both leading OS developers decided that their respective -kits should do this, or what is going on? Note that the CSS validator throws up hundreds of errors - well, programming a proper theme from scratch is not in the budget for this project.
If you can link to a web page where this works, I could make the web view load that and check.
A background-color is set on several classes.
.entry-header, .entry-content, .entry-summary, .entry-meta {
background-color: #ffffff;
margin: 0 auto;
max-width: 604px;
width: 100%;
}
Delete the background-color and the issue will be fixed.
On my page http://goo.gl/ kNAXq (remove the space in your browser, please don't replace the link here as I don't want google to link this page to my site.) when you click on the S in the MAP using your average pc/mac browser you get a popup with scrolling bars, which is intended. I do not see those borders on my android mobile phone's standard browser, though, what doesn't fit in is cut off there. What could be the cause?
Also Routenplanung and Zur Karte are not clickable even though they are valid links:
Routenplanung
and
<a style="a:link {text-decoration:underline;}" href="#mapdiv">Zur Karte</a>
Why do they not work as intended?
There's no scroll bars in mobile browsers, for the most part. You just need to drag the content in the div up, however, the div is too small to properly grab on to (at least based on what I see on the desktop, it's taking forever to load on my phone...).
Links don't work because you have another element on top of it... The <i> (why i?) is positioned absolute and over the top of the links.
First of all, <i> is for italicizing text and it's deprecated. A better setup, I believe, would be to put the shadow on the containing div. Just get rid of the i element. One downside is , you'll need to change how the background color is implemented on the grey table cells.
Just add shadow as a class to the div.
Then alter the css, like so:
.results-bl.shadow {
-webkit-box-shadow: inset 0px 0px 10px rgba(0, 1, 1, 0.5);
-moz-box-shadow: inset 0px 0px 10px rgba(0, 1, 1, 0.5);
box-shadow: inset 0px 0px 10px rgba(0, 1, 1, 0.5);
}
I have a table in a webview that I use in an android app.
The problem is that "background-image:-webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#202020));" causes a white line in between the <td>s of that table. Border-collapse or border:none only works without the gradient.
The lines does not appear on all android devices (appears on Galaxy S2, zte blade for example) and does not appear in chrome or iphone. Result is the same without just background:-webkit... but with black lines instead.
Any suggestions?
css:
.sporttable tr:nth-child(1)
{
background-image:-webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#202020));
background-size: auto;
color: #fff;
font-weight: bold;
}
I solved this using a gradient background image behind the css, this will make the lines almost non visible on the effected devices. Advantages against just using an image background is that the css scales much better and the gradient is much smoother. Far from a perfect solution, but it works.