This is a migrated thread and some comments may be shown as answers.

Splitter width and border

1 Answer 58 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Albert Shenker
Top achievements
Rank 1
Veteran
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

Sort by
0
Martin
Telerik team
answered on 09 Dec 2008, 12:38 PM
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.
Tags
Splitter
Asked by
Albert Shenker
Top achievements
Rank 1
Veteran
Answers by
Martin
Telerik team
Share this question
or