I am using Photoshop slices -- yes, yes, it's 2018, and we no longer need slices and table layouts...except when we do. My image is an extremely large piece of custom art, and I have to identify 50-odd people within it.
So I made slices of all the people I needed to identify in the image and created Photoshop's html table and image layout. Everything works fine on all browsers and platforms EXCEPT Chrome on Windows 10! Does anyone have any insight as to what is going on please?
Please do not mark this question down. If I'm doing something wrong, or you have a suggestion, please let me know.
<table id="Table_01" width="2187" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
* {
margin:0;
padding: 0;
}
#Table_01 {
width: 2187px;
height: 3649px;
margin: 0;
font-size: 0;
}
table td {
font-size:0px !important;
line-height: 0px !important;
}
img {
display:block !important;
vertical-align: top;
float: left;
}
I am temporarily posting my site here.
Sigh. I had to abandon this whole approach. Nothing seemed to help Windows 10 render a complex table without white space between the images. I ended up making a big image map using Adobe Fireworks. Then, of course, I had to abandon Bootstrap Tooltips because they don't work with image maps. I used jqueryui Tooltips instead.
html:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<img name="fireworks" src="img/fireworks.jpg" width="2186" height="3648" border="0" id="fireworks" usemap="#m_fireworks" alt="" />
<map name="m_fireworks" id="m_fireworks">
<area shape="rect" coords="930,288,1244,544" title="<span class='tt-header'>Person 1</span><br/><span class='tt-body'>my title</span>" alt="dippy" id="" />
<area shape="rect" coords="1507,2131,1566,2249" title="<span class='tt-header'>Person 2</span><br/><span class='tt-body'>my title</span>" alt="nellie" id="" />
...
</map>