Image not lining up

Get Started
1

Hi,

On my website, I have a navigation menu on the left side of the page:

http://www.oaknoll.com/index.asp

I created an image for the top of the navigation that is just a rounded cap to make it look a little nicer. It fits the navigation fine on all the pages except one. The page it does not fit correctly is:

http://www.oaknoll.com/oaknoll/jobopenings.asp

This file is in a subfolder from the rest of all the other pages, because it has a group of other files that are all associated with it and I want to keep them all in the “/oaknoll” folder.

I am guessing that the problem has to do with the fact that the jobopenings.asp file is in another folder. What I can’t figure out is how to correct the problem.

Here is the navigation menu code:


<!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">
<head>
<title>Oaknoll - An Adult Retirement Community</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords"
 content="oaknoll, iowa city, retirement, elderly, iowa, LifeCare, retirement community, nursing home, apartment, independent living, resident, geriatric, aging, community, retire, retired, elder,  health care, assisted living, nursing care">
<meta name="Description"
 content="Oaknoll is an adult retirement community in Iowa City, Iowa.">
<meta name="robots" content="index,follow">
</head>

<body>


         <div id="navcap">
          <img src="http://www.oaknoll.com/images/navigation-cap.gif" width="200" height="18" alt="navigation cap" />
         </div><!--end-navcap-->

 <div id="nav">

	<dt> <a href="http://www.oaknoll.com/index.asp"><b>Home</b></a> </dt>

	


    <dt><b>LifeCare</b></dt>

	<dd>
		<ul>
			<li><a href="http://www.oaknoll.com/independent_living.asp">Independent Living</a></li>
			<li><a href="http://www.oaknoll.com/assisted.asp">Assisted Living</a></li>
			<li><a href="http://www.oaknoll.com/health_center.asp">Health Center</a></li>
			
			

		</ul>
	</dd>
	<dt><b>Health Services</b></dt>
	<dd>
		<ul>
			<li><a href="http://www.oaknoll.com/social_services.asp">Social Services</a></li>
	        <li><a href="http://www.oaknoll.com/health_services.asp">Health Services</a></li>
			<li><a href="http://www.oaknoll.com/physical_therapy.asp">Physical Therapy</a></li>
            <li><a href="http://www.oaknoll.com/dietician.asp">Dietician</a></li>
          <li><a href="http://www.oaknoll.com/companions.asp">Companions</a></li>
		</ul>
	</dd>
	
    <dt><b>Amenities</b></dt>
	<dd>
		<ul>
			<li><a href="http://www.oaknoll.com/dining.asp">Dining Services</a></li>
			<li><a href="http://www.oaknoll.com/transportation.asp">Transportation</a></li>
			<li><a href="http://www.oaknoll.com/theater.asp">Movie Theater</a></li>
			<li><a href="http://www.oaknoll.com/internet_cafe.asp">Internet Cafe/Coffee Shop</a></li>
			<li><a href="http://www.oaknoll.com/game_rooms.asp">Game Rooms</a></li>
            <li><a href="http://www.oaknoll.com/libraries.asp">Library</a></li>
            <li><a href="http://www.oaknoll.com/sewing.asp">Sewing Room</a></li>

	  </ul>

	</dd>
	<dt><b>Recreation/Wellness</b></dt>
	<dd>
		<ul>
			<li><a href="http://www.oaknoll.com/wellness.asp">Wellness</a></li>
            <li><a href="http://www.oaknoll.com/programs.asp">Programs</a></li>
			<li><a href="http://www.oaknoll.com/pool.asp">Pool/Spa</a></li>
			<li><a href="http://www.oaknoll.com/salon.asp">Salon</a></li>
      </ul>
	</dd>
	
    <dt><b>About Oaknoll</b></dt>
	<dd>
		<ul>
			<li><a href="http://www.oaknoll.com/history.asp">History</a></li>
            <li><a href="http://www.oaknoll.com/resident_council.asp">Oaknoll Resident Council</a></li>
            <li><a href="http://www.oaknoll.com/board_of_directors.asp">Board of Directors</a></li>
            <li><a href="http://www.oaknoll.com/foundation_board.asp">Foundation Board</a></li>
            <li><a href="http://www.oaknoll.com/mission_statement.asp">Mission Statement</a></li>
	  </ul>
	</dd>




<dt><b>Services</b></dt>
	<dd>
		<ul>
			<li><a href="http://www.oaknoll.com/maintenance.asp">Maintenance</a></li>
			<li><a href="http://www.oaknoll.com/housekeeping.asp">Housekeeping</a></li>
			<li><a href="http://www.oaknoll.com/laundry.asp">Laundry</a></li>
			<li><a href="http://www.oaknoll.com/technology.asp">Technology</a></li>
            <li><a href="http://www.oaknoll.com/banking.asp">Banking</a></li>
		</ul>
   </dd>




    <dt><b>Employment</b></dt>

	<dd>
		<ul>
        <li><a href="http://www.oaknoll.com/employment.asp">Employment</a></li>
			<li><a href="http://www.oaknoll.com/oaknoll/jobopenings.asp">Current Openings</a></li>
			<li><a href="http://www.oaknoll.com/pdf/Application_2012_for_website.pdf" target="blank">Application</a></li>
		</ul>
	</dd>


<dt><a href="http://www.oaknoll.com/contact.asp"><b>Contact Us</b></a></dt>





 </div>

  <div id="ldirector">
	  <a href="http://www.oaknoll.com/executive_director.asp"><p>Patricia Heiden ~ <br />
            A Director With a Dream. <br/><br/>
            Click here to learn more...</p></a>
</div> <!--director-end-->


<div id="ladministrator">
<a href="http://www.oaknoll.com/administrator.asp"><p>Meet <br/>
Steve Roe, <br />
			    our Administrator</p></a>
</div> <!--administrator-end-->
	


</body>
</html>

css code is:


#nav {padding:0; margin:0 0 0 13px; background:#d4dedc;}
#nav a:hover {text-decoration:underline;}
#nav dt b {display:block;
color:#fff;
height:25px;
line-height:35px;
padding-left:10px;
cursor:pointer;
width:173px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 10px 10px 10px 10px;
background: #333399 url(../images/mini_leaf.jpg) no-repeat center right;
border-left: 5px solid #7c7ca5;
border-bottom: 1px solid #fff;
}

#nav dt a {color:#fff; text-decoration:none;}
#nav dd { width: 200px; padding: 5px 0 15px 0; margin:0; background-color:#d6e1de; }
#nav dd ul {padding:0; margin:0; list-style:none;}
#nav dd ul li {padding-left:20px;}
#nav dd ul li a {font: 10px Verdana, Arial, Helvetica, sans-serif;
color:#333399; text-decoration:none; line-height: 1.5;}

Any thoughts? I will be glad to supply any other code if you need it.

Thanks,
sarb

2

For the CSS and HTML you have provided, I don’t actually see a div id “navcap”, it seems it is missing which could be your problem. I also don’t see any external CSS in your HTML so I assume you are using ONLY the css you have provided.

Hope it helps.

PS your meta tags need a /> at the end to be XHTML 1.0 compliant :slight_smile:

3

Try adding this to your style sheet:


#navcap img {
  vertical-align: bottom;
}
4

Thank you, that worked like a charm…

Sarb

5