No replies
cmh69
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2009-06-17
Posts: 1
Points: 0

Hi All.

I'm new here, and fairly new to CSS. I'm obviously trying to run before I can walk, but isn't that the best way sometimes - in at the deep end.

I am creating a website for a Day Nursery and Pre-School. I am using the templated code from Son-of-Suckerfish to created a nested list dropdown which should work fine, but Ta Dah!... Doesn't !! I'm having particular problems displaying it in IE6 but it doesn't work in any browsers properly, either on pc of mac.

HTML code is

</head>
 
<body>
		 <!-- Open Wrapper -->
<div id="wrapper">
		 <!-- Open Header -->
<div id="header">
</div>
<!-- Close Header -->
 
		 <!-- Open Menubar -->
 
         <div id="menubar">
<ul id="nav">
 
	<li id="home"><a href="../home">Home</a></li>
 
	<li id="aboutus"><a href="../aboutus">About Us</a>
		<ul>
          <li id="aboutus2"><a href="#meetthestaff">Meet the Staff</a></li>
          <li id="aboutus2"><a href="#healthyeating">Healthy Eating</a></li>
          <li id="aboutus2"><a href="#ourcharity">Our Charity</a></li>
		</ul>
	</li>
 
	<li id="daynursery"><a href="../daynursery">Day Nursery</a>
	<ul>
          <li id="daynursery2"><a href="#dormice">Dormice &amp; Hedgehogs</a></li>
          <li id="daynursery2"><a href="#sensory">Sensory Room</a></li>
          <li id="daynursery2"><a href="#activity">Activity Room</a></li>
          <li id="daynursery2"><a href="#outdoor">Outdoor Area</a></li>
		</ul>	
	</li>
 
	<li id="preschool"><a href="../preschool">Pre-School</a>
		<ul>
	      <li id="preschool2"><a href="#rabbits">Rabbits &amp; Squirrels</a></li>
          <li id="preschool2"><a href="#montessori">Montessori Room</a></li>
		</ul>
	</li>
 
	<li id="parents"><a href="../parents">Parents</a>
		<ul>
          <li id="parents2"><a href="#news">News and Events</a></li>
          <li id="parents2"><a href="#parentspartnership">Parents in Partnership committee</a></li>
          <li id="parents2"><a href="#testimonials">Testimonials / references</a></li>
          <li id="parents2"><a href="#ofsted">Ofsted</a></li>
          <li id="parents2"><a href="#swapshop">Swap Shop</a></li>
		</ul>
	</li>
 
	<li id="contact"><a href="../contact">Contact</a>
		<ul>
          <li id="contact2"><a href="#findus">How to Find Us</a></li>
          <li id="contact2"><a href="">Our Prospectus</a></li>
		</ul>
	</li>
</ul>
</div>
</body>

and the CSS is:

@charset "utf-8";
/*
Design by Creative Media Heroes
littleowlsnursery/devsite
*/
 
 
* { padding: 0; margin: 0; }
 
body {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 margin: 0;
 padding: 0;
 color: black;
}
 
.nurserycol {
 color:#000;}
 
.preschoolcol {
 color:#000;}
 
.parentscol {
 color:#000;}
 
 
 
 
#wrapper, #header, #menubar {width: 775px; margin: 0; padding: 0;}
 
 
/*#wrapper, #header, #infobar, #menubar, #menubar2, #optionbox, #sidebar, { 
 display:inline;}*/
 
#header, #infobar, #menubar, #content{ 
 float: left;
 }
 
#wrapper { 
 border: 1px solid #FF3300;
 border-top: none;
 border-bottom: none;
 background-color: white;
 margin: 0 auto;
 }
 
#header {
	height: 274px;
	background:url(../images/lon-head-temp.jpg) no-repeat;
}
 
#content {
	clear: both;
	width: 650px;
	margin: 0 0 0 0;
	padding: 15px 0 15px 0;
	min-height: 400px;
	/*border-right: 1px solid #CCC;*/
	}
 
#sidebar { 
 float: right;
 margin: 0px 0px 5px 0px;
 padding: 0px;
 height: 335px;
 width: 120px;
 background: #E7DBD5;
 }
 
#rightcolumn {
	float: right;
	color: #333;
	margin: 15px 0 0 0;
	padding: 0;
	width: 120px;
	display: inline;
	/*height: 480px;
	background: #E7DBD5;*/
}
 
 
img.left {
	float: left;
}
 
img.right {
	float: right;
}
 
 
 
/* Dropdown menu*/
 
#nav { float: left; width: 775px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; list-style: none; line-height: 17px; clear: both;}
#nav li { height: 50px; }
#nav li a { float: left; ; height: 0; padding-top: 50px; overflow: hidden; }
 
/*#menubar ul, #menubar ul a { background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; }*/
 
 
 
 
 
#nav ul { 
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 17px;
	color: white;
	}
 
#nav a {
	display: block;
	width: 105px;
	list-style-type: none;
}
 
#nav li { 
	float: left;
	width: 105px; 
	color: white;
	line-height: 17px;
}
 
#nav li ul { 
	position: absolute;
	color: white;
	width: 105px;
	left: -999em; 
	line-height: 17px;
}
 
#nav li:hover ul, #nav li:hover ul a, #nav li.sfhover ul { 
	/*float: left;*/
	left: auto;
	color: white;
	line-height: 17px;
	margin-top: 50px;
	}
 
 
 
/* BUTTONS */
#nav li#home{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: 0 0px; }
#nav li#aboutus{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -105px 0px; }
#nav li#daynursery{ width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -210px 0px; }
#nav li#preschool{ width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -335px 0px; }
#nav li#parents{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -460px 0px; }
#nav li#contact{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -565px 0px;}
 
/* ON STATES */
#nav li#home a:hover { width: 105px; background-image: url(../images/lonmenu.gif);  background-position: 0 -50px; }
#nav li#aboutus a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -105px -50px; }
#nav li#daynursery a:hover { width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -210px -50px; }
#nav li#preschool a:hover { width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -335px -50px; }
#nav li#parents a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -460px -50px; }
#nav li#contact a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -565px -50px;}
 
 
#nav li#home2 { width: 105px; height: 17px; display: block; background:#0099FF;}
#nav li#aboutus2 { width: 105px; height: 17px; display: block; background:#6FAADF;}
#nav li#daynursery2 { width: 125px; height: 17px; display: block; background:#AC2282;}
#nav li#preschool2 { width: 125px; height: 17px; display: block; background:#E74C15;}
#nav li#parents2 { width: 105px; height: 17px; display: block; background:#0F549D;}
#nav li#contact2 { width: 105px; height: 17px; display: block; background:#D4B2A1;}
 
#nav li#daynursery2 :hover { width: 125px; height: 17px; display: block; background:#D4B2A1;}
 
 
 
 
/* Footer bar*/
 
.footer {
	float: left;
	clear: both;
	width: 775px;
	margin: 5px auto;
	padding: 0;
	display: inline;
	color: #999999;}
 
.footer a {
	border: none;
	color: #88746a;
	text-decoration: none;
	font-size: 9px;
}
 
.footer ul {
	margin: 0;
	padding: 3px 0 3px 0;
	list-style: none;
}
 
.footer li {
	display: inline;
}
 
.footer ul a {
	float: left;
	padding: 1px 10px;
	border-left: solid 1px #95a2c0;
	color: #88746a;
	text-decoration: none;
	font-size: 9px;
}
 
.footer a:hover {
	color:#400000;
	text-decoration: none;
}

The CSS code is a bit jumbled because I've been trying all I can to fix the problems I'm getting. Basically I have a single-graphic hover menu which works fine, but then the drop-down menus (in their separate colours) are just not coming in underneath in IE7 - ok in Firefox on pc and mac, plus fine is Safari on mac - but they should be normal wording links as 11px text with 17px line-height. I am getting the single-graphic coming in instead. I know this must have something to do with the nested ul in the li, but just can't stop this happening. So, it's really a 2 stage HELP. PLEASE!!!!