title: Safari adds huge empty space
body: <p>I am having some problems with Safari. </p>
  
  <ol>
  <li><p>While all browsers display the pages fine, Safari adds a huge white area above the main ContentPlaceholder as shown in the images below. This happens on every page so I guess the problem is in the master page but I can't figure out how to fix it.</p></li>
  <li><p>There is also a small problem with some extra padding above the menu (same happens in Chrome)</p></li>
  </ol>
  
  <p>I'd appreciate any help. thanks in advance.</p>
  
  <p><img src="https://i.stack.imgur.com/1Inms.png" alt="All browsers"></p>
  
  <p><img src="https://i.stack.imgur.com/MYSeg.png" alt="Safari"></p>
  
  <p>Here is my master page:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head runat="server"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /&gt;
  &lt;asp:ContentPlaceHolder ID="HeadContent" runat="server"&gt;
  &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form runat="server"&gt;
  &lt;div class="page"&gt;
      &lt;div class="header"&gt;
          &lt;div class="title"&gt;
              &lt;h1&gt;
                  My ASP.NET Application
              &lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="loginDisplay"&gt;
              &lt;asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"&gt;
                  &lt;AnonymousTemplate&gt;
                      ................
                  &lt;/AnonymousTemplate&gt;
  
                  &lt;LoggedInTemplate&gt;
                      ................
                  &lt;/LoggedInTemplate&gt;
              &lt;/asp:LoginView&gt;
          &lt;/div&gt;
          &lt;div class="clear hideSkiplink"&gt;
              &lt;asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"&gt;
                  &lt;Items&gt;
                      ................
                  &lt;/Items&gt;
              &lt;/asp:Menu&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="leftMenu"&gt;
          &lt;asp:ContentPlaceHolder ID="LeftMenuContent" runat="server"/&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;asp:ContentPlaceHolder ID="MainContent" runat="server"/&gt;
      &lt;/div&gt;
  
      &lt;div class="clear"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;
  
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>And here is the source code and CSS: <a href="http://jsfiddle.net/V5aCa/6/" rel="nofollow noreferrer">http://jsfiddle.net/V5aCa/6/</a></p>