Dont want accordian slider showing until clicked

On a site I am working on, when you go to it, the first slider is showing. I want the user to have to click on the (+) to show the content.

Here is what I mean

Site

http://myfuturesite-lumbermenonline.com/item.html

Javascript

/*
 * Lean Slider v1.0
 * http://dev7studios.com/lean-slider
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

;(function($) {

    $.fn.leanSlider = function(options) {

        // Defaults
        var defaults = {
            pauseTime: 4000,
            pauseOnHover: true,
            startSlide: 0,
            directionNav: '',
            directionNavPrevBuilder: '',
            directionNavNextBuilder: '',
            controlNav: '',
            controlNavBuilder: '',
            prevText: 'Prev',
            nextText: 'Next',
            beforeChange: function(){},
            afterChange: function(){},
            afterLoad: function(){}
        };

        // Set up plugin vars
        var plugin = this,
            settings = {},
            slider = $(this),
            slides = slider.children(),
            currentSlide = 0,
            timer = 0;

        var init = function() {
            // Set up settings
            settings = $.extend({}, defaults, options);

            // Add inital classes
            slider.addClass('lean-slider');
            slides.addClass('lean-slider-slide');

            currentSlide = settings.startSlide;
            if(settings.startSlide < 0 || settings.startSlide >= slides.length) currentSlide = 0;
            $(slides[currentSlide]).addClass('current');

            // Set up directionNav
            if(settings.directionNav && $(settings.directionNav).length){
                var prevNav = $('<a href="#" class="lean-slider-prev">'+ settings.prevText +'</a>'),
                    nextNav = $('<a href="#" class="lean-slider-next">'+ settings.nextText +'</a>');
                if(settings.directionNavPrevBuilder) prevNav = $(settings.directionNavPrevBuilder.call(this, settings.prevText));
                if(settings.directionNavNextBuilder) nextNav = $(settings.directionNavNextBuilder.call(this, settings.nextText));

                prevNav.on('click', function(e){
                    e.preventDefault();
                    plugin.prev();
                });
                nextNav.on('click', function(e){
                    e.preventDefault();
                    plugin.next();
                });

                $(settings.directionNav).append(prevNav);
                $(settings.directionNav).append(nextNav);
            }

            // Set up controlNav
            if(settings.controlNav && $(settings.controlNav).length){
                slides.each(function(i){
                    var controlNav = $('<a href="#" class="lean-slider-control-nav">'+ (i + 1) +'</a>');
                    if(settings.controlNavBuilder) controlNav = $(settings.controlNavBuilder.call(this, i, $(slides[i])));

                    controlNav.on('click', function(e){
                        e.preventDefault();
                        plugin.show(i);
                    });

                    $(settings.controlNav).append(controlNav);
                });
            }

            // Set up pauseOnHover
            if(settings.pauseOnHover && settings.pauseTime && settings.pauseTime > 0){
                slider.hover(
                    function () {
                        clearTimeout(timer);
                    },
                    function () {
                        doTimer();
                    }
                );
            }

            // Initial processing
            updateControlNav();
            doTimer();

            // Trigger the afterLoad callback
            settings.afterLoad.call(this);

            return plugin;
        };

        // Process timer
        var doTimer = function(){
            if(settings.pauseTime && settings.pauseTime > 0){
                clearTimeout(timer);
                timer = setTimeout(function(){ plugin.next(); }, settings.pauseTime);
            }
        };

        // Update controlNav
        var updateControlNav = function(){
            if(settings.controlNav){
                $('.lean-slider-control-nav', settings.controlNav).removeClass('active');
                $($('.lean-slider-control-nav', settings.controlNav).get(currentSlide)).addClass('active');
            }
        };

        // Prev
        plugin.prev = function(){
            // Trigger the beforeChange callback
            settings.beforeChange.call(this, currentSlide);

            currentSlide--;
            if(currentSlide < 0) currentSlide = slides.length - 1;
            slides.removeClass('current');
            $(slides[currentSlide]).addClass('current');
            updateControlNav();
            doTimer();

            // Trigger the afterChange callback
            settings.afterChange.call(this, currentSlide);
        };

        // Next
        plugin.next = function(){
            // Trigger the beforeChange callback
            settings.beforeChange.call(this, currentSlide);

            currentSlide++;
            if(currentSlide >= slides.length) currentSlide = 0;
            slides.removeClass('current');
            $(slides[currentSlide]).addClass('current');
            updateControlNav();
            doTimer();

            // Trigger the afterChange callback
            settings.afterChange.call(this, currentSlide);
        };

        // Show
        plugin.show = function(index){
            // Trigger the beforeChange callback
            settings.beforeChange.call(this, currentSlide);

            currentSlide = index;
            if(currentSlide < 0) currentSlide = slides.length - 1;
            if(currentSlide >= slides.length) currentSlide = 0;
            slides.removeClass('current');
            $(slides[currentSlide]).addClass('current');
            updateControlNav();
            doTimer();

            // Trigger the afterChange callback
            settings.afterChange.call(this, currentSlide);
        };

        // Call constructor
        return init();
    };

})(jQuery);

HTML for slider

<div id="Content_pnlContact">

				<h2 class="acc_trigger"><a href="#">Contact Us</a></h2>
					<div class="acc_container">
<div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">						Click <a href="#"></a>HERE</a> to contact us
						</div>
					</div>	

				</div>

            <div id="Content_pnlOverview">

				<h2 class="acc_trigger"><a href="#">Overview</a></h2>
					<div class="acc_container">
						<div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">
							<span id="Content_lblOverview">The Skewing Overhead takes the best of the Original Overhead with additional new features that increases both yield and production over the Standard Overhead.<br><br>

This machine includes skewing log turners that are able to skew up to 3" left/right. This allows the Overhead to create two equal faces on the log to increase yield on marginal logs and reduce the amount of boards to be edged.<br><br>

We have also included an improved cant support square stabilizer, which supports and squares the cant to get better boards and cants on marginal logs.
							</span>
						</div>
					</div>

				</div>

				<div id="Content_pnlFeatures">

				<h2 class="acc_trigger"><a href="#">Features</a></h2>
					<div class="acc_container">
						<div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">
						<ul style="padding: 10px;"><li style="list-style-type: circle;">1/2" to 1 1/8" Board Thickness</li><li style="list-style-type: circle;">3 1/2" to 6" Board Width (with proper setting)</li><li style="list-style-type: circle;">30" Minimum to 60" Maximum Board Length</li><li style="list-style-type: circle;">Variable Speed Feed Rate</li><li style="list-style-type: circle;">10" Diameter Cutter (8) Wing Index Able Carbide Insert</li></ul>
						</div>
					</div>

				</div>

				<div id="Content_pnlSpecs">

				<h2 class="acc_trigger"><a href="#">Specs</a></h2>
					<div class="acc_container">
						<div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">
						<b>Board Specs</b><br/><ul><li style="margin-left: 30px; list-style-type: circle; ">Thickness: 1/2" to 1 1/8"</li><li style="margin-left: 30px; list-style-type: circle; ">Width:  3 1/2" to 6" with proper setting  </li><li style="margin-left: 30px; list-style-type: circle; ">Length: 30" minimum to 60" maximum</li></ul><br/><b>Cutter</b><br/><ul><li style="margin-left: 30px; list-style-type: circle; ">10" diameter (8) wing index able carbide insert.  This is an outstanding improvement over all others.  Cutters stay sharp longer and run noticeably quieter.</li></ul><br/><b>Dust Pickup</b><br/><ul><li style="margin-left: 30px; list-style-type: circle; ">4" by 10" rectangular opening over cutter heads</li></ul><br/></li>
						</div>
					</div>	

				</div>

				<div id="Content_pnlVideo">

				<h2 class="acc_trigger"><a href="#">Video</a></h2>
					<div class="acc_container">
						<div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">
						<video width="320" height="240" controls>
                          <source src="http://www.coopermachine.com//machineimages/Skewing_Overhead_Scrag/vid/Overhead_w_Skew_and_Lift_Dog_Aug_2012.flv" type="video/FLV">
                          <source src="movie.ogg" type="video/ogg">
                        Your browser does not support the video tag.
                        </video>
						</div>
					</div>	

				</div>

				<div id="Content_pnlTesti">

				<h2 class="acc_trigger"><a href="#">Testimonials</a></h2>
					<div class="acc_container">
						<div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">
						This machine is awesome!!
						</div>
					</div>	

				</div>

Any help would be greatly appreciated.

Can you post only relevant pieces of code? Posting an entire dump and expecting people to parse through it and figure out what you’re doing, then asking them to figure out how to fix it is somewhat rude. From your question it sounds like you only need 3 lines of code. Why should I have to read through your entire page & entire javascript plugin to figure out how to do it?

I honestly don’t even know what I should be looking for since sliders are not standard elements.

Give the slider element and the javascript constructor (not the library). We don’t need to see the video elements or the Testimonials or any of the other irrelevant junk.

Ok, first off how was that not “relevant pieces of code”? I posted the url where you can see it in action, I posted the JS that it uses, and I posted the snippet of code that the accordion is using?

So please enlighten me and tell me what code I posted that shouldnt be there?

If you have no idea what your talking about, please do not troll my thread with a useless post.

Thanks

Re-read my edit.

I’m not trolling. You took no time to pick out the pieces of the code that are relevant to the question. So why should anyone take time to read through the entire dump and pick them out for themselves? You’re the one with the question.

Please explain how this is relevant to the slider?


<h2 class="acc_trigger"><a href="#">Testimonials</a></h2>
<div class="acc_container">
    <div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">
       This machine is awesome!!
     </div>
</div>	    

If you can’t make an effort, then you shouldn’t expect anyone else to.

I am not going to keep going back and forth with you, If you cannot help, then please move past this thread. Everything I posted was relevant, so take your trolling somewhere else.

Please explain what the below has to do with the slider?


<div class="acc_container">
    <div class="block" style="font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:14px"">
     <ul style="padding: 10px;"><li style="list-style-type: circle;">1/2" to 1 1/8" Board Thickness</li><li style="list-style-type: circle;">3 1/2" to 6" Board Width (with proper setting)</li><li style="list-style-type: circle;">30" Minimum to 60" Maximum Board Length</li><li style="list-style-type: circle;">Variable Speed Feed Rate</li><li style="list-style-type: circle;">10" Diameter Cutter (8) Wing Index Able Carbide Insert</li></ul>
     </div>
</div>

Just looks like a random list from the page to me. Is this the slider? I’m not familiar with that specific slider library, is this how your slider library generates the slider?

Toggle show/hide:


<style>
    .acc_container { display: none; }
</style>

<script>
    $(function() {
       $('#buttonId').click(function(e) {
          e.preventDefault();
          $('.acc_container').toggle();
       });
     });
</script>

<a href="#" id="buttonId">CLICK ME!</a>

It’s fine though. I’ll take my “trolling” elsewhere.

Yes the html that quoted is part of the slider. Your reply did help me figure it out so thank you for that.

Yup, that’s why I posted it.

Help us help you. I don’t know what the code you posted does, I can figure it out… but I honestly don’t want to. It’s very time consuming and I may miss things. I don’t want to go to your page, and I shouldn’t need to since all I’m going to do is right click->inspect element to get the relevant code that you should have posted in the first place. All you needed was a few lines simply demonstrating what you wanted, minus the inline CSS that makes it even more confusing to read.

I agree with mawburn. He is not trolling.

A while back I was helping someone with a problem on a photo site they were building. There was an issue with hover and the navigation in IE.
They provided a poorly-phrased question and no code.
They did provide a link to their website. This is what the source code looked like.

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no"/>
<meta http-equiv="imagetoolbar" content="false"/>





<title>photo - Newark Airport, shortly before taking off</title>
<meta name="description" content="" />
<meta name="keywords" content="" />  
<link rel="shortcut icon" href="/photoblog-a/images/smile.ico" type="image/x-icon"/>
<link type="text/css" media="screen" rel="stylesheet" href="/photoblog-a/css/default.css"/>
<link type="text/css" media="screen" rel="alternate stylesheet" title="gray-theme" href="/photoblog-a/css/gray.css" />
<link type="text/css" media="screen" rel="alternate stylesheet" title="white-theme" href="/photoblog-a/css/white.css"/>
<link type="text/css" media="screen" rel="alternate stylesheet" title="black-theme" href="/photoblog-a/css/black.css"/>
<script type="text/javascript" src="/photoblog-a/js/jquery_1-3-2.js"></script>
<script type="text/javascript" src="/photoblog-a/js/jquery_do-timeout.js"></script>
<script type="text/javascript" src="/photoblog-a/js/styleswitch.js"></script>

<script type="text/javascript">
var iPhotosL = 16;
var iPhNo = parseInt(1);
var iPhNoP = parseInt(iPhNo+1);
var sCurrPage = "page1"
var iLastPg = 10
var sCurrSection = "section4"
var iLastSect = 9
</script>





<script type="text/javascript" src="/photoblog-a/js/pb.js"></script>





</head>
<body>



<h1>

	
			photo - Newark Airport, shortly before taking off 
		
</h1>





<noscript>noscript</noscript>
<div id="wrapper">

     <div id="share">
          <a href="http://www.facebook.com/share.php?u=http://www.example.com/photoblog-a/section4/page1/photos.jsp?pn=1" target="_blank"><img src="/photoblog-a/images/btn_fb.png" alt="share - Facebook" width="20" height="20" /></a>&nbsp;&nbsp;<a href="http://twitter.com/home?status=http://www.example.com/photoblog-a/section4/page1/photos.jsp?pn=1" target="_blank"><img src="/photoblog-a/images/btn_twitter.png" alt="share - twitter" width="20" height="20" /></a>&nbsp;&nbsp;<a href="http://del.icio.us/post?url=http://www.example.com/photoblog-a/section4/page1/photos.jsp?pn=1" target="_blank"><img src="/photoblog-a/images/btn_delicious.jpg" alt="share - del.icio.us" width="20" height="20" /></a>
     </div>
          
          
	<div id="clrTheme">
		color theme:&nbsp;&nbsp;
		<ul>
			<li><a href="#" id="chClrBlack">black</a>&nbsp;&nbsp;</li>
			<li><a href="#" id="chClrWhite">white</a>&nbsp;&nbsp;</li>
			<li><a href="#" id="chClrGray">gray</a>&nbsp;&nbsp;</li>
			<!--<li><a href="#" id="chClrBeige">beige</a></li>-->
          </ul>
	</div>
	
	
	


	
		<div id="showTN">
			<a href="photos.jsp?tn=pb">go to thumbmails</a>
		</div>
		
		
			
		
			<div id="SlideShow">
				<a id="lnSlideShow" href="#">run slide show</a>  
			</div>  
		
		
		
		
	
		
	

	
	
	
	 <div id="photo">	
		 
				<a class="photo_link photo_link_next" href="photos.jsp?pn=2"><span>next</span></a>	   
	 	
				<img id="photoImg" class="photo" src="images/1.jpg" alt="photo 1 -- Newark Airport, shortly before taking off" />  
		
		 
			<div class="captions">
				Newark Airport, shortly before taking off  
			</div>
		
		
	</div>
	
	
	
	
	
	
	
	
	
	<div id="nav">
		 

	
		<div class="navInnerLeft">
		
		
				<span class="nav-left"><<</span>
			
		</div>
	
	

		<div class="navInnerRight">
			
				<a class="nav-right" href="photos.jsp?pn=2
				">>></a>
			
					
		</div>	






		<div id="navAll">
			<ul>
			  
					<li>
				   	
						<span><span class="hide">photo&nbsp;</span>1&nbsp;</span>
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=2"><span class="hide">go to photo&nbsp;</span>2</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=3"><span class="hide">go to photo&nbsp;</span>3</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=4"><span class="hide">go to photo&nbsp;</span>4</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=5"><span class="hide">go to photo&nbsp;</span>5</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=6"><span class="hide">go to photo&nbsp;</span>6</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=7"><span class="hide">go to photo&nbsp;</span>7</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=8"><span class="hide">go to photo&nbsp;</span>8</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=9"><span class="hide">go to photo&nbsp;</span>9</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=10"><span class="hide">go to photo&nbsp;</span>10</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=11"><span class="hide">go to photo&nbsp;</span>11</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=12"><span class="hide">go to photo&nbsp;</span>12</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=13"><span class="hide">go to photo&nbsp;</span>13</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=14"><span class="hide">go to photo&nbsp;</span>14</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=15"><span class="hide">go to photo&nbsp;</span>15</a>&nbsp;		
					
					</li>
				
				</ul>
		</div>
		
	</div>	

 















<div id="sideNavOuter"> 

	<div id="sideNav">
		<p class="hide">PAGES IN THIS SECTION:</p>

		<div class="pages">
		
			<div class="pagesLeft">
				<ul>
				
						<li class="mainDimmed">page 1</li>
						
						<li><a href="/photoblog-a/section4/page2/photos.jsp">page 2</a> </li>
					
						<li><a href="/photoblog-a/section4/page3/photos.jsp">page 3</a> </li>
					
						<li><a href="/photoblog-a/section4/page4/photos.jsp">page 4</a> </li>
					
						<li><a href="/photoblog-a/section4/page5/photos.jsp">page 5</a> </li>
					
						<li><a href="/photoblog-a/section4/page6/photos.jsp">page 6</a> </li>
					
						<li><a href="/photoblog-a/section4/page7/photos.jsp">page 7</a> </li>
					
						<li><a href="/photoblog-a/section4/page8/photos.jsp">page 8</a> </li>
					
						<li><a href="/photoblog-a/section4/page9/photos.jsp">page 9</a> </li>
					
						<li><a href="/photoblog-a/section4/page10/photos.jsp">page 10</a> </li>
					
						</ul>
			</div>  
					
	
			<div class="clearFloats">&nbsp;</div>
				
		</div> 
	
	  	
		<div class="divider"></div>
	
		
		
		
	
	
	<p class="hide">SECTIONS:</p>
		<div id="navSections">
			<ul>
			 <li> 
						<a href="/photoblog-a/section1/page1/photos.jsp" >CA, NY, Switzerland<br/>&nbsp;&nbsp;&raquo;&nbsp;2000-2005</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section2/page1/photos.jsp" >India <br/>&nbsp;&nbsp;&raquo;&nbsp;Feb 2007</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section3/page1/photos.jsp" >Jersey City, NYC<br/>&nbsp;&nbsp;&raquo;&nbsp;March - Dec 2007</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li>  
						<span class="main sectionsLinks">Chile <br/>&nbsp;&nbsp;&raquo;&nbsp;Dec 2007 - Jan 2008</span>
		 
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section5/page1/photos.jsp" >South Beach<br/>&nbsp;&nbsp;&raquo;&nbsp;Jan 11, 2008</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section6/page1/photos.jsp" >Jersey City, NYC<br/>&nbsp;&nbsp;&raquo;&nbsp;March - July 2008</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section7/page1/photos.jsp" >Air Show<br/>&nbsp;&nbsp;&raquo;&nbsp;May 25, 2008</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section8/page1/photos.jsp" >Chile <br/>&nbsp;&nbsp;&raquo;&nbsp;July 2008</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section9/page1/photos.jsp" >Jersey City, NYC <br/>&nbsp;&nbsp;&raquo;&nbsp;August 2008 - Dec 2008</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li> 
         	
			</ul>
			
		</div> 
	
		  	
		<div class="divider"></div>	



	 
	 	<p class="hide">OTHER LINKS:</p>

		<div id="navBottom">
			<ul>
		
				<li><a href="/photoblog-a/feedback.jsp?section=section4&amp;page=page1&amp;pn=1" >feedback</a></li>
		
			<li><a href="/" >home</a></li>
		</ul>
		
	  </div> 
	  
	 
	</div> 
	
	
</div> 		 





	
	










</div>  




	
</body>
</html>

I took the time to help this user. It took me three hours to reduce their original code into this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
      a.photo_link { position:absolute; display:block; top:5px;  width:296px;  height:402px;  z-index:600; border:solid 1px yellow;} 
      a.photo_link_prev {left:5px;} 
      a.photo_link_next {right:5px;} 
      a.photo_link_prev:hover {  background:url('http://example.com/photoblog-a/images/prev2.png') 15px 170px no-repeat; } 
      a.photo_link_next:hover { background:url('http://example.com/photoblog-a/images/next2.png') 238px 170px no-repeat; }
    </style>
  </head>
  <body>
    <a class="photo_link photo_link_prev" href="photos.jsp?pn=10"></a> 
    <a class="photo_link photo_link_next" href="photos.jsp?pn=12"></a>	   
    <img  class="photo" src="http://example.com/photoblog-a/section4/page1/images/11.jpg"  alt="text equivalent of image goes here"> />  
  </body>
</html>

Once we had that, solving the problem was much easier (It turned out to be a bug in IE8, which could be addressed by adding a transparent background image to the navigation link)

The moral of the story:

By making a bare bones example to demonstrate your problem, you:

a) more often than not find the cause of the problem yourself
b) show anyone who is considering answering your question that you don’t expect them to do all the work

This will dramatically increase your chances of getting a reply to your question.

You might want to read this: http://sscce.org/