So I have LITERALLY no idea what i’m doing. I’m just trying to set up a very basic website where people can go to view a spreadsheet and a few other small things. I just want the iframe to show the spreadsheet, and nothing else. I’ve got it looking exactly how i want in chrome, however, after taking a look at it on firefox / IE I noticed that the scroll bars were showing.
After tweaking the size I’ve realized that it’s happening because in firefox it’s showing a 1-pixel gap on the left INSIDE the iframe which is causing it to be pushed to the right, and going 1 pixel out of my set width. If I raise the width by 1 pixel to remove the scroll bars on firefox, it will have a 1-pixel wide gap on the right side in chrome because it then goes past the width of the content of the sheet and adds blank space which is white and not transparent.
The way to fix this would be to somehow 1) remove the 1-pixel gap inside the iframe on firefox 2) ignore the issue and just say screw firefox users or 3) set the background to be transparent but I don’t think that’s possible since I’m not hosting the file. I’ve tried downloading the spreadsheet as HTML and hosting it locally but google adds the row/column numbers and messes it all up…
Currently, the best solution I can think of is somehow setting the width/height to go past the actual width/height of the sheet to remove scrollbars, then somehow cropping the extra white space. Then again IDK if that’s possible. Like I said I have no clue what I’m doing. I’m learning as I go. I’ve tried scrolling=“no” I’ve tried overflow, CSS, literally everything. I’ve been trying to figure this out for the last 3 days and I’m done looking. Somebody, please help…
Website - https://www.fretsmasherscores.com
Here’s my code. I’m aware it’s probably completely trash and probably has unneeded stuff/stuff that doesn’t even work. Like I said I only know the very basics of HTML and I’m using this as a project to learn it.
<html lan="en-US"> <title>Fret Smasher Leaderboard</title> <head> <?php wp_head() ?> </head> <body> <body style="margin:0; background: url(https://i.imgur.com/HTNjOZy.png); background-attachment: fixed; background-repeat: no-repeat; background-size: 100%; overflow-x: touch; overflow-y: touch; "> </body> <div class="frame1"> <div style="width:1336px; height:4244; overflow: touch; margin:0 auto; box-shadow: 0px 50px 80px 100px;"> <iframe style="overflow:hidden;" name="iframe_1" width="100%" height="100%" widget="false" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen " src="https://docs.google.com/spreadsheets/d/e/2PACX-1vT103t3twgQYr1kUClid3Mwgup8s3JkkBy-MCr57Owxfhir6SwYgGIh2KXEthzyXKTbfRotn6g8vTmg/pubhtml?embedded=false&widget=false&headers=false&chrome=false" ></iframe> </div> </html>
Honestly, I’m probably just going to download the spreadsheet as html and then learn how to make it fill in the tables automatically from the spreadsheet, but I have no clue how to do that.