What's the Fix for an iFrame Height Issues in FireFox?
css, firefox, html, iframe
Solution
The solution to the issue I was having was a `<span>` class with the property of `display:none;` (used for jQuery page loading), I changed this to a `<div>` with the property of `visibility: hidden;` and this has fixed the issue.
It seems to only be an issue in FireFox. I'm not sure if it's a bug or maybe just my poor coding.
Hopefully this saves someone else a lot of stress in the future.
Problem
I have looked around and gone through my code several times, but just can't find a solution to my issue: The iFrame in FireFox: The iFrame in Chrome: HTML: ``` <iframe width="100%" height="100%" frameBorder="0" id="map" src="link-to-map"></iframe> ``` CSS: ``` #map { max-width: 900px; height: 400px !important; padding: 10px; margin: 20px auto; } ``` Nothing I try fixes the height issue in FireFox, has anyone else had this problem and found a solution?