Menu
i want box-sizing: border-box for div tag.
For Mozila Firefox i have tried
-moz-box-sizing: border-box;
For IE(Internet Explorer) i have tried both of below alternatively
-ms-box-sizing: border-box;
box-sizing: border-box;
but it couldn't works in IE(Internet Explorer).
Though i have apply box-sizing: border-box; for Internet Explorer it adds with of border and padding in width of element. why does it happen?
what should be the problem? please help and sugest me.
NOTE: i am using Internet Explorer8 and Windows7 ultimate
PAGE CODE:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MainPage.aspx.cs" Inherits="MainPage" %>
<!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">
<head runat="server">
<meta http-equiv="x-ua-compatible" content="IE=8"/>
<title></title>
<style type="text/css">
*
{
box-sizing: border-box; /*it gives error:Validation (CSS 2.1): 'box-sizing' is not a known CSS property name. */
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body
{
background: lightblue;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#header
{
background: #838283;
height: 200px;
width: 1200px;
}
#wrapper
{
background: #FFFFFF;
margin: 0px auto;
width: 1200px;
height: 1024px;
}
#navigation
{
background: #a2a2a2;
float: left;
margin: 0px 0px;
width: 1200px;
height: 25px;
padding: 3px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="header">
<h1>
Header goes here</h1>
<br />
<h2 style="font-size: 60px;">
ST ERP by Shanti Technology</h2>
</div>
<div id="navigation">
</div>
</div>
</form>
</body>
</html>
222
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.
By default, the CSS box model calculates any element that accepts a width or height in this format: width + padding + border = rendered or displayed width of the element's box. height + padding + border = rendered or displayed height of the element's box.
With the CSS box-sizing Property The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now!
border-box and content-box are the two different values of box-sizing. content-box: This is the default value of box-sizing. The dimension of element only includes 'height' and 'width' and does not include 'border' and 'padding' given to element. Padding and Border take space outside the element.
IE8 supports the unprefixed version of box-sizing, but as with all "new" CSS features it only does so in standards mode. -ms-box-sizing has never been used by any version of IE.
Make sure your page has a doctype declaration to trigger standards mode in browsers. You should also place your unprefixed box-sizing after all the prefixes, not before them, and get rid of -ms-box-sizing as it's really not needed.
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
