iframe/GoogleMaps/Cross-browser compatibility issue
Posted: Fri Sep 05, 2014 12:36 pm
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:
CSS:
Content (leftblock):
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>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;
}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>