Solved

google calendar not appearing properly only in IE

Posted on 2013-01-03
12
332 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

830 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