google calendar not appearing properly only in IE

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
dkim18Asked:
Who is Participating?
 
armchangConnect With a Mentor Commented:
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
 
terencinoCommented:
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
 
armchangCommented:
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
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
Frosty555Commented:
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
 
dkim18Author Commented:
I am testing this on windows 7 and IE8/IE9. The Compatibility View didn't matter.
0
 
dkim18Author Commented:
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
 
armchangCommented:
dkim18,

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

a
0
 
dkim18Author Commented:
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
 
dkim18Author Commented:
0
 
armchangCommented:
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
 
dkim18Author Commented:
I am not following...
I searched text in entire site, but couldn't find <meta http-equiv="X-UA-Compatible" content="IE=7">.
0
 
armchangCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.