CSS does not work on firefox

[iwasjeff]

Hi guys,

I realize that there are some people out there who has the same problems as I do.

I'm currently designing a website and yesterday I tried putting my website on my domain.

Everything went smooth up until when I opened up my webpage on firefox.

On IE, it works perfect, but on firefox, CSS DOES NOT WORK AT all..

<-- here is my CSS code--> and please let me know if I have done something wrong if you any of you get a change to see this.

@charset "utf-8";
/* CSS Document */


{
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
	background-repeat:repeat;
	position: relative;
	min-height: 100%;
	height: auto !important;
	width: 1020px;
	height: 100%;
	margin: 0 auto -300px;
}

	

#header {
	background-repeat:no-repeat;
	width:1020px;
	height:100px;
	background-image:url(images/header-bg.jpg);	
}


#menu {
	margin:0;
	padding:0;
	background-image:url(images/menu-bggif.gif);
	width:1020px;
	height:auto;
	float:left;
}


#menu ul {
	margin:0;
	padding:0;
	line-height:30px;
	background-image:url(images/menu-bggif.gif);
}


#menu li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	font-size:16px;
	background-image: url(images/menu-bggif.gif);	
}


#menu ul li a {
	text-align:center;
	font-family:"Copperplate Gothic Light";
	font-size: 13px;
	text-decoration:none;
	height:30px;
	width:170px;
	color:#fff;
	display:list-item;	
}

#menu ul ul {
	position:absolute;
	visibility:hidden;
	top:30px;
}


#menu ul li:hover ul {
	visibility:visible;
}



#menu li:hover {
	background:url(images/menu-bggif.gif);
	color:#0C6;
}


#menu ul li:hover ul li a:hover {
	background:#fff;
	color:#000;
}

#menu a:hover {
	color:#0C6;
	border:hidden;
}

#welcome {
	background-image:url(images/welcome.jpg);
	background-repeat:no-repeat;
	float:left;
	height:404px;
	width:1020px;
}



#leftcol {
	width:1020px;
	height:691px;
	float:left;
	background-image:url(images/main.jpg);
	background-repeat:no-repeat;
	font-family:"Palatino Linotype",    "Goudy Old Style";
}

#footer {
	background-image: url(images/footer.jpg);
	float:left;
	height:300px;
	width:1020px;
	display:block;
	color:#FFF;
	text-decoration:none;
	background-repeat:repeat;
}


#wrapper #welcome #footer div .footer {
	color:#FFF;
	text-decoration:none;
}
#wrapper #welcome #footer div .footer:hover {
	color:#FFF;
	text-decoration:underline;
}

Thank you,

[ralph.m]

Hi iwasjeff. Welcome to SitePoint.

The only real error there is that this does nothing:

{
margin: 0;
}

You need something (an element or a class selector etc.) for that to apply to.

We need to see your HTML too, or preferably a live link, to see what's going on.

[iwasjeff]

Ah alright thanks ralph,

I'll check things.. on my html as it seems like I've got some problems with it..

and I'll post it here again.

Thank you

[ralph.m]

It's odd that Firefox would have such a reaction. Anyhow, if you don't want to post the code here, you can run it through the HTML validator. It will give you a list of all the errors. Fix them one at a time, though, as often one error can cause more errors down the line.

[iwasjeff]

Thanks Ralph, I'm going to try to fix that b/c it's showing tons of errors when I ran through that yesterday...

This is difficult!

Thanks!

[ralph.m]

Hang in there! Take it one element at a time. As I said, one error can cause many more errors further down, meaning that once it's corrected, everythig else tidies up.

The rules of HTML are pretty simple, so don't despair. It's really a matter of taking a systematic approach to learning this. SitePoint's HTML Reference is a nice guide to using each element.

[Paul O'B]

Sometimes one missing bracket is enough to corrupt the code and stop it showing in Firefox so make sure you catch all errors.

If that doesn't help then check the section marked my "My stylesheet doesn't work" as it may be another issue such as the server not sending the proper Content-Type header for CSS style sheets.

[iwasjeff]

Hi guys,

I've tried everything.

Validationg and etc.. but I couldn't get this to work.

So i'll post my CSS and HTML codes here and see if you guys can find something..

My website will work fine on IE 7, 8 but no on 9 or firefox.


HERE is my website: Peterboro Co-op
I validated my css and html and it was fine.


here is my css code:

@charset "utf-8";
/* CSS Document */


html, body {
height: 100%;
}
#wrapper {
	background-repeat:repeat;
	position: relative;
	min-height: 100%;
	height: auto !important;
	width: 1020px;
	height: 100%;
	margin: 0 auto -300px;
}

	

#header {
	background-repeat:no-repeat;
	width:1020px;
	height:100px;
	background-image:url(images/header-bg.jpg);	
}


#menu {
	margin:0;
	padding:0;
	background-image:url(images/menu-bggif.gif);
	width:1020px;
	height:auto;
	float:left;
}


#menu ul {
	margin:0;
	padding:0;
	line-height:30px;
	background-image:url(images/menu-bggif.gif);
}


#menu li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	font-size:16px;
	background-image: url(images/menu-bggif.gif);	
}


#menu ul li a {
	text-align:center;
	font-family:"Copperplate Gothic Light";
	font-size: 13px;
	text-decoration:none;
	height:30px;
	width:170px;
	color:#fff;
	display:list-item;	
}

#menu ul ul {
	position:absolute;
	visibility:hidden;
	top:30px;
}


#menu ul li:hover ul {
	visibility:visible;
}



#menu li:hover {
	background:url(images/menu-bggif.gif);
	color:#0C6;
}


#menu ul li:hover ul li a:hover {
	background:#fff;
	color:#000;
}

#menu a:hover {
	color:#0C6;
	border:hidden;
}

#welcome {
	background-image:url(images/welcome.jpg);
	background-repeat:no-repeat;
	float:left;
	height:404px;
	width:1020px;
}



#leftcol {
	width:1020px;
	height:691px;
	float:left;
	background-image:url(images/main.jpg);
	background-repeat:no-repeat;
	font-family:"Palatino Linotype",    "Goudy Old Style";
}

#footer {
	background-image: url(images/footer.jpg);
	float:left;
	height:auto;
	width:1020px;
	display:block;
	color:#FFF;
	text-decoration:none;
	background-repeat:repeat;
}


#wrapper #welcome #footer div .footer {
	color:#FFF;
	text-decoration:none;
}
#wrapper #welcome #footer div .footer:hover {
	color:#FFF;
	text-decoration:underline;
}

 div.c48 {text-align:center; margin-top:70px; font-family: Arial, Helvetica, sans-serif; color: #fff; font-size: 10px;}
 div.c47 {margin-top:-200px; margin-left:644px; font-family: 'Copperplate Gothic Light'; color: #fff; font-size: 18px; width: 200px; height: 150px;}
 div.c46 {margin-top:-67px; margin-left:390px; font-family: 'Palatino Linotype'; font-size: 12px; height: auto; width: 166px; text-decoration:none; color:#FFF;}
 div.c45 {margin-top:10px; margin-left:120px; font-family: 'Palatino Linotype'; font-size: 12px; height: auto; width: 166px; text-decoration:none; color:#FFF;}
 div.c44 {margin-top:-20px; margin-left:390px; font-family: 'Copperplate Gothic Light'; color: #fff; font-size: 18px;}
 div.c43 {margin-top:85px; margin-left:120px; font-family: 'Copperplate Gothic Light'; color: #fff; font-size: 18px;}
 div.c42 {margin-top:-85px; margin-left:390px; font-family: 'Palatino Linotype'; font-size: 12px; height: auto; width: 166px; text-decoration:none; color:#FFF;}
 div.c41 {margin-top:10px; margin-left:120px; font-family: 'Palatino Linotype'; font-size: 12px; height: auto; width: 166px;  text-decoration:none; color:#FFF;}
 div.c40 {margin-top:-20px; margin-left:660px; font-family: 'Copperplate Gothic Light'; color: #fff; font-size: 18px; width: 153px;}
 div.c39 {margin-top:-20px; margin-left: 390px; font-family: 'Copperplate Gothic Light'; color: #fff; font-size: 18px; width: 200px;}
 div.c38 {margin-top:32px; margin-left:120px; font-family: 'Copperplate Gothic Light'; color: #fff; font-size: 18px; width: 200px;}
 div.c37 {position:absolute; top:1055px; left:922px; font-family: 'Palatino Linotype'; font-size: 12px; height: 21px; width: 60px; visibility: inherit;}
 div.c36 {
        position:absolute;
        top:895px;
        left:741px;
        font-family: 'Palatino Linotype';
        font-size: 13px;
        color: #FFF;
        height: 163px;
        width: 228px;
        font-weight: bold
}
 div.c35 {position:absolute; top:874px; left:735px; font-family: 'Palatino Linotype'; font-size: 18px; color: #FFF; height: 77px; width: 354px; font-weight: bold}
 div.c34 {position:absolute; top:765px; left:925px; font-family: 'Palatino Linotype'; font-size: 12px; height: 19px; width: 58px;}
 div.c33 {position:absolute; top:660px; left:745px; font-family: 'Palatino Linotype'; font-size: 13px; color: #FFF; height: 40px; width: 306px; font-weight: bold}
 div.c32 {position:absolute; top:608px; left:784px; font-family: 'Palatino Linotype'; font-size: 26px; color: #FFF; height: 40px; width: 306px; font-weight: bold}
 div.c31 {position:absolute; top:1190px; left:610px; font-family: 'Palatino Linotype'; font-size: 12px; height: 18px; width: 52px; left: 610px;}
 div.c30 {position:absolute; top:960px; left:420px; font-family: 'Palatino Linotype'; font-size: 13px; color: #4b6418; height: 70px; width: 244px;}
 div.c29 {position:absolute; top:900px; left:420px; font-family: 'Palatino Linotype'; font-size: 26px; color: #4b6418; height: 40px; width: 224px; font-weight: bold}
 div.c28 {position:absolute; top:862px; left:600px; font-family: 'Palatino Linotype'; font-size: 12px; height: 19px; width: 61px;}
 div.c27 {position:absolute; top:817px; left:420px; font-family: 'Palatino Linotype'; font-size: 15px; color: #C63; height: 70px; width: 241px; font-weight: bold}
 div.c26 {position:absolute; top:847px; left:420px; font-family: 'Palatino Linotype'; font-size: 15px; color: #C63; height: 70px; width: 246px; font-weight: bold}
 div.c25 {position:absolute; top:695px; left:430px; font-family: 'Palatino Linotype'; font-size: 12px; color: #000; height: 70px; width: 252px; font-weight: bold}
 div.c24 {position:absolute; top:667px; left:420px; font-family: 'Palatino Linotype'; font-size: 15px; color: #C63; height: 70px; width: 264px; font-weight: bold}
 div.c23 {position:absolute; top:613px; left:420px; font-family: 'Palatino Linotype'; font-size: 26px; color: #4b6418; height: 40px; width: 253px; font-weight: bold}
 div.c22 {position:absolute; top:1149px; left:45px; font-family: 'Palatino Linotype'; font-size: 12px; height: 57px; width: 300px;}
 span.c21 {font-family: Arial}
 div.c20 {position:absolute; top:1096px; left:313px; font-family: 'Palatino Linotype'; font-size: 12px; height: 19px; width: 61px;}
 div.c19 {position:absolute; top:1003px; left:50px; font-family: 'Palatino Linotype'; font-size: 13px; color: #000; height: 70px; width: 307px; font-weight: bold}
 span.c18 {color: #FF0000}
 span.c17 {color: #0000FF}
 div.c16 {position:absolute; top:851px; left:50px; font-family: 'Palatino Linotype'; font-size: 15px; color: #C60; height: 70px; width: 342px; font-weight: bold}
 div.c15 {position:absolute; top:953px; left:50px; font-family: 'Palatino Linotype'; font-size: 26px; color: #4b6418; height: 49px; width: 162px; font-weight: bold}
 div.c14 {position:absolute; top:848px; left:50px; font-family: 'Palatino Linotype'; font-size: 15px; color: #C60; height: 70px; width: 342px; font-weight: bold}
 div.c13 {position:absolute; top:799px; left:50px; font-family: 'Palatino Linotype'; font-size: 26px; color: #4b6418; height: 49px; width: 162px; font-weight: bold}
 div.c12 {position:absolute; top:727px; left:305px; font-family: 'Palatino Linotype'; font-size: 12px; height: 77px; width: 307px;}
 div.c11 {position:absolute; top:650px; left:52px; font-family: 'Palatino Linotype'; font-size: 12px; color: #4b6418; height: 70px; width: 307px;}
 div.c10 {position:absolute; top:606px; left:50px; font-family: 'Palatino Linotype'; font-size: 26px; color: #4b6418; font-weight: bold;}
 div.c9 {position:absolute;top:350px; left:100px}
 div.c8 {position:absolute;top:295px ;left:100px}
 div.c7 {position:absolute; top: 38px; left:950px; visibility: visible;}
 img.c6 {width: 32px ; height: 32px;}
 div.c5 {position:absolute; top:38px ; left:900px; visibility: visible;}
 div.c4 {position:absolute; top:38px; left:849px}
 img.c3 {width: 32px; height: 32px;}
 div.c2 {position:absolute;top:37px; left:50px}
 img.c1 {position: absolute; top: -15px; visibility: visible; left: -32px;}

Here is my HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="PTBO.css" rel="stylesheet" type="text/css" />
<title>Peterboro Co-op</title>

</head>
<body>
<div id="wrapper">
<div id="header"><!--Header starts-->
<div class="c2"><a class="header" href="index.html"><img src="http://www.sitepoint.com/forums/images/PTB.jpg" alt="peterboro" name="title" border="0" class="c1" id="title" /></a></div>
<!--peterboro title ends-->
<div class="c4"><a class="menu" href="http://www.facebook.com"><img src="http://www.sitepoint.com/forums/images/fb.png" name="facebook" class="c3" alt="email" border="0" id="facebook" /></a></div>
<!--facebook ends-->
<div class="c5"><a class="header" href="http://www.twitter.com"><img src="http://www.sitepoint.com/forums/images/tumblr_32.png" class="c3" alt="email" border="0" /></a></div>
<!--twitter ends-->
<div class="c7"><a class="header" href="mailto:agcentre@peterboroughcoop.com"><img src="http://www.sitepoint.com/forums/images/email_32.png" class="c6" alt="email" border="0" /></a></div>
<!--email ends--></div>
<!--header ends-->
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
</ul>
<!-- end inner UL-->
<!-- end main LI-->
<!-- end main UL-->
<ul>
<li><a href="#">About Us</a>
<ul>
<li><a href="about%20us/Location.html">Location</a></li>
<li><a href="about%20us/StoreHours.html">Store Hours</a></li>
<li><a href="about%20us/board.html">Board of Directors</a></li>
<li><a href="about%20us/Mission.html">Mission &amp; Vision</a></li>
<li><a href="about%20us/Mission.html">Employments</a></li>
</ul>
<!-- end inner UL--></li>
<!-- end main LI--></ul>
<!--end main UL-->
<ul>
<li><a href="#">Our Stores</a>
<ul>
<li><a href="Our%20Store/Agriculture.html">Agriculture</a></li>
<li><a href="Our%20Store/Store.html">Stores &amp; Supplies</a></li>
<li><a href="Our%20Store/Fuel.html">Fuels</a></li>
</ul>
<!-- end inner UL--></li>
<!-- end main LI--></ul>
<!--end main UL-->
<ul>
<li><a href="#">Members</a>
<ul>
<li><a href="Membership/About%20Membership.html">About Membership</a></li>
<li><a href="Membership/Membership%20Application.html">Membership Application</a></li>
<li><a href="Membership/payment.html">Payment Methods</a></li>
<li><a href="Membership/term.html">Terms &amp; Regulations</a></li>
</ul>
<!-- end inner UL--></li>
<!-- end main LI--></ul>
<!--end main UL-->
<ul>
<li><a href="#">Tips &amp; Care</a>
<ul>
<li><a href="Tips/Garden.html">Agriculture</a></li>
<li><a href="Tips/Garden.html">Garden</a></li>
<li><a href="Tips/Garden%20Journal.html">Garden Journals</a></li>
<li><a href="Tips/Flowers.html">Flowers</a></li>
<li><a href="Tips/birds.html">Birds</a></li>
</ul>
<!-- end inner UL--></li>
<!-- end main LI--></ul>
<!--end main UL-->
<ul>
<li><a href="contact%20us.html">Contact Us</a></li>
</ul>
<!-- end inner UL-->
<!-- end main LI-->
<!--end main UL--></div>
<!--end of menu-->
<div id="welcome">
<div class="c8"><a class="welcome" href="website.html"><img src="http://www.sitepoint.com/forums/images/learn.jpg" alt="email" border="0" /></a></div>
<!--learn moer ends-->
<div class="c9"><a class="welcome" href="website.html"><img src="http://www.sitepoint.com/forums/images/ourserv.jpg" alt="email" border="0" /></a></div>
<!--peterboro title ends--></div>
<!--welcome ends-->
<div id="leftcol"><!-- Left panel start-->
<div class="c10">About Us</div>
<div class="c11">Peterborough Co-operative District Services Strives<br />
to fulfill our customers' needs. Fulfilling our<br />
customers' needs means, improving our services to provide high qualityof products and the highest level<br />
of services ...</div>
<div class="c12"><a class="leftcol" href="#">More...&gt;</a></div>
<!-- About US end-->
<div class="c13">Newsletter</div>
<div class="c14"><a class="leftcol" href="http://www.sitepoint.com/forums/Jeff/Websites/Contents/Fuel/Maximizing%20Price12.doc">Current newsletter</a><br />
<a class="leftcol" href="#">Past Issues</a></div>
<div><!-- Store Hours Start-->
<div class="c15">Store Hours</div>
<div class="c16"></div>
<div class="c19"><br />
Monday - Friday: 8am - 6pm<br />
<br />
<span class="c17">Saturday: 8am - 5pm</span><br />
<br />
<span class="c18">Sunday: Closed</span></div>
<div class="c20"><a class="leftcol" href="#">More...&gt;</a></div>
<!-- Store Hours end-->
<!-- Weatehr starts-->
<table cellspacing="0" cellpadding="0" width="200">
<tbody>
<tr>
<td>
<div class="c22"><span class="c21"><iframe marginheight="0" marginwidth="0" name="wxButtonFrame" id="wxButtonFrame" height="20" src="http://btn.weather.ca/weatherbuttons/template4.php?placeCode=CAON0536&amp;category0=Cities&amp;containerWidth=367&amp;btnNo=&amp;backgroundColor=blue&amp;multipleCity=0&amp;citySearch=1&amp;celsiusF=C" align="top" frameborder="0" width="320" scrolling="no"><span class="c21"><br /></span></iframe></span></div>
</td>
</tr>
</tbody>
</table>
<blockquote>
<p><!--products & Services Start--></p>
</blockquote>
<div class="c23">Products &amp; Services</div>
<div class="c24">Retail Store</div>
<div class="c25">Agriculture<br />
Gardencenter<br />
Seasonal<br />
Non-Seasonal<br />
GfitShops<br />
Seasonal<br />
Non-Seasonal<br /></div>
<div class="c26">Delivery</div>
<div class="c27">Fuel</div>
<div class="c28"><a class="leftcol" href="#">More...&gt;</a></div>
<!--products & Services End-->
<!--Membership End-->
<div class="c29">Memerbship</div>
<div class="c30">
<p>If you become a member, you will<br />
be equitably sharing and in the control<br />
of your own business based on the<br />
principle of one member-one vote<br />
regardless of your investments in<br />
common shares. You are eligible for<br />
credits for farm &amp; home needs, access<br />
products to meet your needs, and<br />
you will be ateconomic advantages<br />
through reasonable prices and share<br />
returns as determined by our elected<br />
Board of Directors....</p>


</div>
<div class="c31"><a class="leftcol" href="#">More...&gt;</a></div>
<!--Membership End-->
<!--Right Column Start-->
<div><!--Tips & Care Start-->
<div class="c32">Tips &amp; Care</div>
<div class="c33">Learn how to properly take care your<br />
garden on our website!<br />
We will try our best to help you.<br />
Plants to attract your birds on your<br />
garden and many many more..!</div>
<div class="c34"><a class="leftcol" href="#">More...&gt;</a></div>
<!--Tips & Care End-->
<!--Max Price Start-->
<div class="c35">Maximizing Price Contract !</div>
<div class="c36">
<p>→Are you concerned about the potential of incerasing fuel cost?</p>
<p>→Would it benefit yuo to know your fuel prices would not exceed a set price for 6 months?</p>
<p>→Would it benefit you to....</p>
</div>
<div class="c37"><a class="leftcol" href="#">More...&gt;</a></div>
<!--Max Price end--></div>
</div>
<!--main end--></div>
<div id="footer">
<div class="c38">About Us</div>
<div class="c39">Our Store</div>
<div class="c40"><a class="footer" href="contact%20us.html">Contact Us</a><br /></div>
<div class="c41"><a class="footer" href="about%20us/Location.html">Location</a><br />
<a class="footer" href="about%20us/StoreHours.html">Store Hours</a><br />
<a class="footer" href="about%20us/board.html">Baord of Directors</a><br />
<a class="footer" href="about%20us/Mission.html">Mission &amp; Vision Statements</a><br />
<a class="footer" href="about%20us/employment.html">Employments</a><br /></div>
<!--end of about us menu-->
<div class="c42"><a class="footer" href="Our%20Store/Agriculture.html">Agriculture</a><br />
<a class="footer" href="Our%20Store/Store.html">Stores &amp; Supplies</a><br />
<a class="footer" href="Our%20Store/Fuel.html">Fuel</a><br /></div>
<div class="c43">Members</div>
<div class="c44">Tips &amp; Care</div>
<div class="c45"><a class="footer" href="Membership/About%20Membership.html">About Membership</a><br />
<a class="footer" href="Membership/Membership%20Application.html">Membership Application</a><br />
<a class="footer" href="Membership/payment.html">Payment Methods</a><br />
<a class="footer" href="Membership/term.html">Terms &amp; Regulation</a><br /></div>
<!--end of about us menu-->
<div class="c46"><a class="footer" href="Tips/Agriculture.html">Agriculture</a><br />
<a class="footer" href="Tips/Garden.html">Garden</a><br />
<a class="footer" href="Tips/Garden%20Journal.html">Garden Journal</a><br />
<a class="footer" href="Tips/birds.html">Birds</a><br />
<a class="footer" href="Tips/Flowers.html">Flowers</a><br /></div>
<!--end of about us menu-->
<div class="c47"><a class="footer" href="index.html"><img src="http://www.sitepoint.com/forums/images/PTBO.jpg" width="300" height="150" border="0" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></div>
<div class="footer c48">© Copyright 2011 Peterborough District Co-operative Services | 861 Lansdowne Street West, Peterborough, ON | (705) 745-4607</div>
</div>
</div>
<!--end of about us menu-->
<!--end of about us menu-->
<!-- Footer Ends-->
<!-- Wrapper ends-->
</body>
</html>

Please let me know if you guys do find something!

Thanks,

[iwasjeff]

I will really appreciate anyone's help!

[dresden_phoenix]

Here is whats really puzzling it's not that your site DOESNT WORK on FF ( or Safari, but it does work on Opera)... and it doesnt. Its that copy pasting the code directly from the site and testing it locally.. IT DOES WORK ( minus the images , of course) ....

So I am wondering if its a link related issue.

to test: try removing the:"@charset "utf-8"; from the top of your CSS code. see where that leads.

This is your same page and stylesheet running off my ISP but working in FF and Saf.
http://raym31.home.comcast.net/~raym31/temp/PTBO.html leading me to believe this is a server issue.

[iwasjeff]

oh my lol..

hm.......

when i removed it.. it still doesn't work..

I wonder what it is..really

[iwasjeff]

What would be a link related issue..? like what does it have to do with CSS not lodaing up completely on website?

[Paul O'B]

The error is as I stated in my post and your server is sending the wrong mime type.

Error: The stylesheet http://www.peterboroughcoop.com/PTBO.css was not loaded because its MIME type, "text/plain", is not "text/css".
Source File: Peterboro Co-op
Line: 0

Read this for an explanation and solution. If you have apache and access to the htaccess file you can add this:

AddType text/css .css

Otherwise its a job for your host.

[iwasjeff]

ALright i'll try that and let you know . Thanks

[Paul O'B]

ALright i'll try that and let you know . Thanks

It will work if you follow the instructions as that error message is from Firefox's error console and details the problem exactly.

Just go to tools / error console in Firefox and then load (or refresh) your page while the console is open and in the error panel on the console you will see the message.

Contact your host and ask them to change it if you don't have access to your server htaccess files.

[iwasjeff]

how would I ask my host to change ??

how should I ask them..?

if they can change server htaccess files??

Sorry, I'm new to all of this, but thanks for your kind answers.

I really appreaciate it.

[deathshadow60]

Well... this may not be directly related to your problems -- but in general the page is built on invalid/outdated methodologies mixed with several common "rookie" mistakes...

The vague/meaningless endless classes on EVERYTHING do nothing to actually help maintain the page... the flat anchors as a giant run-on for obvious menus, complete lack of anything resembling a heading tag, use of a tranny doctype basically saying you are in transition from 1997 to 1998, all adds up to a disaster before we even get into the CSS...

Where you have a character encoding inlined that doesn't match the server header (NOT that there is ANY reason to say the character encoding since it's invalid to have anything more than ASCII7 in it) doesn't even start to touch the problems; Problems like the entire layout being built with absolute positioning, or the endless pointless redundant declarations on EVERYTHING...

... and of course that also fails to cover stating every single font in PX.

I cannot speak as to why your CSS isn't loading in other browsers, but even if it did that CSS and HTML are such a total non-semantic disaster built on faulty methodologies, my only advice would be to throw it all away and start over clean.

I have to ask - just exactly which WYSIWYG made that code? I'm asking becuase it suffers from the "Symmetrical Book Stacking" scenario. Classes on EVERYTHING for no good reason, multiple separate UL's doing a single UL's job, manual line-breaks instead of letting element widths do their job, attributes that no modern developer even uses anymore -- it's a laundry list of outdated development.

Even all the images for text with no fallbacks -- you have a section that's text, use text... most certainly do not use absurdly undersized fixed metric fonts in illegible color combinations.

To give you an example of what I mean, if I was writing the same page, the HTML would probably look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Peterboro Co-op
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Peterborough District Co-operative Services
	</h1>
	
	<ul id="socialMenu">
		<li>
			<a href="http://www.facebook.com">
				<img src="images/fb.png" alt="email"  />
			</a>
		</li><li>
			<a href="http://www.twitter.com">
				<img src="images/tumblr_32.png" alt="email" />
			</a>
		</li><li>
			<a href="mailto:agcentre@peterboroughcoop.com">
				<img src="images/email_32.png" alt="email" />
			</a>
		</li>
	<!-- #socialMenu --></ul>
	
	<ul id="mainMenu">
		<li>
			<a href="index.html">Home</a>
		</li><li>
			<a href="#">About Us</a>
			<ul>
				<li><a href="about%20us/Location.html">Location</a></li>
				<li><a href="about%20us/StoreHours.html">Store Hours</a></li>
				<li><a href="about%20us/board.html">Board of Directors</a></li>
				<li><a href="about%20us/Mission.html">Mission &amp; Vision</a></li>
				<li><a href="about%20us/Mission.html">Employments</a></li>
			</ul>
		</li><li>
			<a href="#">Our Stores</a>
			<ul>
				<li><a href="Our%20Store/Agriculture.html">Agriculture</a></li>
				<li><a href="Our%20Store/Store.html">Stores &amp; Supplies</a></li>
				<li><a href="Our%20Store/Fuel.html">Fuels</a></li>
			</ul>
		</li><li>
			<a href="#">Members</a>
			<ul>
				<li><a href="Membership/About%20Membership.html">About Membership</a></li>
				<li><a href="Membership/Membership%20Application.html">Membership Application</a></li>
				<li><a href="Membership/payment.html">Payment Methods</a></li>
				<li><a href="Membership/term.html">Terms &amp; Regulations</a></li>
			</ul>
		</li><li>
			<a href="#">Tips &amp; Care</a>
			<ul>
				<li><a href="Tips/Garden.html">Agriculture</a></li>
				<li><a href="Tips/Garden.html">Garden</a></li>
				<li><a href="Tips/Garden%20Journal.html">Garden Journals</a></li>
				<li><a href="Tips/Flowers.html">Flowers</a></li>
				<li><a href="Tips/birds.html">Birds</a></li>
			</ul>
		</li><li>
			<a href="contact%20us.html">Contact Us</a>
		</li>
	<!-- #mainMenu --></ul>
	
	<div id="welcomeBanner">
		<h2>Welcome to Peterborough Co-Op</h2>
		<ul>
			<li>
				<a href="website.html">Learn More</a>
			</li><li>
				<a href="website.html">Our Services</a>
			</li>
		</ul>
		<p>
			Our Co-Op store is located in Peterborough, Ontario. We try to fulfill our customer's needs so that every customer is happy with our services. We try to serve high quality products at reasonable prices...
		</p>
	<!-- #welcomeBanner --></div>
	
	<div id="content">
	
		<div class="subColumn">
		
			<h2>About Us</h2>
			<div class="aboutUs">
				<p>
					Peterborough Co-operative District Services Strives to fulfill our customers' needs. Fulfilling our customers' needs means, improving our services to provide high qualityof products and the highest level of services...
				</p>
				<a href="#" class="readMore">More &raquo;</a>
			<!-- .aboutUs --></div>
			
			<h2>NewsLetter</h2>
			<ul class="newsLetter">
				<li>
					<a href="http://www.sitepoint.com/forums/Jeff/Websites/Contents/Fuel/Maximizing%20Price12.doc">
						Current newsletter
					</a>
				</li><li>
					<a href="#">
						Past Issues
					</a>
				</li>
			<!-- .newsLetter --></ul>
			
			<h2>Store Hours</h2>
			<dl class="storeHours">
			
				<dd>Monday - Friday:</dd>
				<dt>8am - 6pm</dt>
				
				<dd>Saturday:</dd>
				<dt>8am - 5pm</dt>
				
				<dd>Sunday:</dd>
				<dt>Closed</dt>
				
			<!-- .storeHours --></dl>
			<a class="readMore" href="#">More &raquo;</a>
			
		<!-- .subColumn --></div>
		
		<div class="subColumn">
		
			<h2>Products &amp; Services</h2>
			<ul class="products">
				<li>
					Retail Store
					<ul>
						<li>Agriculture</li>
						<li>Gardencenter</li>
						<li>Seasonal</li>
						<li>Non-Seasonal</li>
						<li>GfitShops</li>
						<li>Seasonal</li>
						<li>Non-Seasonal</li>
					</ul>
				</li><li>
					Fuel
				</li><li>
					Delivery
				</li>
			<!-- .products --></ul>
			<a class="readMore" href="#">More &raquo;</a>
			
			<h2>Membership</h2>			
			<p>
				If you become a member, you will be equitably sharing and in the control of your own business based on the principle of one member-one vote regardless of your investments in common shares. You are eligible for credits for farm &amp; home needs, access products to meet your needs, and you will be ateconomic advantages through reasonable prices and share returns as determined by our elected Board of Directors...
			</p>
			<a class="readMore" href="#">More &raquo;</a>
			
		<!-- .subColumn --></div>
		
	<!-- #contentColumn --></div>
	
	<div id="sideBar">	
	
		<div id="tipsNCare">
			<h2>Tips &amp; Care</h2>
			<p>
				Learn how to properly take care your garden on our website! We will try our best to help you. Plants to attract your birds on your garden and many many more!!!
			</p>
			<a class="readMore" href="#">More &raquo;</a>
		<!-- #tipsNCare --></div>
		
		<div id="maxPrice">
			<h2>Maximizing Price Contract!</h2>
			<ul>
				<li>
					Are you concerned about the potential of incerasing fuel cost?
				</li><li>
					Would it benefit yuo to know your fuel prices would not exceed a set price for 6 months?
				</li></li>
					Would it benefit you to....
				</li>
			</ul>
			<a class="readMore" href="#">More &raquo;</a>
		<!-- #maxPrice --></div>
		
	<!-- #sideBar --></div>
	
	<div id="footer">
		<div class="aboutUs">
			<h2>About Us</h2>
			<ul>
				<li><a href="about%20us/Location.html">Location</a></li>
				<li><a href="about%20us/StoreHours.html">Store Hours</a></li>
				<li><a href="about%20us/board.html">Baord of Directors</a></li>
				<li><a href="about%20us/Mission.html">Mission &amp; Vision Statements</a></li>
				<li><a href="about%20us/employment.html">Employments</a></li>
			</ul>
		<!-- .aboutUs --></div>
		
		<div class="ourStore">
			<h2>Our Store</h2>
			<ul>
				<li><a href="Our%20Store/Agriculture.html">Agriculture</a></li>
				<li><a href="Our%20Store/Store.html">Stores &amp; Supplies</a></li>
				<li><a href="Our%20Store/Fuel.html">Fuel</a></li>
			</ul>
		<!-- .ourStore --></div>
		
		<div class="contact">
			<a href="contact%20us.html">Contact Us</a>
		<!-- .contact --></div>
		
		<div class="members">
			<h2>Members</h2>
			<ul>
				<li><a href="Membership/About%20Membership.html">About Membership</a></li>
				<li><a href="Membership/Membership%20Application.html">Membership Application</a></li>
				<li><a href="Membership/payment.html">Payment Methods</a></li>
				<li><a href="Membership/term.html">Terms &amp; Regulation</a></li>
			</ul>
		<!-- .members --></div>
		
		<div class="tipsNCare">
			<h2>Tips &amp; Care</h2>
			<ul>
				<li><a href="Tips/Agriculture.html">Agriculture</a></li>
				<li><a href="Tips/Garden.html">Garden</a></li>
				<li><a href="Tips/Garden%20Journal.html">Garden Journal</a></li>
				<li><a href="Tips/birds.html">Birds</a></li>
				<li><a href="Tips/Flowers.html">Flowers</a></li>
			</ul>
		<!-- .tipsNCare --></div>
		
		<div class="disclaimer">
			&copy; 2011 Peterborough District Co-operative Services |
			861 Lansdowne Street West, Peterborough, ON |
			(705) 745-4607
		<!-- .disclaimer --></div>
		
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>	

</body></html>

I've got a paying client ahead of you, but once that's done I'll toss together the CSS to make that HTML work -- so you can see how it should be done -- putting position:absolute on pretty much EVERY LAYOUT ELEMENT is NOT how you build a website.

[iwasjeff]

Hey death thanks alot, i'll keep in mind!

[Paul O'B]

how would I ask my host to change ??

how should I ask them..?

Just refer them to here or say to them that their server is configured incorrectly for CSS and the mime type needs to be text/css. If they do not know what you mean then go somewhere else as they shouldn't be hosting in the first place. The full details are on the page I linked to so just copy and paste the whole thing and set it witho your request if need be.

There's no point in doing anything else until you sort out the mime type because even Jason's code above will not work for you until this is fixed

[deathshadow60]

If they do not know what you mean then go somewhere else as they shouldn't be hosting in the first place.

That CSS is even sent with the wrong mime-type in the first place is IMHO an indication of time to look for another host...

I mean, who the devil would have a server set up that way?

But what do I know, I say the same thing about HTC files.

[iwasjeff]

Hi paul, and death.

I did.. call my webhost and they do not have any idea ... and kept telling me that it's my issue.

They're telling me that they only provide domain for me and everything else is my problem.

Even after I told them the mime type error. They are saying b/c it works on IE, it's my problem when I can't get it uploaded to firefox.

They don't know what HTC file means.. or Apache... reading Css/text.

How would I tell them so that they understand..?

or should I change my webhost..?

[Paul O'B]

Who is the host and where are they located?

It sounds to me as though they are not a host at all but some sort of intermediate agency that doesn't know what they are doing.

If its a free host then I can understand them not allowing changes but if you are paying for this then get out of there quick. Don't they know that IE has less than half the market share now?

Hosting is so cheap these days that you shouldn't be using a free host anyway. For the price of a couple of coffees a month you can get reasonable hosting for a small site.

[iwasjeff]

Its not a free webhost... they charge us per month..

They are Cogeco.. (I'm not sure if I should be saying the company's name ) and located in Canada...

But,, I guess I have to find another webhost.

Do you have any suggestions?

[ralph.m]

They are Cogeco.. But,, I guess I have to find another webhost.

That's the understatement of the year. They seem to have their fingers in a lot of pies. For a start, find a company that just does web hosting. There are many of them out there. Which you try depends on how much you want to pay. They aren't everyone's favorite, but Godaddy has a lot of customers and is cheap. Perhaps check out the web host forums and see what people are recommending these days.

[iwasjeff]

I downloaded some sample website templates with HTML, IMAGE and CSS.

I uploaded them all, but it seems that.. it's really the server's fault.

so I guess I'd have to look for a new webhost for real.. augh