How Do I Get Rid of the Sliver of Background Color Showing Between HTML Tables

How Do I Get Rid of the Sliver of Background Color Showing Between HTML Tables
0

#1

Hey folks, I have a question.

I have a table structure in which a table is divided into two halves using a percentage of 50% each. Everything looks to be equally proportioned, EXCEPT for a sliver of the main table’s background color showing through - between the two tables. I’ve exhausted the Google Chrome inspector tool to find out the problem and I can’t seem to solve it!

See screenshot here:

HTML Code here (section of importance):

<!--start of html email-->
<table width=100% border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td>
			<!--start of container-->
			<table class="container" width="600px" align="center" cellspacing="0" cellpadding="0" border="0">	
				<!--start of header row-->
				<tr>
					<td>
						<!--start of left column-->
						<table class="header-left" width="50%" align="Left" cellspacing="0" cellpadding="0" border="0" style="background: rgb(101,255,253); background: -moz-linear-gradient(-45deg, rgba(101,255,253,1) 0%, rgba(34,150,238,1) 100%); background: -webkit-linear-gradient(-45deg, rgba(101,255,253,1) 0%,rgba(34,150,238,1) 100%); background: linear-gradient(135deg, rgba(101,255,253,1) 0%,rgba(34,150,238,1) 100%); padding: 15px 15px 75px 15px;">
							<tr>
								<td style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: white;"><img src="https://s15.postimg.cc/oo83ajx8b/logo.png">
								<h2 style="padding: 25 0 10px; font-size: 30px; margin: 0; font-weight: 300; line-height: 1 padding: 0 0 10px">Get ready for</h2>
								<h1 style="font-size: 80px; margin: 0; line-height: 1;">HERO</h1>
								<p style="font-style: italic; font-size: 14px; margin: 0; line-height: 1.5em; padding: 20px 0 50px;">It seems like hundreds of new iWatch apps pop up every week, but which ones should you bother trying?</p>
								<a href="#" class="ghost-btn" style= "font-size: 12px;border-radius: 3px; border: 2px solid white; text-decoration: none; color: white; padding: 15px 15px; text-transform: uppercase;">Learn more</a>
								</td>
							</tr>	
						</table>
						<!-- end of left column -->

						<!--start of right column-->
						<table class="header-right" width="50%" align="Right" cellspacing="0" cellpadding="0" border="0" style="background-color: white">
							<tr>
								<td style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: #7d7d7d;">
									<table class="links" width="100%" align="center" cellspacing="0" cellpadding="0" border="0" style="padding: 10px;">
										<tr>
											<td align="center">
												<a href="#" style="font-size: 14px; font-weight: 600; text-decoration: none; color: #7d7d7d;">About</a>
											</td>
												
											<td align="center">
												<a href="#" style="font-size: 14px; font-weight: 600; text-decoration: none; color: #7d7d7d;">Career</a>
											</td>
											<td align="center">
												<a href="#" style="font-size: 14px; font-weight: 600; text-decoration: none; color: #7d7d7d;">Contact</a>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td align="center" valign="bottom" style="padding-top: 7px">
									<img src="https://s15.postimg.cc/4gz8wdmob/smartwatch.png" style="position: relative; bottom: -2px;">
								</td>
							</tr>	
						</table>
						<!--end of right column-->
					</td>
				</tr>	
				<!--end of header row-->

#2

Doesn’t show for me when I open the page in Chrome.
Also works fine in JSFiddle. https://jsfiddle.net/EdMagal/mk4xzh9v/

Where are you opening this page?


#3

My guess is Outlook or some other email software?


#4

@EdMagal, @RandellDawson, I have the files on my Editor and saved as an html file, of which I then open in my browser - Chrome. And wow! Yes, @EdMagal, in your JSFiddle version, there is no gap! You didn’t change anything at all in the code? Thanks for the help!


#5

I put your code into my local editor and the opened the page with Chrome and I see the following:


#6

@RandellDawson…hmmmm! Interesting! Atleast it is working for you all though…so for any client I’ll be good lol…


#7

Look fine in Thunderbird, I tried sending it using this service

I assume this means there is more code, so maybe the problem is elsewhere. Does giving the <table> background: white fix it?