What's the Fix for an iFrame Height Issues in FireFox?

Question

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?

Answer 1

Try placing the iframe at

height:100%;

in a div of

height: 400px !important;

or just make the iframe

height: 400px;

Answer 2

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.