I have the following markup. I would like there to be a 5px border surrounding the "content" (see the inner splitter) which should fill the available space. I have the page containers set to height/width = 100%. For some reason the border disappears off the right and bottom edge. I thought this might be the old IE 6 box model issue, but this occurs in IE7 and Firefox 3 as well. Can anyone tell me what I'm doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; min-height: 100%;"> |
<head id="Head1" runat="server"> |
<title></title> |
</head> |
<body style=width: 100%; height: 100%; text-align: center; margin:0px; background-color: #0A3152;> |
<form id="Form1" runat="server" style="height:100%; width:100%;"> |
<div style="margin: 0px auto;width: 900px;height:100%;text-align: center;"> |
<div style="height:100%;width:100%;margin: auto;> |
<telerik:RadSplitter ID="rsAM" |
runat="server" |
Width="100%" |
Height="100%" |
Orientation="Horizontal" |
ResizeWithParentPane="False" |
HeightOffset="0" |
BorderSize="0" |
VisibleDuringInit="False" |
Skin="Hay" |
> |
<telerik:radpane runat="server" id="hPane" Scrolling="None" Width="100%" Height="79px"> |
Header |
</telerik:radpane> |
<telerik:radpane runat="server" id="npane" Scrolling="None" Width="100%" Height="24px" > |
Navbar </telerik:radpane> |
<telerik:radpane runat="server" id="bPane" Scrolling="None" Height="100%" Width="100%" |
<telerik:RadSplitter ID="rsB" |
runat="server" |
Width="100%" |
Height="100%" |
Orientation="Vertical" |
ResizeWithParentPane="True" |
HeightOffset="0" |
BorderSize="0" |
VisibleDuringInit="False" |
Skin="Hay" |
> |
<telerik:radpane runat="server" id="blPane" Scrolling="None" Width="21px" Height="100%"></telerik:radpane> |
<telerik:radpane runat="server" id="bcPane" Scrolling="None" Height="100%" Width="100%"> |
<div style="height:100%; width:100%;border: solid 5px red;"> |
Content... This should have a red border of 5px around it but the border disappears on the right and bottom. I also need this to fill the available space, hense the 1005 height/width |
</div> |
</telerik:radpane> |
<telerik:radpane runat="server" id="brPane" Scrolling="None" Width="16px" Height="100%"></telerik:radpane> |
</telerik:RadSplitter> |
</telerik:radpane> |
<telerik:radpane runat="server" id="fspane" Scrolling="None" Height="8px" Width="100%"> |
Footer Spacer |
</telerik:radpane> |
<telerik:radpane runat="server" id="fPane" Scrolling="None" Height="29px" Width="100%"> |
Footer |
</telerik:radpane> |
</telerik:RadSplitter> |
</div> |
</div> |
</form> |
</body> |
</html> |