Image not lining up


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

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:

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" "">
<html xmlns="">
<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">


         <div id="navcap">
          <img src="" width="200" height="18" alt="navigation cap" />

 <div id="nav">

	<dt> <a href=""><b>Home</b></a> </dt>



			<li><a href="">Independent Living</a></li>
			<li><a href="">Assisted Living</a></li>
			<li><a href="">Health Center</a></li>

	<dt><b>Health Services</b></dt>
			<li><a href="">Social Services</a></li>
	        <li><a href="">Health Services</a></li>
			<li><a href="">Physical Therapy</a></li>
            <li><a href="">Dietician</a></li>
          <li><a href="">Companions</a></li>
			<li><a href="">Dining Services</a></li>
			<li><a href="">Transportation</a></li>
			<li><a href="">Movie Theater</a></li>
			<li><a href="">Internet Cafe/Coffee Shop</a></li>
			<li><a href="">Game Rooms</a></li>
            <li><a href="">Library</a></li>
            <li><a href="">Sewing Room</a></li>


			<li><a href="">Wellness</a></li>
            <li><a href="">Programs</a></li>
			<li><a href="">Pool/Spa</a></li>
			<li><a href="">Salon</a></li>
    <dt><b>About Oaknoll</b></dt>
			<li><a href="">History</a></li>
            <li><a href="">Oaknoll Resident Council</a></li>
            <li><a href="">Board of Directors</a></li>
            <li><a href="">Foundation Board</a></li>
            <li><a href="">Mission Statement</a></li>

			<li><a href="">Maintenance</a></li>
			<li><a href="">Housekeeping</a></li>
			<li><a href="">Laundry</a></li>
			<li><a href="">Technology</a></li>
            <li><a href="">Banking</a></li>


        <li><a href="">Employment</a></li>
			<li><a href="">Current Openings</a></li>
			<li><a href="" target="blank">Application</a></li>

<dt><a href=""><b>Contact Us</b></a></dt>


  <div id="ldirector">
	  <a href=""><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=""><p>Meet <br/>
Steve Roe, <br />
			    our Administrator</p></a>
</div> <!--administrator-end-->


css code is:

#nav {padding:0; margin:0 0 0 13px; background:#d4dedc;}
#nav a:hover {text-decoration:underline;}
#nav dt b {display:block;
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.


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:

Try adding this to your style sheet:

#navcap img {
  vertical-align: bottom;

Thank you, that worked like a charm…