DEADLINE LOOMS and having trouble with image in design

Have a test page setup at www.keenwebdesign.com/marineforlife/jobresourcesb.html

On the page there is an area down at the bottom (footer) which has several image swaps as well as an accordion menu. The portion of the menu labeled ‘EMPLOYMENT’ has an image behind it…but I can’t get the image to show through so it appears that it is a ‘menu list’. Anyone have any clue what I’m missing. I have done several things from moving the z-index to a different div to slicing the image but it isn’t working in any respect.

HELP! PLEASE!
Thanks!
Lynn

rGuy84 has it right - at 700k the site is ridiculously huge given how LITTLE content there is. I’m trying to figure out what’s up with all the broken elements in opera, though I can see 99% of your problem clear as day.

>> function MM_swapImgRestore() { //v3.0

DREAMWEAVER or some other Adobe product – and worse, working off one of their stock templates that hasn’t seen a code update since sometime around 1998.

Scripting doing CSS’ job, images for text, fixed height areas resulting in content blowing out if it’s containers, tables for layout, tables for NOTHING, fixed metric fonts on everything making it an accessibility /FAIL/, attributes like ALIGN and STYLE which have no place in modern markup or so simple a layout, comment placement proven to cause IE rendering bugs, line-breaks doing padding’s job, empty elements that are not used on page, meaningless/vague classnames, font tags doing HEADING’s job… I could keep going for an hour with what’s wrong.

First order of business is throwing away the markup and starting with something modern/sensible, starting with a MODERN doctype and semantic markup.

Something like:


<!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>
	Marine For Life
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		MARINE FOR LIFE<br />
		<small>Connecting Marines with Opportunity</small>
		<span></span>
	</h1>
	
	<div id="content">
	
		<div id="resources">
		
			<h2>Pay for School</h2>
			
			<p class="standout">
				Click the links below to learn more about paying for schools and colleges.
			</p>
			
			<h3>
				<a href="http://www.mcsfex.net/">
					Scholarship &amp; Financial Aid Explorer
				</a>
			</h3>
			<p>
				Includes links to military-friendly scholarship opportunities.
			</p>
			
			<h3>
				<a href="http://studentaid.ed.gov/">
					Federal Student Aid
				</a>
			</h3>
			<p>
				The Web site of the U.S. Department of Education&#8217;s office of Federal Student Aid. A free source of information on preparing for and funding education beyond high school.
			</p>
			
			<h3>
				<a href="http://www.fafsa.ed.gov/">
					Federal Student Aid Application
				</a>
			</h3>
			<p>
				A free, online application for federal student aid.
			</p>
			
		<!-- #resources --></div>
		
	<!-- #content --></div>
		 
	<div id="footer"> 
	
		<ul class="bigMenu">
			<li class="current">
				<a href="marines.html">MARINES<span></span></a>
			</li><li>
				<a href="mentors.html">MENTORS</a>
			</li><li>
				<a href="employer.html">EMPLOYERS</a>
			</li>
		</ul>
		
		<div class="subMenu">
			<div class="borderTop"></div>
			<h2>Employment</h2>
			<ul>
				<li><a href="jobsites.html">Job Sites</a></li>
				<li><a href="resume.html">Resume Writing</a></li>
				<li><a href="career.html">Career Fairs</a></li>
				<li><a href="jobresources.html">More Resources</a></li>
			</ul>
			<div class="borderBottom"></div>
		</div>
		
		<div class="subMenu">
			<div class="borderTop"></div>
			<h2>Education</h2>
			<ul>
				<li><a href="edbenefits.html">Benefits</a></li>
				<li><a href="findschool.html">Find a School</a></li>
				<li><a href="payschool.html">Pay for School</a></li>
				<li><a href="edresources.html">More Resources</a></li>
			</ul>
			<div class="borderBottom"></div>
		</div>
		
		<div class="contactAndConnect">
			
			<a href="marine_contactus.html"
				class="connectNow"
			>
				Marines Connect Now<br />
				<small>Click Here To Activate Your Network</small>
			</a>
			
			866.645.8762
			
			<ul>
				<li>
					<a href="index.html" class="home">
						Home
						<span></span>
					</a>
				</li><li>
					<a href="aboutus.html">
						About Us
						<span></span>
					</a>
				</li><li>
					<a href="gen_contactus.html">
						Contact Us
						<span></span>
					</a>
				</li>
			</ul>
			
		<!-- .contactAndConnect --></div>
	
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Pitching about 5k (almost two thirds) of your markup on the floor. (the empty spans are for gilder-levin image replacement and/or sliding doors effects) EVERYTHING else you were trying to do on that page likely belongs in the CSS… and I don’t think it even NEEDS javascript to do any of the stuff that page was.

If I have time tomorrow morning I’ll belt out the matching CSS and remastered images that would make that work.

are you talking about listimg.png? http://www.keenwebdesign.com/marineforlife/images/listimg.png cannot be found…

Your page is taking a really long time to load, so I cannot look.

OK…It is now official… I’m an idiot! Yes, the image was apparently not pushed over to the testing area. Just love when things don’t happen.

Any reason why the images on the bottom have a tendency to ‘scramble’ around the page. I’ve seen this little ‘quirk’ but thought it had been fixed.

Thanks!
Lynn