title: Specify Image Height px/% in ASP.NET in CSS (Cascading Style Sheet)
body: <p>I am wanting to use a series of Images as a page border and my Table is rectangular. Each Image is 10px by 10px. I have top, bottom, side and corner Images. All images work fine except the side Images, the % Variable is not working. ls is Left Side, I also have rs, Right Side, my top bottom and corner Images work fine. Here is my Code Snipet: </p>
  
  <p>My ASP Page Code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "w3.org/TR/html4/strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head runat="server"&gt;
  &lt;title&gt;Home Page&lt;/title&gt;
  &lt;link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /&gt;
  &lt;asp:ContentPlaceHolder ID="HeadContent" runat="server"&gt;
  &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;!-- Page Table Set Format --&gt;
  &lt;table cellpadding="0" cellspacing="0" class="MainTable"&gt;
  &lt;tr&gt;
  &lt;td class="LeftPageIndent" rowspan="5"&gt;
  &lt;/td&gt;
  &lt;td class="HeadSpace" colspan="3"&gt;
  &lt;/td&gt;
  &lt;td class="RightPageIndent" rowspan="5"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td class="tlc"&gt;
  &lt;img src="Images/tlc.jpg" alt="top left corner" /&gt;
  &lt;/td&gt;
  &lt;td class="tp"&gt;
  &lt;img src="Images/tp.jpg" alt="top" class="BorderTop" /&gt;
  &lt;/td&gt;
  &lt;td class="trc"&gt;
  &lt;img src="Images/trc.jpg" alt="top right corner" /&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;img src="Images/ls.jpg" alt="left side" class="LSideBdrImage" /&gt;
  &lt;/td&gt;
  &lt;td class="pageContent"&gt;
  &lt;!-- Page Form inside Main Content START --&gt;
  &lt;form id="Form1" runat="server"&gt;
  &lt;table class="ContentTable" cellspacing="0" cellpadding="0" width="100%" border="0"&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;p align="center"&gt;
  &lt;img src="Images/Logo.jpg" alt="Logo" width="341" height="63" border="0" /&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;hr class="hrPageSeperator" color="#FF9900" /&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;div class="page"&gt;
  &lt;div class="main"&gt;
  &lt;asp:ContentPlaceHolder ID="MainContent" runat="server" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;hr class="hrPageSeperator" color="#FF9900" /&gt;
  &lt;div class="clear hideSkiplink"&gt;
  &lt;asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
                                  IncludeStyleBlock="false" Orientation="Horizontal"&gt;
  &lt;Items&gt;
  &lt;asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" /&gt;
  &lt;asp:MenuItem NavigateUrl="~/About.aspx" Text="About" /&gt;
  &lt;/Items&gt;
  &lt;/asp:Menu&gt;
  &lt;/div&gt;
  &lt;hr class="hrPageSeperator" color="#FF9900" /&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  &lt;!-- Page Form inside Main Content END --&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;img src="Images/rs.jpg" alt="right side" class="RSideBdrImage" /&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td class="blc"&gt;
  &lt;img src="Images/blc.jpg" alt="bottom left corner" /&gt;
  &lt;/td&gt;
  &lt;td class="btm"&gt;
  &lt;img src="Images/btm.jpg" alt="bottom" class="BorderBottom" /&gt;
  &lt;/td&gt;
  &lt;td class="brc"&gt;
  &lt;img src="Images/brc.jpg" alt="bottom right corner" /&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td class="FootSpace" colspan="3"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;!-- Page Table Set Format --&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My CSS Code:</p>
  
  <pre><code>/* DEFAULTS
  ----------------------------------------------------------*/
  
  body
  {
  background: #000000;
  font-size: .80em;
  font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
  margin: 0px;
  padding: 0px;
  color: #696969;
  height: 100%;
  }
  
  #container 
  { 
  min-height: 100%; 
  }
  
  * html #container 
  { 
  height: 100%; 
  } 
  
  a:link, a:visited
  {
  color: #034af3;
  }
  
  a:hover
  {
  color: #1d60ff;
  text-decoration: none;
  }
  
  a:active
  {
  color: #034af3;
  }
  
  p
  {
  margin-bottom: 10px;
  line-height: 1.6em;
  }
  
  /* Page Border Setup...
  ----------------------------------------------------------*/
  .MainTable
  {
  width:100%;
  height:100%;
  }
  
  .HeadSpace
  {
  height:4px;
  }
  
  .LeftPageIndent
  {
  width: 12%;
  }
  
  .tlc
  {
  width:10px;
  height:10px;
  border:0px;
  }
  
  .tp
  {
  height:10px;
  border:0px;
  }    
  
  .trc
  {
  width:10px;
  height:10px;
  border:0px;
  }
  
  .ContentTable
  {
  width:100%;
  height:100%;
  border:0px;
  }
  
  .blc
  {
  width:10px;
  height:10px;
  border:0px;
  }
  
  .btm
  {
  height:10px;
  border:0px;
  }
  
  .brc
  {
  width:10px;
  height:10px;
  border:0px;
  }
  
  .RightPageIndent
  {
  width: 12%;
  }
  
  .FootSpace
  {
  height:2px;
  }
  
  
  /* Boarder Image Setup...
  -----------------------------------------------*/
  
  .BorderTop
  {
  width: 100%;
  height: 10px;
  border: "0";
  }
  
  .LSideBdrImage
  {
  width: 10px;
  height: 100%;
  border: "0";
  }
  
  .RSideBdrImage
  {
  width: 10px;
  height: 100%;
  border: "0";
  }
  
  .BorderBottom
  {
  width: 100%;
  height: 10px;
  border: "0";
  }
  
  
  /* HEADINGS   
  ----------------------------------------------------------*/
  
  .hrPageSeperator
  {
  color:#FF9900;
  }
  
  h1, h2, h3, h4, h5, h6
  {
  font-size: 1.5em;
  color: #666666;
  font-variant: small-caps;
  text-transform: none;
  font-weight: 200;
  margin-bottom: 0px;
  }
  
  h1
  {
  font-size: 1.6em;
  padding-bottom: 0px;
  margin-bottom: 0px;
  }
  
  /* PRIMARY LAYOUT ELEMENTS   
  ----------------------------------------------------------*/
  
  .page
  {
  width: 100%;
  background-color: #000000;
  margin: 1px auto 0px auto; /* border: 1px solid #496077; */
  }
  
  .main
  {
  padding: 0px 12px;
  margin: 12px 8px 8px 0px;
  min-height: 100%;
  width: 100%;
  }
  </code></pre>
  
  <p>My problem is, I can set the image height in px, but I can not set the Image height in %. I have researched this and there is a lot of information but not enough to see the error in my ways. Can someone please help me out, I would very much appreaciate it.</p>
  
  <p>Thanks in Advance.</p>
  
  <p>Chris</p>
  
  <p>P.S. each image stays 10px by 10px and does not change.</p>