Hi guys,
After struggling with firefox not loading the css, I decided that i’ll go with different web host. However, I haven’t had a chance to launch my website yet.
but, as I was fixing majority of my webpage (I also cleaned up some of my codes) I’m running into a problem where my drop down menu wouldn’t work on IE6. I know there is a bug with the version of the IE, but I don’t know how to fix them.
Here is my code for HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Peterborough Co-op</title>
<!-- Include Css-->
<link type="text/css" rel="stylesheet" href="reset.css">
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div id="pageWrapper">
<div id="header" class="cAllign">
<div class="headerimg">
<a href="index.html"><img src="http://www.sitepoint.com/forums/images/PTB.jpg" alt="header" /></a>
</div><!-- header -->
<ul id="socialMenu">
<li>
<a href="http://www.facebook.com">
<img src="http://www.sitepoint.com/forums/images/fb.png" alt="facebook" />
</a>
</li>
<li>
<a href="http://www.twitter.com">
<img src="http://www.sitepoint.com/forums/images/tumblr_32.png" alt="twitter" />
</a>
</li>
<li>
<a href="mailto:agcentre@peterboroughcoop.com">
<img src="http://www.sitepoint.com/forums/images/email_32.png" alt="email" />
</a>
</li>
</ul><!-- #socialMenu -->
</div><!--header-->
<div id="mainMenu">
<ul>
<li><a href="index.html">Home</a></li>
</ul><!-- end inner 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 & 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 & 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 & Regulations</a></li>
</ul><!-- end inner UL-->
</li><!-- end main LI-->
</ul><!--end main UL-->
<ul>
<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><!-- 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-->
</div> <!-- end mainMenu -->
<div id="welcomeBanner">
<div class="learn">
<a class="welcome" href="website.html"><img src="http://www.sitepoint.com/forums/images/learn.jpg" alt="learn"></a>
</div>
<div class="ourserv">
<a class="welcome" href="website.html"><img src="http://www.sitepoint.com/forums/images/ourserv.jpg" alt="email"></a>
</div>
</div><!-- #welcomeBanner -->
<div id="content">
<div id="top">
<div class="aboutus">
<h1> About Us</h1>
<p> </p>
<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>
<p><a href="#" class="readMore1">More »</a>
<!-- .aboutUs --></p>
</div>
<div class="products">
<div class="productstitle">
<h1>Products & Services</h1>
</div>
<div class="productsmain">
<ul>
<li>Agriculture</li>
<li>Gardencenter
<ul>
<li><h4>　→ Seasonal</h4></li>
<li><h4>　→ Non-Seasonal</h4></li>
</ul>
</li>
<li>GfitShops
<ul>
<li><h4>　→ Seasonal</h4></li>
<li><h4>　→ Non-Seasonal</h4></li>
</ul>
</li>
<li>Fuel</li>
<li>Delivery</li>
</ul>
</div><!--productsmain-->
<p> <a class="readMore3" href="#">More » </a> </p>
</div><!--products-->
<div class="tips">
<div class="title">
<h2>Tips & Care</h2>
</div>
<br>
Learn how to properly take care of your garden on our website! We will try our best to help you. <br>Plants to attract your birds in your garden and many many more!!!
<p>
<a class="readMore" href="#">More »</a>
</p><!-- #tipsNCare -->
</div><!-- tips -->
</div><!--top-->
<div id="midcontent">
<div class="newsletterbody">
<ul>
<li>
<h1>Newsletter</h1><br>
<p><a href="#" class="newsletter">
Current Newsletter</a></p>
<p>
<a href="#" class="newsletter">
Past Newsletter</a></p>
</li>
</ul>
</div><!-- newsletter ends -->
<blockquote> </blockquote>
<div class="members">
<h1>Membership</h1>
<br><br>
<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>
<p><a class="readMore4" href="#">More »</a>
</p>
</div><!-- end members-->
<div class="maxPrice">
<div class="title">
<h2>Maximizing Price Contract!</h2>
</div>
<ul>
<li>
→ Are you concerned about the potential of incerasing fuel cost?
</li>
<li>
→ Would it benefit you to know your fuel prices would not exceed a set price for 6 months?
</li>
<li>
→ Would it benefit you to....
</li>
</ul>
<p>
<a class="readMore5" href="#">More »</a>
</p>
</div><!-- #maxPrice -->
</div> <!-- mid content ends -->
<div id="bottomcontent">
<div class="storehours">
<h1>Store Hours</h1>
<br>
<dl>
<dd><h3>Monday - Friday: 8am - 6pm</h3> </dd>
</dl>
<div class="color1">
<dl>
<dd><h3>Saturday: 8am - 5pm</h3></dd>
</dl>
</div>
<div class="color2">
<dl>
<dd><h3>Sunday: Closed</h3></dd>
</dl>
</div>
<p><a class="readMore7" href="#">More »</a></p>
</div><!-- ends storehours-->
<div class="weather">
<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&category0=Cities&containerWidth=367&btnNo=&backgroundColor=blue&multipleCity=0&citySearch=1&celsiusF=C" align="top" frameborder="0" width="320" scrolling="no"><span class="c21"><br /></span></iframe></span></div>
</div><!-- weather-->
</div><!-- ends bottom-->
</div><!-- contents-->
<div id="footer">
<div class="aboutUs1">
<h6>About Us</h6>
<br>
<ul>
<li><a href="about%20us/Location.html" class="footertext">Location</a></li>
<li><a href="about%20us/StoreHours.html" class="footertext">Store Hours</a></li>
<li><a href="about%20us/board.html" class="footertext">Baord of Directors</a></li>
<li><a href="about%20us/Mission.html" class="footertext">Mission & Vision Statements</a></li>
<li><a href="about%20us/employment.html" class="footertext">Employments</a></li>
</ul>
<!-- .aboutUs --></div>
<div class="ourStore1">
<h6>Our Store</h6>
<br>
<ul>
<li><a href="Our%20Store/Agriculture.html" class="footertext">Agriculture</a></li>
<li><a href="Our%20Store/Store.html" class="footertext">Stores & Supplies</a></li>
<li><a href="Our%20Store/Fuel.html" class="footertext">Fuel</a></li>
</ul>
<!-- .ourStore --></div>
<div class="contact1">
<h6><a href="contact%20us.html" class="footertext">Contact Us</a></h6>
<!-- .contact --></div>
<div class="members1">
<h6>Members</h6>
<br>
<ul>
<li><a href="Membership/About%20Membership.html" class="footertext">About Membership</a></li>
<li><a href="Membership/Membership%20Application.html" class="footertext">Membership Application</a></li>
<li><a href="Membership/payment.html" class="footertext">Payment Methods</a></li>
<li><a href="Membership/term.html" class="footertext">Terms & Regulation</a></li>
</ul>
<!-- .members --></div>
<div class="tipsNCare1">
<h6>Tips & Care</h6>
<br>
<ul>
<li><a href="Tips/Agriculture.html" class="footertext">Agriculture</a></li>
<li><a href="Tips/Garden.html" class="footertext">Garden</a></li>
<li><a href="Tips/Garden%20Journal.html" class="footertext">Garden Journal</a></li>
<li><a href="Tips/birds.html" class="footertext">Birds</a></li>
<li><a href="Tips/Flowers.html" class="footertext">Flowers</a></li>
</ul>
<!-- .tipsNCare --></div>
<div class="logo1">
<a href="index.html">
<img src="http://www.sitepoint.com/forums/images/PTBO.jpg" alt="PTBO">
</a>
</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>
Here is my code for CSS
/********************General styles********************/
html, body {
height: 100%;
}
#pageWrapper {
position: relative;
min-height: 100%;
height: auto !important;
width: 1020px;
height: 100%;
margin: 0 auto -300px;
}
body {
color: #4b6418;
font-size: 13px;
font-family: 'Palatino Linotype', 'Arial';
}
.cAllign {
width: 1020px;
margin: 0 auto;
overflow: hidden;
}
a {text-decoration: none; }
a:hover {text-decoration:underline; }
p {
line-height: 1.4em;
}
.cBoth {clear: both;}
h1 {font-size: 30px; }
h2 {font-size: 18px; }
h3 {font-size: 16px; }
h4 {font-size: 14px; color:#999900; }
h5 {font-size: 12px; }
h6 {font-size: 18px; font-family: 'Copperplate Gothic Light'; font-weight:lighter; }
h7 {font-size: 14px;}
h8 {font-size: 16px;}
h9 {font-size: 16px;}
.title {
text-align:center;
}
.color1 {
color:#03C;
}
.color2 {
color:#F00;
}
/********************header********************/
#header {
background-image:url(images/header-bg.jpg);
height: 100px;
}
.headerimg {
margin-top: 25px;
}
/********************Social Menu********************/
ul#socialMenu {
float: right;
margin-top: -45px;
margin-right: 30px;
}
ul#socialMenu li {
float: left;
margin-left: 15px;
}
/********************Main Menu********************/
#mainMenu {
margin:0;
padding:0;
background-image:url(images/menu-bggif.gif);
width:1020px;
height:auto;
float:left;
}
#mainMenu ul {
margin:0;
padding:0;
line-height:30px;
background-image:url(images/menu-bggif.gif);
}
#mainMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
font-size:16px;
background-image: url(images/menu-bggif.gif);
}
#mainMenu 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;
}
#mainMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#mainMenu ul li:hover ul {
visibility:visible;
}
#mainMenu li:hover {
background:url(images/menu-bggif.gif);
color:#0C6;
}
#mainMenu ul li:hover ul li a:hover {
background:#fff;
color:#000;
}
#mainMenu a:hover {
color:#0C6;
border:hidden;
/* CSS3 Transitions */
transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-webkit-transition: color 0.4s ease-in-out;
}
/******************** Welcome ********************/
#welcomeBanner {
background-image:url(images/welcome.jpg);
background-repeat:no-repeat;
float:left;
height:404px;
width:1020px;
}
.learn {
margin-top: 154px;
margin-left: 100px ;
}
.ourserv {
margin-left: 100px ;
}
/******************** main ********************/
#content {
background-image:url(images/main.jpg);
background-repeat:no-repeat;
font-family:"Palatino Linotype", "Goudy Old Style";
height: 691px;
float: left;
width: 1020px;
}
/******************** top ********************/
.aboutus {
padding: 65px 53px;
width: 290px;
float: left;
}
.readMore1 {
padding: 0px 0px 0px 10px;
float: right;
margin-top: -10px;
color:#06C;
}
.products {
padding: 70px 10px 0px 0px;
float: left;
font-weight:bold;
font-size:16px;
line-height: 1.3em;
width: 270px;
}
.productstitle {
padding: 0px 0px 10px 0px;
width: 270px;
}
.productsmain {
padding: 0px 0px 0px 10px;
}
.readMore3 {
padding: 0px 20px 0px 0px;
float: right;
font-size: 12px;
font-weight:100;
color:#06C;
}
.tips {
padding: 70px 0px 0px 75px;
float: left;
width: 220px;
color: white;
line-height: 1.5em;
font-weight: bold;
font-size: 14px;
}
.readMore {
margin-top:-7px;
float: right;
font-size: 12px;
font-weight:100;
color: white;
}
/******************** news letter ********************/
#midcontent {
float: left;
width: 1020px;
}
.newsletterbody {
padding: 10px 0px 0px 53px;
margin-top: -30px;
width: 300px;
color: #4b6418;
float: left;
font-weight:bold;
}
.newsletter {
color: #C90;
font-size: 16px;
}
.members {
margin-top: 10px;
padding: 30px 0px 0px 43px;
float: left;
width: 270px;
line-height: 1.1em;
}
.readMore4 {
padding: 0px 15px 0px 0px;
float: right;
font-size: 12px;
font-weight:100;
color:#06C;
}
.maxPrice {
padding: 13px 0px 0px 80px;
float: left;
width: 220px;
color: white;
line-height: 1.7em;
font-weight: bold;
}
.readMore5 {
padding: 3px 0px 0px 0px;
float: right;
font-size: 12px;
font-weight:100;
color: white;
}
/******************** storehours********************/
#bottomcontent{
float: left;
margin-top: -170px;
}
.storehours {
padding: 0px 0px 0px 53px;
float: left;
width: 300px;
line-height: 1.7em;
}
.readMore7 {
float: right;
padding: 0px 20px 0px 0px;
color:#06C;
}
.weather {
padding: 180px 0px 0px 53px;
}
/******************** footer ********************/
#footer {
background-image:url(images/footer.jpg);
background-repeat:repeat;
height: auto;
float: left;
width: 1020px;
color: white;
line-height: 1.5em;
}
.footertext {
color: white;
}
.aboutUs1 {
font-family: 'Copperplate Gothic Light';
width: 340px;
height: 160px;
padding: 15px 0px 0px 100px;
float: left;
}
.ourStore1 {
font-family: 'Copperplate Gothic Light';
width: 340px;
height: 160px;
padding: 15px 0px 0px 0px;
float: left;
}
.contact1 {
font-family: 'Copperplate Gothic Light';
width: 240px;
height: 100px;
padding: 15px 0px 0px 0px;
float: left;
}
.members1 {
font-family: 'Copperplate Gothic Light';
width: 340px;
padding: 10px 0px 10px 100px;
float: left;
}
.tipsNCare1 {
font-family: 'Copperplate Gothic Light';
width: 240px;
padding: 10px 0px 10px 0px;
float: left;
}
.logo1 {
width: 260px;
padding: 0px 0px 10px 0px;
margin-top: -50px;
float: left;
}
.disclaimer {
text-align:center;
font-size: 10px;
width: 1020px;
margin: 0 auto;
float: left;
}
I know that there are things that I shouldn’t have done the way it’s done…
I’m still new to this and I’m trying my best for it.
Are there any ways that I can fix the problem so I.E 6 shows the proper drop down menu?
This is my website
Peterborough Co-op (I haven’t fixed the problem with the css not loading up on “firefox or safari”, but it works on I.E or Opera so just try on I.E or others)
Thanks,
