title: A Particular Image on a div not showing in localhost using ASP.net/IIS
body: <p>Problem when i run it in localhost my header disappear, sometimes when i'm changing some code in <code>#header</code> it appears in design view but when run on localhost it's appearing as a big image and not following the correct height and width that i declare. the code that i will paste here is the one that is not showing either on design view and localhost.</p>
  
  <p>Here is my Masterpage code:</p>
  
  <pre><code>&lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head id="Head1" runat="server"&gt;
      &lt;title&gt;Untitled Page&lt;/title&gt;
      &lt;link href="App_Themes/default/default.css" rel="stylesheet" type="text/css" runat="server" /&gt;
      &lt;asp:ContentPlaceHolder id="head" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
      &lt;!--start of css div--&gt;
      &lt;div id="outer"&gt;
  
      &lt;div id="upbg"&gt;&lt;/div&gt;
  
      &lt;div id="inner"&gt;
  
          &lt;div id="header" runat="server"&gt;
  
          &lt;/div&gt;
  
          &lt;!--&lt;div id="splash"&gt;&lt;/div&gt;--&gt;
  
          &lt;div id="menu"&gt;
              &lt;ul&gt;
                  &lt;li class="first"&gt;&lt;a href="Default.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="About.aspx"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Contact.aspx"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;div id="Login"&gt;&lt;asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"&gt;
                      &lt;AnonymousTemplate&gt;
                          [ &lt;a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server"&gt;Log In&lt;/a&gt; ]
                      &lt;/AnonymousTemplate&gt;
                      &lt;LoggedInTemplate&gt;
                          Welcome &lt;span class="bold"&gt;&lt;asp:LoginName ID="HeadLoginName" runat="server" /&gt;&lt;/span&gt;!
                          [ &lt;asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/&gt; ]
                      &lt;/LoggedInTemplate&gt;
                  &lt;/asp:LoginView&gt;   &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"&gt;
  
          &lt;/asp:ContentPlaceHolder&gt;
          &lt;asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server"&gt;
  
          &lt;/asp:ContentPlaceHolder&gt;
  
  
          &lt;div id="footer"&gt;
  
              &amp;copy;Copyright © 2011 My Personal Werbsite. design by Migs Yandoc.
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;!--end of css div--&gt;
  
  
    &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is my css code:</p>
  
  <pre><code>*
  {
  padding: 0px;
  margin: 0px;
      text-align: left;
  }
  
  body
  {
  background: #F9F9F7 url('images/a1.gif') repeat-x;
  font-size: 11px;
  font-family: "trebuchet ms", helvetica, sans-serif;
  color: #8C8C73;
  line-height: 18px;
  }
  
  a
  {
  color: #FF7800;
  text-decoration: underline;
  }
  
  a:hover
  {
  text-decoration: none;
  }
  
  sup
  {
  font-size: 0.5em;
  }
  
  
  p
  {
  margin-bottom: 14px;
  text-align: justify;
  }
  
  img.picA
  {
  position: relative;
  top: -2px;
  background: url('images/a47.gif') no-repeat;
  width: 76px;
  height: 74px;
  padding: 8px;
  }
  
  img.picB
  {
  position: relative;
  top: -2px;
  background: url('images/a26.gif') no-repeat;
  width: 146px;
  height: 75px;
  padding: 7px;
  }
  
  img.floatleft
  {
  float: left;
  margin: 0px 14px 3px 0px;
  }
  
  
  ul.linklist
  {
  list-style: none;
  }
  
  ul.linklist li
  {
  border-top: solid 1px #EEEEEE;
  padding-top: 5px;
  margin: 5px 0px 0px 0px;
  }
  
  ul.linklist li.first
  {
  border-top: 0px;
  margin-top: 0px;
  padding-top: 0px;
  }
  
  #upbg
  {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #fff url('images/upbg.gif') no-repeat;
  width: 747px;
  height: 264px;
  z-index: 1;
  }
  
  #outer
  {
  position: relative;
  width: 747px;
  margin: 0 auto;
  background: #fff url('images/abg.gif') repeat-y;
  }
  
  #inner
  {
  position: relative;
  padding: 13px 30px 13px 30px;
  z-index: 2;
  }
  
  &gt; #header {
  &gt;     background: url ("~/images/a99.gif") no-repeat;
  &gt;     position: absolute;
  &gt;     width: 202px;
  &gt;     height: 92px;
  &gt;     color: #fff;
  &gt;     padding-left: 20px;
  &gt;     top: 14px;
  &gt;     left: 32px;
  &gt;     visibility: visible; }
  
  
  
  #header span
  {
  font-weight: normal;
  }
  
  #header h1
  {
  position: absolute;
  font-size: 23px;
  letter-spacing: -1px;
  top: 30px;
  height: 92px;
  }
  
  #header h2
  {
  position: absolute;
  font-size: 10px;
  font-weight: normal;
  color: #FCE2CA;
  top: 51px;
  }
  
  #header sup
  {
  color: #FCE2CA;
  }
  </code></pre>
  
  <p>The image is <code>a99.gif</code>! The size is right 202x92px.</p>
  
  <p>Hope that you can help me cause I'm really stuck in this part.</p>
  
  <p>Thanks in advance.</p>
  
  <p>Respectfully yours,
  Migs</p>