iframe/GoogleMaps/Cross-browser compatibility issue

[wmdvanzyl]

The google maps being shown in the iframe doesn't stay within expected size.

Url: http://renaultpaarl.co.za/contact
Firefox 31: no issue
Chrome 37: issue exists
IE: not sure yet

** Note: I am using Pure framework ( http://purecss.io/ ) version 0.4.2

Template:

Code: Select all

<!-- start content -->
    <div class="pure-g-r" id="content">
        <div class="pure-u-1-1">
            <h1 id="content_header">{title}</h1>
            {cgsi_convert}{content}{/cgsi_convert}
        </div>
        {if $leftblock == '+' || $rightblock == '+'}
        <hr/>
        <div class="pure-g-r">
            {if $leftblock == '+'}
                <div class="pure-u-1-2">
                    <div id="left_block">
                        {cgsi_convert}{$leftblockcontent}{/cgsi_convert}
                    </div>
                </div>
            {/if}
            {if $rightblock == '+'}
                <div class="pure-u-1-2">
                <div id="right_block">
                        {cgsi_convert}{$rightblockcontent}{/cgsi_convert}
                    </div>
                </div>
            {/if}
        </div>
        {/if}
        
    </div>

CSS:

Code: Select all

#left_block {
    padding-right: 10px;
    border-right: 1px;
    border-right-style: solid;
    border-right-color: rgb(168, 168, 168);
}
#right_block {
    padding-left: 10px;
}

Content (leftblock):

Code: Select all

< iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3317.844722271202!2d18.963116984655752!3d-33.73883115906857!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1dcda83a1df10d5f%3A0x469acb355d1bfeb5!2s233+Main+St%2C+Paarl+7646%2C+South+Africa!5e0!3m2!1sen!2s!4v1405930760282" frameborder="0" width="620" height="480"></ iframe>

[staartmees]

using Firefox 32, the map hdisappears under the contactform

[velden]

Would a width="100%" instead of fixed width of 620px for the iframe help?

[wmdvanzyl]

Would a width="100%" instead of fixed width of 620px for the iframe help?

THat gave the same result in Firefox31, but gave a muuch smaller map in Chrome...

[Dr.CSS]

1) The side margins on the body are too much so any smaller size in the browser window makes the site really small...

2) the div is set to 1/2 the site width but the iframe is set to 620 and if set to 100% it will be very narrow which would most likely make it not very tall, set it to 100% and put it above or below the side bar...

3) This is why I never use frame works, I code all my sites individually including the responsive ones, less code and easier to find any problems...

Your site also has no DOCType and that can cause havoc in browsers...

http://validator.w3.org/check?verbose=1 ... %2Fcontact