Iframe showing differently on firefox / IE (Works fine on chrome)

HTML & CSS
1

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

Screenshots

[Album] IFRAMES

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.

2

have you tried making the iframe responsive ? -
in html5 things like scrollbars etc was removed, so you cant say don’t show them. - one way or trick i to make the iframe responsive.

try this link - https://benmarshall.me/responsive-iframes/ - not a bad guide on how to make a Iframe responsive.

3

Thanks for the reply! I’ve tried that and had no luck. Luckily for me I asked one of the members of a game modding discord I run if he could help and he wrote me this bit of javascript that replaces the iframe! The only issue is the last column on the right is stretched pretty far. Other than that it auto updates like an iframe, and you can actually apply css to it!! It’s an iframe without the bullshit of an iframe it seems lmao

Preview - http://fretsmasherscores.com/

 <div id="page-content" style="width: 100% ; height:4200; margin: auto; box-shadow: 0px 50px 80px 100px;">


		 
	 </div>
	
			
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
			<script>

	

	
	

$(document).ready(function() { $("#page-content").load("https://docs.google.com/spreadsheets/d/e/2PACX-1vT103t3twgQYr1kUClid3Mwgup8s3JkkBy-MCr57Owxfhir6SwYgGIh2KXEthzyXKTbfRotn6g8vTmg/pubhtml?embedded=false&widget=false&headers=false&chrome=false&overflow=auto") });</script>
	</body>	
			 </div>
<style>
.row-header-shim {
    max-width: 0;
    font-size: 0;
}
</style>
</html>

You also need this in your css file if you want to remove the row numbers / column letters!

.row-header-shim {
    max-width: 0;
    font-size: 0;
}

.row-header-shim {
    max-width: 0;
    font-size: 0;
}

#page-content {
	max-width: 1336;
	
}
4

Hi there veggum9910,

and a warm welcome to these forums. :winky:

Why don’t you just place a link to it in your site…

<a href="https://fretsmasherscores.com/">Fret Smasher High Scores</a>

coothead

5

I don’t just post a link to it becuase the point of the website is to show a leaderboard, and have other pages with other info. I also hated having to force everyone to look at it through google’s site which has a bunch of extra stuff on screen. I figured it’d be a fun project to embed it and make a website around a spreadsheet and I got it working now! :smiley: Thank the lord for my friend!

Now for an update to my previous comment about the last cell stretching incorrectly

You know how cells can be small and you don’t see all the text sometimes, like for example, how the words “End screen” on the far right were hyperlinked to screenshots the cell still has

=HYPERLINK("https://cdn.discordapp.com/attachments/682753074191663156/683781699976691713/unknown.png","END SCREEN")

in it, though it only shows the text “End Screen”. Normally this isn’t an issue… if you have text wrap turned on! I remember reading earlier that if you have text that extends forever and doesn’t wrap itll mess with the size. I just turned on text wrapping for all columns and it’s perfect! Hopefully if anyone else comes across the same issues as me they can follow my steps and get theirs working! This javascript is a life saver!

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.