Custom coded image separates when added to page

Highlighted
New Member
1 0 0

I have a custom coded image that has clickable segments and hover animations. It looks fine when you open the html file in a web browser, but when I paste the code into shopify all of the images separate like there's padding even when it's set to 0px. Below are screenshot of the problem and the code I am using.Screen Shot 2020-11-20 at 12.50.57 PM.pngScreen Shot 2020-11-20 at 12.51.09 PM.png

<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="1375" height="654" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="5">
			<img src="https://i.imgur.com/2nQlcY0.png" width="1374" height="137" alt=""></td>
		<td>
			<img src="spacer.gif" width="1" height="137" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="https://i.imgur.com/mu89Ino.png" width="931" height="178" alt=""></td>
		<td>
			<a href="https://www.pinterest.com/search/pins/?q=website%20design&rs=typed&term_meta[]=website%7Ctyped&term_meta[]=design%7Ctyped"><img src="https://i.imgur.com/OSKiopW.png" width="65" height="67" alt=""></a></td>
		<td rowspan="4">
            <img src="https://i.imgur.com/qzzLaIe.png" width="378" height="517" alt=""></td>
		<td>
			<img src="spacer.gif" width="1" height="67" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="https://i.imgur.com/m5LcUId.png" width="65" height="450" alt=""></td>
		<td>
			<img src="spacer.gif" width="1" height="111" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="https://i.imgur.com/NP0JGBF.png" width="496" height="339" alt=""></td>
		<td>
            <head>
<meta charset="utf-8">
<style>
    .card {
        width: 72px;
        height: 68px;
        background: url("https://i.imgur.com/EbRa2fu.png") no-repeat;
        margin: 0px;
    }
    .card:hover {
        background: url("https://i.imgur.com/d1gqEh6.png") no-repeat;
    }
</style>
</head>
<body>
    <div class="card"></div>
</body>
		<td rowspan="2">
			<img src="https://i.imgur.com/7msiytZ.png" width="363" height="339" alt=""></td>
		<td>
			<img src="spacer.gif" width="1" height="68" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="https://i.imgur.com/CIHRLF5.png" width="72" height="271" alt=""></td>
		<td>
			<img src="spacer.gif" width="1" height="271" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

 

 

 

0 Likes