title: Menu Layout works in all browsers EXCEPT iPhone
body: <p>I have a menu very similar to the menu here on StackOverflow.  The problem is that my menu looks right in every browser I've tested it on EXCEPT for my iPhone.</p>
  
  <p>Here is a screenshot of the iPhone
  <img src="https://i.stack.imgur.com/ayUIo.png" alt="iphone menu"></p>
  
  <p>Now obviously the "Add Event" button is supposed to be the same size as the rest.</p>
  
  <p>Here's my Markup</p>
  
  <pre><code>        &lt;div id="menucontainer"&gt;
              &lt;div class="floatleft"&gt;
                  &lt;ul class="menu"&gt;
                      &lt;li&gt;&lt;%: Html.NavigationLink("Now", "Index", "Events")%&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;%: Html.NavigationLink("Coming", "Coming", "Events")%&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;%: Html.NavigationLink("Hot", "Hot", "Events")%&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;%: Html.NavigationLink("Tags", "Index", "Tags")%&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;%: Html.NavigationLink("Users", "Index", "Users")%&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="floatright"&gt;
                  &lt;ul class="menu"&gt;
                      &lt;li&gt;&lt;%: Html.NavigationLink("Add Event", "AddEvent", "Events")%&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And here's my CSS</p>
  
  <pre><code>#menucontainer{position:relative; width:675px; float:right;}
  ul.menu
  {
      padding: 0 0 2px;
      position: relative;
      margin: 0;
  }
  
  ul.menu li
  {
      display: inline;
      list-style: none;
  }
  
  ul.menu li a
  {
      padding: 8px 18px;
      font-weight: bold;
      text-decoration: none;
      line-height: 2.8em;
      background-color: #666;
      color: #fff;
      border: 1px solid black;
      text-shadow:#000 0px 1px 1px;
  }
  
  ul.menu li a.youarehere
  {
      background-color:@brand_color;
      color: #fff;
  }
  
  ul.menu li a:hover
  {
      background-color:@brand_color;
      text-decoration: none;
  }
  
  ul.menu li a:active
  {
      background-color:@brand_color;
      text-decoration: none;
  }
  
  ul.menu li.selected a
  {
      background-color:@brand_color;
      color: #000;
  }
  .floatright
  {
      float: right;
  }
  .floatleft
  {
      float: left;
  }
  </code></pre>
  
  <p>Unfortunately I can't figure this one out.  Thanks in advance for any direction.</p>
  
  <h1>EDIT:</h1>
  
  <p>This is the final output being sent to the browser</p>
  
  <pre><code>        &lt;div id="menucontainer"&gt;
              &lt;div class="floatleft"&gt;
                  &lt;ul class="menu"&gt;
                      &lt;li&gt;&lt;a class="youarehere" href="/"&gt;Now&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/events/coming"&gt;Coming&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/events/hot"&gt;Hot&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/tags"&gt;Tags&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/users"&gt;Users&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="floatright"&gt;
                  &lt;ul class="menu"&gt;
                      &lt;li&gt;&lt;a href="/events/addevent"&gt;Add Event&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <h1>EDIT:</h1>
  
  <p>Reproduction on jsbin<br>
  <a href="http://jsbin.com/akadi3/2" rel="nofollow noreferrer">http://jsbin.com/akadi3/2</a> (note: obviously you need the iOS browser to see the problem)</p>