[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

google calendar not appearing properly only in IE

Posted on 2013-01-03
12
Medium Priority
?
339 Views
Last Modified: 2014-11-12
Hi Experts,

I am trying to embed a google calendar in my website and it gives me problem only in IE.
This is the site:

http://kcc-austin.org/

FF and Chrome work OK.

the google calendar is on the left side.

This is the code.
<iframe src="https://www.google.com/calendar/embed?showTitle=0&amp;showPrint=0&amp;showCalendars=0&amp;showTz=0&amp;height=260&amp;wkst=1&amp;hl=ko&amp;bgcolor=%23FFFFFF&amp;src=thbohov99c1llpt4jvr0606jtc%40group.calendar.google.com&amp;color=%23A32929&amp;src=3pedgqfu7ulif8oc2v4fajfim0%40group.calendar.google.com&amp;color=%2323164E&amp;src=en.usa%23holiday%40group.v.calendar.google.com&amp;color=%232952A3&amp;src=ko.christian%23holiday%40group.v.calendar.google.com&amp;color=%235229A3&amp;src=p%23weather%40group.v.calendar.google.com&amp;color=%23875509&amp;src=ko.south_korea%23holiday%40group.v.calendar.google.com&amp;color=%236E6E41&amp;ctz=America%2FChicago" style=" border-width:0 " width="200" height="260" frameborder="0" scrolling="no"></iframe>

Open in new window


thanks in advance
google-calendar.png
0
Comment
Question by:dkim18
12 Comments
 
LVL 16

Expert Comment

by:terencino
ID: 38742487
Interesting, the single line of code you sent works fine in IE, but not the website? With the code, IE asks if I want to allow blocked content, but doesn't give any warning for the website
...Terry
0
 
LVL 7

Expert Comment

by:armchang
ID: 38742499
hi dkim18,

I've noticed that this google calendar inside the IE that has a compatibility viewer turned off looks like this. Could you try to turn on the compatibility viewer setting on?

Go to IE->Menu->Tools->click on Compatibility Viewer

Cheers!

A
0
 
LVL 31

Expert Comment

by:Frosty555
ID: 38742683
Interestingly, I actually get the opposite effect. On Windows 8 IE10, it works fine for me.

If I turn ON Compatibility View (e.g. you click the little torn page icon and it turns blue), then I see dkim18's behavior with the calendar not showing up.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:dkim18
ID: 38742879
I am testing this on windows 7 and IE8/IE9. The Compatibility View didn't matter.
0
 
LVL 7

Accepted Solution

by:
armchang earned 2000 total points
ID: 38743641
Found it!

The reason was because you've commented the first line inside your page. If the page doesn't have DOCTYPE tag defined properly IE8/9 will default to quirks mode instead of the standard mode which causes Google's calendar to behave wrongly.

Try to uncomment that tag or replace it with this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

:)

armchang
0
 

Author Comment

by:dkim18
ID: 38744476
armchang,

yes, it works. however, the weather icons are missing on IE8(IE9 works ok.) unlike firefox.

http://kcc-austin.org/bbs/church_calendar.php

Is this an IE version issue?
0
 
LVL 7

Expert Comment

by:armchang
ID: 38746425
dkim18,

I'm confused. Can you show me what weather icons do you mean? Maybe you can attach an image here.

a
0
 

Author Comment

by:dkim18
ID: 38746951
plz see both images. one is from IE8 and the other one is from IE9.
20130105-102933-no-icons.png
20130105-102933-yes-icons.png
0
 

Author Comment

by:dkim18
ID: 38746953
0
 
LVL 7

Expert Comment

by:armchang
ID: 38748126
This is funny, I'm not seeing any weather icons in all the browsers. But I've seen inside you have another frame calling the google calendar which has a meta set to IE-7. If you could try and change that value to IE-9 and see what happens?

This is the code that needs to change to IE9:
<meta http-equiv="X-UA-Compatible" content="IE=7">  to
<meta http-equiv="X-UA-Compatible" content="IE=9">
0
 

Author Comment

by:dkim18
ID: 38748141
I am not following...
I searched text in entire site, but couldn't find <meta http-equiv="X-UA-Compatible" content="IE=7">.
0
 
LVL 7

Expert Comment

by:armchang
ID: 38749872
hi dkim18,

You can try opening Firefox and then move your cursor anywhere inside the Google calendar and then right click it, select This Frame-> View Frame Source.

You can find in there.

armchang
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
This Micro Tutorial will demonstrate the easy use of Gmail embedding images in your email so the recipient of your email can view them in context.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month19 days, 2 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question