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 & 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 & 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 & Regulations</a></li>
</ul>
</li><li>
<a href="#">Tips & 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 »</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 »</a>
<!-- .subColumn --></div>
<div class="subColumn">
<h2>Products & 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 »</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 & 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 »</a>
<!-- .subColumn --></div>
<!-- #contentColumn --></div>
<div id="sideBar">
<div id="tipsNCare">
<h2>Tips & 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 »</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 »</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 & 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 & 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 & Regulation</a></li>
</ul>
<!-- .members --></div>
<div class="tipsNCare">
<h2>Tips & 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">
© 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.
