Stylesheet not loading in Firefox, js also not working

americanapublishing · September 1, 2008

I was testing our page on Firefox and noticed the stylesheet isn't loading! We also use lightbox with jquery to display our product images, but that is also not working properly.

Here are the contents of the stylesheet:

/*
 $Id: stylesheet.css 1739 2007-12-20 00:52:16Z hpdl $
 osCommerce, Open Source E-Commerce Solutions
 [url="http://www.oscommerce.com"]http://www.oscommerce.com[/url]
 Copyright © 2003 osCommerce
 Released under the GNU General Public License
*/
.boxText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.errorBox {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #ffb3b5;
font-weight: bold;
}
.stockWarning {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #cc0033;
}
.productsNotifications {
background: #f2fff7;
}
.orderEdit {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #70d250;
text-decoration: underline;
}
BODY {
background: #ffffff;
color: #333333;
margin: 0px;
}
A {
color: #333333;
text-decoration: none;
}
A:hover {
color: #638650;
text-decoration: blink;
}
FORM {
display: inline;
}
TR.header {
background: #ffffff;
}
TR.headerNavigation {
background: #c9c9c6;
}
TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #c9c9c6;
color: #ffffff;
font-weight: bold;
}
A.headerNavigation {
color: #FFFFFF;
}
A.headerNavigation:hover {
color: #e0e0e0;
}
TR.headerError {
background: #ff0000;
}
TD.headerError {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #ff0000;
color: #ffffff;
font-weight: bold;
text-align: center;
}
TR.headerInfo {
background: #00ff00;
}
TD.headerInfo {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #00ff00;
color: #ffffff;
font-weight: bold;
text-align: center;
}
TR.footer {
background: #c9c9c6;
}
TD.footer {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #c9c9c6;
color: #ffffff;
font-weight: bold;
}
.infoBox {
background: #e7e7e7;
}
.infoBoxContents {
background: #ffffff;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.infoBoxNotice {
background: #FF8E90;
}
.infoBoxNoticeContents {
background: #FFE6E6;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
TD.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: #f9f9f9;
color: #2e2e2e;
}
TD.infoBox, SPAN.infoBox {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
background: #f8f8f9;
}
TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
background: #f8f8f9;
}
.main {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
}
TABLE.productListing {
border: 1px;
border-style: solid;
border-color: #f9f9f9;
border-spacing: 1px;
}
.productListing-heading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #f5f5f5;
color: #2e2e2e;
font-weight: bold;
}
TD.productListing-data {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
A.pageResults {
color: #0000FF;
}
A.pageResults:hover {
color: #0000FF;
background: #FFFF33;
}
TD.pageHeading, DIV.pageHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #2f2f2f;
}
TR.subBar {
background: #f4f7fd;
}
TD.subBar {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #333333;
}
TD.main, P.main {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
}
TD.smallText, SPAN.smallText, P.smallText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
TD.accountCategory {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
color: #aabbdd;
}
TD.fieldKey {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
TD.fieldValue {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
TD.tableHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
SPAN.newItemInCart {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #ff0000;
}
CHECKBOX, INPUT, RADIO, SELECT {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}
TEXTAREA {
width: 100%;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}
SPAN.greetUser {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #f0a480;
font-weight: bold;
}
TABLE.formArea {
background: #f1f9fe;
border-color: #7b9ebd;
border-style: solid;
border-width: 1px;
}
TD.formAreaTitle {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
SPAN.markProductOutOfStock {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
color: #c76170;
font-weight: bold;
}
SPAN.productSpecialPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}
SPAN.errorText {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}
.moduleRow {
}
.moduleRowOver {
background-color: #D7E9F7;
cursor: pointer;
cursor: hand;
}
.moduleRowSelected {
background-color: #E9F4FC;
}
.checkoutBarFrom, .checkoutBarTo {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #8c8c8c;
}
.checkoutBarCurrent {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #333333;
}
.messageBox {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.messageStackError, .messageStackWarning {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background-color: #ffb3b5;
}
.messageStackSuccess {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background-color: #99ff00;
}
.inputRequirement {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #ff0000;
}
h1 {
font-family: Verdana, Arial, sans-serif;
font-size: 19px;
font-weight: bold;
color: #333333;
margin-bottom: 0;
padding-bottom: 0;
}
h2 {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
color: #333333;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
}
.mws_boxTop {
background: url('images/infobox/top.gif');
font-family: Tahoma;
font-size: 11px;
text-align: center;
color: #999999;
font-weight: bold;
background-repeat: repeat-x;
vertical-align: middle;
white-space: nowrap;
}
.mws_boxLeft {
background: url('images/infobox/left.gif');
}
.mws_boxRight {
background: url('images/infobox/right.gif');
}
.mws_boxBottom {
background: url('images/infobox/bot.gif');
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.mws_boxCenter {
background: #FFFFFF;
}
.mws_boxTop_main {
background: url('images/infobox_main/top.gif');
font-family: Tahoma;
font-size: 11px;
text-align: center;
font-weight: bold;
background-repeat: repeat-x;
vertical-align: middle;
white-space: nowrap;
}
.mws_boxLeft_main {
background: url('images/infobox_main/left.gif');
}
.mws_boxRight_main {
background: url('images/infobox_main/right.gif');
}
.mws_boxBottom_main {
background: url('images/infobox_main/bot.gif');
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.mws_boxCenter_main {
background: #FFFFFF;
}
A.mws_boxTop {
color: #999999;
}
TD.noborderbox {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

The javascript for a toggle box is working fine, but the popup lightbox will not function. I can post our product_info as well if anyone would like to take a look.

Here is the lightbox css as well:

/* ------------------------------------------------------------------------
This you can edit.
------------------------------------------------------------------------- */

div.pictureHolder .top .left { background: url(../images/prettyPhoto/tl.gif) top left no-repeat; } /* Top left corner */
div.pictureHolder .top .middle { background: #fff; } /* Top pattern/color */
div.pictureHolder .top .right { background: url(../images/prettyPhoto/tr.gif) top left no-repeat; } /* Top right corner */

div.pictureHolder .content a.next:hover { background: url(../images/prettyPhoto/btnNext.gif) center right no-repeat; cursor: pointer;outline:none; } /* Next button */
div.pictureHolder .content a.previous:hover { background: url(../images/prettyPhoto/btnPrevious.gif) center left no-repeat; cursor: pointer;outline:none; } /* Previous button */
div.pictureHolder .content a.close { width: 62px; height: 36px; background: url(../images/prettyPhoto/btnClose.gif) center left no-repeat; cursor: pointer;outline:none; } /* Close button */

div.pictureHolder .bottom .left { background: url(../images/prettyPhoto/bl.gif) top left no-repeat; } /* Bottom left corner */
div.pictureHolder .bottom .middle { background: #fff; } /* Bottom pattern/color */
div.pictureHolder .bottom .right { background: url(../images/prettyPhoto/br.gif) top left no-repeat; } /* Bottom right corner */

div.pictureHolder .loaderIcon { background: url(../images/prettyPhoto/loader.gif) top left no-repeat; } /* Loader icon */

/* ------------------------------------------------------------------------
DO NOT CHANGE
------------------------------------------------------------------------- */

div.prettyPhotoOverlay {
	background: #000;
	position: absolute; top: 0; left: 0;
	z-index: 1;
	width: 100%;
}

div.pictureHolder {
	position: absolute; z-index: 2;
	top: 50%; left: 50%;
	width: 200px;
}

	div.pictureHolder .top {
		position: relative;
		height: 20px;
	}
		* html div.pictureHolder .top { padding: 0 20px; }

		div.pictureHolder .top .left {
			position: absolute;
			left: 0;
			width: 20px; height: 20px;
		}
		div.pictureHolder .top .middle {
			position: absolute;
			left: 20px; right: 20px;
			height: 20px;
		}
			* html div.pictureHolder .top .middle { position: static; }

		div.pictureHolder .top .right {
			position: absolute;
			top: 0; left: auto; right: 0;
			width: 20px; height: 20px;
		}

	div.pictureHolder .content {
		position: relative;
		background-color: #fff;
		text-align: left;
		width: 100%; height: 40px;
	}

		div.pictureHolder .content .details {
			display: none;
			margin: 10px 15px 0 20px;
		}
			div.pictureHolder .content .details p { float: left; clear: left; margin: 0; }

	div.pictureHolder .content div.hoverContainer {
		position: absolute; z-index: 2000;
		top: 0; left: 0;
		width: 100%;
	}

	div.pictureHolder .content a.next {
		position: relative; z-index: 2000;
		display: block; float: right;
		text-indent: -10000px;
		width: 49%; height: 100%;
		background: url(../images/en/buttons/btnNext.gif) 10000px 50% no-repeat; /* Need to be defined that way to fix an IE bug */
		outline:none;
	}	

	div.pictureHolder .content a.previous {
		cursor: pointer;
		display: block;
		text-indent: -10000px;
		width: 49%; height: 100%;
		background: url(../images/en/buttons/btnPrevious.gif) -10000px 50% no-repeat; /* Need to be defined that way to fix an IE bug */ 
		outline:none;
	}

	div.pictureHolder .content a.close {
		float: right;
		display: block;
		text-indent: -10000px;
		outline:none;
	}

	div.pictureHolder .bottom {
		position: relative;
		height: 20px;
	}
		* html div.pictureHolder .bottom { padding: 0 20px; }

		div.pictureHolder .bottom .left {
			position: absolute;
			left: 0;
			width: 20px; height: 20px;
		}
		div.pictureHolder .bottom .middle {
			position: absolute;
			left: 20px; right: 20px;
			height: 20px;
		}
			* html div.pictureHolder .bottom .middle { position: static; }

		div.pictureHolder .bottom .right {
			position: absolute;
			top: 0; left: auto; right: 0;
			width: 20px; height: 20px;
		}

	div.pictureHolder .loaderIcon {
		display: none;
		position: absolute;
		top: 50%; left: 50%;
		margin: -16px 0 0 -16px;
		width: 32px; height: 32px;
	}

	div.pictureHolder #fullResImage { display: block; margin: 0 auto; }

Thanks!!

americanapublishing · September 1, 2008

I noticed the following in Firefox:

1. Neither stylesheet.css or the lightbox stylesheet are being used, but with the webmaster toolbar I can view them. Does this mean they are being loaded but not used?

2. I can save my stylesheets to the desktop, and then go to "css" -> "add user stylesheet..." and choose the main one, and then the site looks fine. If I do the same for the lightbox one, the lightbox popup then works! Does this mean the css is being blocked for some reason by the browser?

FIMBLE · September 1, 2008

Hi Staci

Error: The stylesheet http://americana-publishing.com/stylesheet.css was not loaded because its MIME type, "text/html", is not "text/css".

Source File: http://americana-publishing.com/union-paci...otive-p-33.html

Line: 0

Error: The stylesheet http://americana-publishing.com/css/prettyPhoto.css was not loaded because its MIME type, "text/html", is not "text/css".

Source File: http://americana-publishing.com/union-paci...otive-p-33.html

Line: 0

Firefox error consol reports the above.

I checked my sites using the J query and this does not show.

Nic

americanapublishing · September 1, 2008

Hi Nic!

I really appreciate your help today :) even though the issue is not due to your contribution. I love having multiple pics and the nice lightbox effect on the site without a huge amount of js.

I added the following to my css files:

<?php

ob_start ("ob_gzhandler");

header("Content-type: text/css; charset: UTF-8");

header("Cache-Control: must-revalidate");

$offset = 60 * 60 ;

$ExpStr = "Expires: " .

gmdate("D, d M Y H:i:s",

time() + $offset) . " GMT";

header($ExpStr);

?>

Adding this again did not seem to fix the problem. Doesn't this identify the css as a stylesheet?

americanapublishing · September 1, 2008

We also have the following in the .htaccess:

AddHandler application/x-httpd-php5 .php .html .htm .css .js

americanapublishing · September 1, 2008

Also noticed the following in Internet explorer:

In the "temporary Internet Files" folder, css files are showing as type "HTML Document". I'm really confused here, because we specifically define the js and css files as such. The js files are fine and show correctly.

germ · September 1, 2008

Well I don't pretend to know all there is to know about these things, but I think this is a mistake:

I added the following to my css files:

<?php

ob_start ("ob_gzhandler");

header("Content-type: text/css; charset: UTF-8");

header("Cache-Control: must-revalidate");

$offset = 60 * 60 ;

$ExpStr = "Expires: " .

gmdate("D, d M Y H:i:s",

time() + $offset) . " GMT";

header($ExpStr);

?>

If you look at the stylsheet.css in Firefox it has this at the top:

ï»¿<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /home2/americz7/public_html/stylesheet.css:1) in <b>/home2/americz7/public_html/stylesheet.css</b> on line <b>3</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /home2/americz7/public_html/stylesheet.css:1) in <b>/home2/americz7/public_html/stylesheet.css</b> on line <b>4</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /home2/americz7/public_html/stylesheet.css:1) in <b>/home2/americz7/public_html/stylesheet.css</b> on line <b>7</b><br />

At least I believe that code is the culprit.

It really screws things up...

:huh:

americanapublishing · September 1, 2008

Thanks for the suggestion germ, I think I've narrowed the problem down.

we use an addhandler for our pages to parse them all through php. This way, we can gzip them, set an expiration date, and make sure they are identified correctly by the browser. It has worked well up until this point.

The reason for the errors you quoted is that the css is not being run through PHP. The code we add to our php and js files is php, and therefore the pages MUST be run through php in order to function correctly.

It is working correctly for javascript on the site, along with all other filetypes...except not css! Our serving company has made a change blocking this. I know the code is correct, I know I haven't done anything on the site that would affect it, and it has been working for months. However, our serving company makes changes often without letting us know and has even restored backups on our LIVE store, causing orders and customers to be lost. They refused to even admit that it was done.

I've removed the css entry for the addhandler and removed the code from the css files for using gzip, identifying the filetype, and setting an expiration date. The site is now working, but not the way we want it to. I believe we will be switching to another serving company very soon, but would like feedback on what changes could have been made to the actual server that would disable the addhandler for css only.

Thanks for your help!

americanapublishing · September 1, 2008

Just for reference, this is what we do to parse our pages through php:

1. Add the following to the .htacess:

AddHandler application/x-httpd-php5 .php .html .htm .css .js

2. Add the following to javascript files throughout the site:

<?php 
ob_start ("ob_gzhandler");
header("Content-type: text/javascript");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($ExpStr);
?>

3. Add the following to css files throughout the site:

<?php 
ob_start ("ob_gzhandler");
header("Content-type: text/css");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($ExpStr);
?>

That's it! Now our css and javascript are half their original size, are identified correctly to all browsers, and will not be reloaded every pageload. They can be set to expire in hours or in days. If the site is live, we set most of ours to 7-10 days. This whole thing keeps the site working quickly and efficiently.

tfbpa · March 11, 2009

Works like a charm!

Thanks Staci :D

Just for reference, this is what we do to parse our pages through php:

1. Add the following to the .htacess:
AddHandler application/x-httpd-php5 .php .html .htm .css .js
2. Add the following to javascript files throughout the site:
<?php 
ob_start ("ob_gzhandler");
header("Content-type: text/javascript");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($ExpStr);
?>
3. Add the following to css files throughout the site:
<?php 
ob_start ("ob_gzhandler");
header("Content-type: text/css");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($ExpStr);
?>
That's it! Now our css and javascript are half their original size, are identified correctly to all browsers, and will not be reloaded every pageload. They can be set to expire in hours or in days. If the site is live, we set most of ours to 7-10 days. This whole thing keeps the site working quickly and efficiently.

Stylesheet not loading in Firefox, js also not working

Recommended Posts

americanapublishing

americanapublishing

FIMBLE

americanapublishing

americanapublishing

americanapublishing

germ

americanapublishing

americanapublishing

tfbpa

Archived

Browse

Activity