Specify Image Height px/% in ASP.NET in CSS (Cascading Style Sheet)
<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>
