Note that there are some explanatory texts on larger screens.

plurals
  1. PObox-sizing: border-box => for IE8?
    text
    copied!<p>i want <code>box-sizing: border-box</code> for <code>div</code> tag.</p> <p>For <strong>Mozila Firefox</strong> i have tried</p> <pre><code> -moz-box-sizing: border-box; </code></pre> <p>For <strong>IE(Internet Explorer)</strong> i have tried both of below alternatively</p> <pre><code> -ms-box-sizing: border-box; box-sizing: border-box; </code></pre> <p>but it couldn't works in <strong>IE(Internet Explorer)</strong>. Though i have apply <code>box-sizing: border-box;</code> for <strong>Internet Explorer</strong> it adds with of border and padding in width of element. why does it happen?</p> <p>what should be the problem? please help and sugest me.</p> <p><strong>NOTE:</strong> i am using <strong>Internet Explorer8</strong> and <strong>Windows7 ultimate</strong></p> <p><strong>PAGE CODE:</strong></p> <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="MainPage.aspx.cs" Inherits="MainPage" %&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="server"&gt; &lt;meta http-equiv="x-ua-compatible" content="IE=8"/&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; * { 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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;div id="wrapper"&gt; &lt;div id="header"&gt; &lt;h1&gt; Header goes here&lt;/h1&gt; &lt;br /&gt; &lt;h2 style="font-size: 60px;"&gt; ST ERP by Shanti Technology&lt;/h2&gt; &lt;/div&gt; &lt;div id="navigation"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload