title: navbar positioning bug in chrome
body: <p>I am having a strange css positioning issue in chrome only. I have a menu <code>&lt;ul&gt;</code> for navigation that sometimes gets pushed down randomly. Refreshing the page always fixes the problem. Strangely, sometimes if I refresh the page when it is being displayed correctly it gets pushed down.</p>
  
  <p>This is how it is supposed to look, and it does about half of the time:</p>
  
  <p><img src="https://i.stack.imgur.com/Dru3e.png" alt="enter image description here"></p>
  
  <p>And this is what happens when it gets pushed down for some reason.</p>
  
  <p><img src="https://i.stack.imgur.com/OH6ST.png" alt="enter image description here"></p>
  
  <p>The site is live, and you can experience the problem for yourself <a href="http://brannondorsey.com" rel="nofollow noreferrer">here</a>. It might take some clicking around the site to get the <code>&lt;ul&gt;</code> to drop.</p>
  
  <p>Here is the <code>html/php</code> that I am using:</p>
  
  <pre><code>&lt;div class="header"&gt;
  &lt;nav class="navbar"&gt;
    &lt;a href="&lt;?php echo url("home") ?&gt;" class="title"&gt;&lt;?php echo strtoupper($site-&gt;title())?&gt;&lt;/a&gt;
    &lt;ul&gt;
      &lt;?php foreach($pages-&gt;visible() AS $p): ?&gt;
      &lt;li&gt;&lt;a&lt;?php echo ($p-&gt;isOpen()) ? ' class="active"' : '' ?&gt; href="&lt;?php echo (strtolower(($p-&gt;title)) == "work") ? url("home") : $p-&gt;url(); ?&gt;"&gt;&lt;?php echo html($p-&gt;title()) ?&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;?php endforeach ?&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And relevant <code>css</code>:</p>
  
  <pre><code> div.header{
     height: 80px;
     background-color: #000000;
     margin-bottom: 20px;
   }
   div.header nav.navbar{
     width: 960px;
     margin: auto;
     padding-top: 20px;
   }
  
   .navbar ul{
     float: right;
     padding-top: 10px;
     display: inline;
     list-style-type: none;
   }
  
  .navbar ul li{
    margin-left: 20px;
    display: inline;
   }
  
  .navbar a.title{
    width: 500px;
    color: #fff;
    font-size: 26pt;
    display: inline-block;
    padding-top: 8px;
  }
  </code></pre>
  
  <p>Again, I am only experiencing this problem in google chrome.
  Thanks for the help!</p>