I am relatively new to HTML/CSS and am having an impossible time making two pics line up with an ASP MVC website. The bookend pic we are using for the menu bar cannot line up with the rest of the background pics. Below is a screenshot of the problem, the HTML and the CSS. The bookend pic that is not adjusted correctly is NAV-Left-Corner, and it's id in the CSS is "#menuLeft." The rest of the nav bar uses a small blue pic repeated horizontally. That portion of the CSS can be found in the "ul#Menu" section. (I'm having the same problem with the right bookend, just wanted to simplify things for the sake of this post)
HTML\[code\] <body> @using Monet.Common <div class="page"> <header> <div style="margin: 20px;"> @* <a href="http://stackoverflow.com/questions/14421020/Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </a>*@ <span href="http://stackoverflow.com/questions/14421020/Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span> <span style="color: white; font-size: 18px; "> </span> </div> @* </a>*@ @* <div id="logindisplay"> @Html.Partial("_LogOnPartial") </div>*@ <nav> <ul id="menu"> <img src="http://stackoverflow.com/Content/images/NAV-Left-Corner.gif" id="menuLeft" alt="mLeft"/> <li id="mTop">@Html.MenuLink("Agents", "Index", "Agent")</li> <li class="mProducts">@Html.MenuLink("Products", "Index", "Product")</li> <li class="mPt">@Html.MenuLink("Product Training", "Index", "Course")</li> <li class="mCe">@Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li> <li id="mBottom">@Html.MenuLink("Help", "About", "Home")</li> <img src="http://stackoverflow.com/Content/images/NAV-Right-Corner.gif" id="menuRight" alt="mRight"/> </ul> </nav> </header> <img src="http://stackoverflow.com/Content/images/TEST2body_top.png" id="topPic" alt="tag"/> <section id="main"> @RenderBody() </section> <footer> <span style="color: Gray;"> Copyright ? 2012 Symetra Life Insurance Company. All rights reserved. Symetra? is a registered service mark of Symetra Life Insurance Company. For Internal Use Only. </span> </footer> </div> </body>\[/code\]CSS\[code\] ul#menu { /*border-bottom: 1px #5C87B2 solid;*/ background-image: url('../../Content/Images/Nav-Background.gif'); background-position:center; background-repeat:repeat-x; padding: 0 0 2px; position: relative; margin: 0; text-align: right; } #menuLeft { vertical-align:middle; } #menuRight { vertical-align:middle; }\[/code\]