Recently, I encountered an issue with a tool I had developed for generating printable images for Cross-Stitch work. The tool was originally designed to work on Firefox but is now only functioning properly on that browser.
The problem at hand is whether the page renders correctly in Firefox Desktop Browser according to standards or not. If not, I'm looking for insights into what might be causing this discrepancy and potential workarounds to ensure compatibility with other modern browsers like Chrome, Edge, Opera, Safari, and mobile versions of these browsers.
The tool's expected behavior includes clicking on "Browse" to select an image, then clicking "Generate" to display the image below with a grid overlay. The user can customize parameters such as grid cell size, page margins, and options to fill the image with squares.
The challenge lies in ensuring that the image scales appropriately within the containing div while honoring specified sizes for the grid. Despite attempts to address this issue, it seems that most browsers are not responding as expected.
To simplify troubleshooting, here is a snippet of the key parts of the HTML and CSS:
<table>
<col>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
#div {
display: inline-block;
position: relative;
}
#img {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}If anyone can provide insights into addressing this issue or optimizing the code for better cross-browser functionality, I would greatly appreciate it.