After meticulously slicing up multiple images in Photoshop and exporting them with the necessary CSS table mark-up, everything appeared to be perfectly aligned. However, once the Bootstrap CSS file was included on the page, some of the images started going out of alignment on desktop browsers, while strangely remaining intact on mobile devices.
An illustrative example is provided below where a particular image (#3) is off by 4 pixels with Bootstrap 3 and 6 pixels with Bootstrap 4, causing an undesirable misalignment:
Table Layout without Bootstrap
div.Table_01 {
position:absolute;
left:0px;
top:0px;
width:272px;
height:340px;
}
.
.
.
body {
background: yellow;
}<div class="Table_01">
<div class="jyd-01">
....
.....
</div>The issue arises when Bootstrap is added as demonstrated in the following snippet:
div.Table_01 {
position:absolute;
left:0px;
top:0px;
width:272px;
height:340px;
}
.
.
.
body {
background: yellow;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="Table_01">
....
.....
</div>To rectify this unexpected misalignment, adjusting the CSS property to top:64px might serve as a quick fix. However, it may lead to further misalignment issues on mobile devices.
This discrepancy seems to recur across all exported tables from Photoshop, and despite thorough research, no definitive solution has been found. The unique combination of Photoshop sliced tables with Bootstrap usage presents a challenge that I seem to tackle alone. Nonetheless, any insights or assistance would be greatly appreciated. Thank you.