Iframe CSS

@Dragonfire2008Dec 30.2011

I am trying to use an iframe to display a page that I have on my website. Only problem I have is that for some reason the CSS will work in Chrome but not in Firefox. It is linked internally in the iframe’d page…

[code]<link href=”../../_css/calendar.css” rel=”stylesheet” type=”text/css” />[/code]

I tried using absolute reference, but that just killed it altogether.

Anyone know of this problem?

to post a comment

CSS

9 Comments(s) _↴

@bionoidDec 30.2011 — #Does your iframe page have a well formed document? As in , does it have a doctype, head, body etc?

Also, to me an absolute reference would be something like this (obviously depending on where the css files are stored):

[CODE]<link href="/_css/calendar.css" rel="stylesheet" type="text/css" />[/CODE]

That assumes [B]_css[/B] is on the root of your host.

@Dragonfire2008authorDec 30.2011 — #Bah, I always get absolute and relative mixed up, but nevertheless, that's not the problem.

This is the page housing the iframe...

http://tricityfullgospelministries.org/calendar_beta.php

and this is the page in the iframe...

http://tricityfullgospelministries.org/_includes/calendarIframes/december2011.php

@bionoidDec 31.2011 — #You have some PHP errors happening in this page, starting at line 34:

http://tricityfullgospelministries.org/calendar_beta.php

The iframe page looks the same to me in IE9, FF and Chrome. Maybe you had a caching issue? But it doesn't look great IE8 and below.

@bionoidDec 31.2011 — #Ah! I see what's happening. In the iframe page, you are using an <article> tag, which is not being recognised by some browsers... html5 specific?

After removing that <article> tag and all the article classes in the stylesheet, it pretty much looked the same in all browsers.

[CODE]...
 </head>
 
 <body>
 [COLOR="Red"]<article>[/COLOR]
 <div class="calendarMonth">December 2011</div>
 <div class="eventIndexBox">
 <div class="eventIndexYes">-</div>
 ...[/CODE]

[CODE]...
 [COLOR="red"]article[/COLOR] .calendarMonth {
 text-align: center;
 font-family: Tahoma, Geneva, sans-serif;
 font-size: 2em;
 font-weight: 500;
 margin-bottom: 10px;
 color: #FFF;
 }
 ...[/CODE]

@Dragonfire2008authorDec 31.2011 — #I removed the article tags and css code, but still didn't change. I just noticed I'm using IE8 (shows how much i don't use it), i'll upgrade it to IE9 and check it out.

I even did a hard refresh in FF9 and nothing, hmmmm...

@bionoidDec 31.2011 — #I tried it in IE7, IE8, IE9, FF3 and Chrome and the css is working for me. Even IE6 looked relatively normal.

Try clearing the cache in the browser giving you issues and Ctrl+F5 the page again.

You still have those PHP errors in the calendar_beta.php file though.

@Dragonfire2008authorDec 31.2011 — #Which PHP errors are you speaking of?

@bionoidDec 31.2011 — #[B]calendar_beta.php[/B]

[CODE]...
 
 function processPrevious() {
 
  if (currentCalendar == 0) {
   currentCalendar = calendars.length;
  }
  currentCalendar--;
  document.getElementById("currentMonth").innerHTML = "<br />
 [COLOR="Red"]<b>Warning</b>:  include(_calendar/&quot; + calendars[currentCalendar] + &quot;) [<a href='function.include'>function.include</a>]: failed to open stream: No such file or directory in <b>/home/tricit16/public_html/_includes/scripts.php</b> on line <b>16</b><br />
 <br />
 <b>Warning</b>:  include(_calendar/&quot; + calendars[currentCalendar] + &quot;) [<a href='function.include'>function.include</a>]: failed to open stream: No such file or directory in <b>/home/tricit16/public_html/_includes/scripts.php</b> on line <b>16</b><br />
 <br />
 <b>Warning</b>:  include() [<a href='function.include'>function.include</a>]: Failed opening '_calendar/&quot; + calendars[currentCalendar] + &quot;' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in <b>/home/tricit16/public_html/_includes/scripts.php</b> on line <b>16</b><br />[/COLOR]";
 return false;
 }
 
 function processNext() {
 
  currentCalendar++;
  if (currentCalendar == calendars.length) {
   currentCalendar = 0;
  }
  document.getElementById("currentMonth").innerHTML = "<br />
 [COLOR="red"]<b>Warning</b>:  include(_calendar/&quot; + calendars[currentCalendar] + &quot;) [<a href='function.include'>function.include</a>]: failed to open stream: No such file or directory in <b>/home/tricit16/public_html/_includes/scripts.php</b> on line <b>26</b><br />
 <br />
 <b>Warning</b>:  include(_calendar/&quot; + calendars[currentCalendar] + &quot;) [<a href='function.include'>function.include</a>]: failed to open stream: No such file or directory in <b>/home/tricit16/public_html/_includes/scripts.php</b> on line <b>26</b><br />
 <br />
 <b>Warning</b>:  include() [<a href='function.include'>function.include</a>]: Failed opening '_calendar/&quot; + calendars[currentCalendar] + &quot;' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in <b>/home/tricit16/public_html/_includes/scripts.php</b> on line <b>26</b><br />[/COLOR]
 ";
 return false;
 }
 
 ...[/CODE]

@Dragonfire2008authorDec 31.2011 — #Oops! I was trying something else and forgot about that part, thanks.

Actually I have to change that script to work with the new code I have now, so far so good.

Also in #CSS _↴

css animation Problem getting CSS defined borders to show on site fluid layout question concerning min width?

Success!

Help @Dragonfire2008 spread the word by sharing this article on Twitter...

Tweet This

Iframe CSS

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Iframe CSS

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴