title: css is working different in asp.net
body: <p>I have a header with box-shadow style on two div tags. and a header div tag .
  I wrote that in notepad++ and it works perfect. but when i want to use it in my asp.net page it does not show shadows and also its padding and the height of elements shown different. 
  I try to open in Firefox and IE and the html file is working perfect but the asp file has different .CSS but i use same .CSS file for both...
  any body know why this is happening ? </p>
  
  <p>here the code :</p>
  
  <pre><code>     &lt;head&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" /&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;
  &lt;title&gt; طراحی وبسایت&lt;/title&gt;
  &lt;link href="boilerplate.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href="css/layout.css" rel="stylesheet" type="text/css"/&gt;
      &lt;script src="respond.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
   function ShowMenuMobile(){
       if( document.getElementById("Menu").style.display=="none")
           document.getElementById("Menu").style.display="block";
      else
           document.getElementById("Menu").style.display="none";
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body &gt;
  
  &lt;div class="gridContainer"&gt;
    &lt;div id="Header"&gt;
      &lt;table  id="headerTable"  &gt;
        &lt;tr&gt;
          &lt;td id="SocialLink" &gt;
          &lt;a href="#"&gt;&lt;img src="img/instaHover.png" /&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img src="img/Telegram.png" /&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img src="img/facebook.png" /&gt;&lt;/a&gt;
          &lt;/td&gt;
          &lt;td id="Contact"&gt;&lt;a id="EmailLink" href="#"&gt;info@mangochip.com&lt;/a&gt;&lt;/td&gt;
          &lt;td id="temp" &gt;&amp;nbsp;&lt;/td&gt;
          &lt;td id="SignUp" &gt;&lt;a href="#"&gt;ثبت نام&lt;/a&gt;&lt;/td&gt;
          &lt;td id="Login" &gt;&lt;a href="#"&gt;ورود&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
  
    &lt;/div&gt;
    &lt;div id="btnMenu" &gt;
      &lt;button id="btnDrop" onclick="ShowMenuMobile()" &gt;
          &lt;div class="btnMobile"&gt;&lt;/div&gt;
          &lt;div class="btnMobile"&gt;&lt;/div&gt;
          &lt;div class="btnMobile"&gt;&lt;/div&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div id="Menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;صفحه نخست&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;طراحی وبسایت&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;نمونه کارها&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;طراحی نرم افزار&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;پروژه های آزاد&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;مقالات&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;راهنمای سفارش&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;درباره ما&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="Logo"&gt;&lt;img src="img/logo1.png"/&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css file is :</p>
  
  <pre><code>body{
      margin:0;
      padding:0;
      background-repeat:no-repeat;
      direction:rtl;
  
  }
  a{
      text-decoration:none;
  }
  .gridContainer {
      width: 100%;
      margin:0;
      padding:0;
      box-shadow: 10px 10px 5px #1f2348;
  
  }
  
  #Header {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
      direction:rtl;
      background-color:#1f2348;
      /*padding:11px;*/
      padding-top:5px;
      padding-bottom:5px;
  }
  #Menu {
      font-family:menu;
      font-size:24px;
      clear: both;
      float: left;
      margin-left: 0;
      width: 83.0508%;
      display: block;
      text-align:center;
      padding-top:35px;
  
  }
  ul{ 
  
      list-style-type:none;
      margin: 0;
      padding: 0;
      overflow: hidden;
  }
  li{
      float:right;
  
  }
  li a {
      display: block;
      color: #1f2348;
      text-align: center;
      padding: 10px;
      text-decoration: none;
      border:3px solid transparent;
  }
  
  li a:hover {
     /* background-color: #b0d24c;*/
     display:block;
      border-radius:10px;
      border:3px solid #fcb037;
      color:#1f2348;
      margin-top:5px; 
  }
  
  #Logo {
      clear: none;
      float: left;
      margin-left: 1.6949%;
      width: 15.2542%;
      display: block;
  }
  #headerTable{
      font-family:header;
      font-size:20px;
      font-weight:bold;
      width:100%;
      color:#fcb037;
      padding:12px;
  
      }
  #Login {
  
      text-align:right;
      padding-right:2ex;
  }
  #Login a{
      color:#fcb037;
  }
  #Login a:hover{
      color:#facb29;
  }
  #SignUp{
      border-left:1px solid;
      text-align:left;
      padding-left:2ex;
  
  }
  #SignUp a{
      color:#fcb037;
  }
  #SignUp a:hover{
      color:#facb29;
  }
  #Contact {
      font-family:email;
      text-align:right;
      padding-left:0.5ex;
      padding-right:2ex;
      font-family:email;
      font-size:18px;
  
  }
  #Contact a{
      color:#fcb037;
  }
  #Contact a:hover{
      color:#facb29;
  }
  #SocialLink {
      border-left:1px solid;
      text-align:center;
      padding-left:0.5ex;
  
  }
  #SocialLink a{
      color:#fcb037;
  }
  </code></pre>