Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Rank 1
Veteran
Iron
Albert Shenker
asked on 07 Dec 2008, 09:24 PM
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> |
1 Answer, 1 is accepted
0
Hi Albert,
Actually, the behavior you are experiencing is the right box model behavior, which was "mistaken" in the old versions of Internet Explorer. Unfortunately, this is not a bug, but a correct layout. In brief, the height and width of the correct box model consists of width of the element, its border width and its padding. If an object is high and wide 100%, has a 5 pixels border and 10 pixels padding, its offsetWidth and offsetHeight are a sum of these 100% + its padding + its border width. The 100% is still 100%, but not of its CSS width and height, but its offsetWidth and offsetHeight.
To put things to work you need to use some JavaScript - get the offsetWidth and offsetHeight of the element in pixels, then subtract its doubled border and doubled padding.
The layout you are trying to create cannot be achieved with pure CSS.
Here is an article about the box model from W3C.
Sincerely yours,
Martin Ivanov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Actually, the behavior you are experiencing is the right box model behavior, which was "mistaken" in the old versions of Internet Explorer. Unfortunately, this is not a bug, but a correct layout. In brief, the height and width of the correct box model consists of width of the element, its border width and its padding. If an object is high and wide 100%, has a 5 pixels border and 10 pixels padding, its offsetWidth and offsetHeight are a sum of these 100% + its padding + its border width. The 100% is still 100%, but not of its CSS width and height, but its offsetWidth and offsetHeight.
To put things to work you need to use some JavaScript - get the offsetWidth and offsetHeight of the element in pixels, then subtract its doubled border and doubled padding.
The layout you are trying to create cannot be achieved with pure CSS.
Here is an article about the box model from W3C.
Sincerely yours,
Martin Ivanov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.