CODEWITHSUNDEEP
htmlcssfirefoxiframe
James Craig
James Craig

Reputation: 6854

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

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:

FireFox iFrame

The iFrame in Chrome:

Chrome iFrame

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?

Upvotes: 5

Views: 7774

Answers (3)

James Craig
James Craig

Reputation: 6854

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.

Upvotes: 2

Mtkhan
Mtkhan

Reputation: 25

<iframe width="880px" height="380px" frameBorder="0" id="map" src="link-to-map"></iframe>

#map {
max-width: 900px;
height: 400px !important;
padding: 10px;
margin: 20px auto;

}

Hope that'll work...

Upvotes: 0

babusi
babusi

Reputation: 520

Try placing the iframe at

height:100%;

in a div of

height: 400px !important;

or just make the iframe

height: 400px;

Upvotes: 1

Related Questions