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: 2013-01-03

Who is Participating?

Solutions

LVL 7

armchangConnect With a Mentor Commented: 2013-01-04

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

LVL 16

terencinoCommented: 2013-01-03

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

LVL 7

armchangCommented: 2013-01-03

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

LVL 31

Frosty555Commented: 2013-01-03

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.

dkim18Author Commented: 2013-01-03

I am testing this on windows 7 and IE8/IE9. The Compatibility View didn't matter.

dkim18Author Commented: 2013-01-04

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?

LVL 7

armchangCommented: 2013-01-05

dkim18,

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

a

dkim18Author Commented: 2013-01-05

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

dkim18Author Commented: 2013-01-05

this is the link.

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

LVL 7

armchangCommented: 2013-01-05

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">

dkim18Author Commented: 2013-01-06

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

LVL 7

armchangCommented: 2013-01-06

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