title: Why is my CSS different in mobile safari?
body: <p>On <a href="http://dl.dropbox.com/u/231591/static%20links/SO%20questions/chrome.png" rel="nofollow noreferrer">Chrome</a>, <a href="http://dl.dropbox.com/u/231591/static%20links/SO%20questions/ff.png" rel="nofollow noreferrer">FF</a> and <a href="http://dl.dropbox.com/u/231591/static%20links/SO%20questions/safari_desk.png" rel="nofollow noreferrer">Safari</a> (for windows) my page looks exactly the same:</p>
  
  <p><img src="https://i.stack.imgur.com/V3pFF.png" alt="safari desktop render"></p>
  
  <p>but on Mobile Safari (iPhone 4) it's like this:
  <img src="https://i.stack.imgur.com/DEYu8.png" alt="mobile safari render"></p>
  
  <p>My problem is the lack of definition in font sizes on the mobile safari page. Please tell me what in my CSS/markup is so screwed?</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="header"&gt;&lt;h1&gt;&lt;a href="./DDD Blog_files/DDD Blog.htm" title="back to home page"&gt;DDD blog&lt;span class="hidden"&gt; (home)&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;/div&gt;
      &lt;div class="newPost controls"&gt;&lt;a href="http://localhost:1906/posts/update"&gt;Post something new&lt;/a&gt;&lt;/div&gt;
  &lt;div class="post"&gt;
      &lt;h2&gt;&lt;a href="http://localhost:1906/posts/2/title-of-the-first-blog-post"&gt;Title Of The First Blog Post&lt;/a&gt;&lt;/h2&gt;&lt;span class="datetime" title="2010-12-15 00:00:00Z"&gt;1 month ago&lt;/span&gt;
      &lt;div class="controls"&gt;&lt;a href="http://localhost:1906/posts/update/2"&gt;edit&lt;/a&gt;&lt;/div&gt;
      &lt;div class="body mattyMarkup"&gt;
          &lt;p&gt;A massive paragraph of text should represent a blog entry. Every line of this should add to the enormous example which I am trying to convey. Sometimes &lt;a href="http://google.com/" title="http://google.com"&gt;links will dot&lt;/a&gt; the post body landscape. Other times, &lt;em&gt;sweet-as&lt;/em&gt; emphasis and punctuation will be required to communicate the message.&lt;/p&gt;
  &lt;p&gt;All in all, this is the end.&lt;/p&gt;
      &lt;/div&gt;
          &lt;div class="comments"&gt;
              &lt;a class="summary" href="http://localhost:1906/posts/detail/2#newComment"&gt;add the first comment&lt;/a&gt;                
          &lt;/div&gt;
  &lt;/div&gt;  
  &lt;div class="post"&gt;
      &lt;h2&gt;&lt;a href="http://localhost:1906/posts/1/the-original-and-best---post-1"&gt;The Original and Best - Post #1&lt;/a&gt;&lt;/h2&gt;&lt;span class="datetime" title="2010-10-07 00:00:00Z"&gt;4 months ago&lt;/span&gt;
      &lt;div class="controls"&gt;&lt;a href="http://localhost:1906/posts/update/1"&gt;edit&lt;/a&gt;&lt;/div&gt;
      &lt;div class="body mattyMarkup"&gt;
          &lt;p&gt;This text will be somewhat more brief than the post above, intended to denote a more recent thought. &lt;/p&gt;
  &lt;p&gt;I have some problems generating meaningful sentences to simply string together for sample text so this will be my second last sentence. This is the last.&lt;/p&gt;
      &lt;/div&gt;
          &lt;div class="comments"&gt;
              &lt;a class="summary" href="http://localhost:1906/posts/detail/1#newComment"&gt;3 comments&lt;/a&gt;                
          &lt;/div&gt;
  &lt;/div&gt;      
      &lt;/div&gt;
      &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      margin: 0;
      border-top: solid 5px #3B9AE6;
  }
  
  .hideOverflow { overflow: hidden; }
  
  #container {
      margin: 0 auto;
      width: 40em;
      padding: 0 1em;
  }
  
  .post {
      background-color: #FFFFFF;
      margin: 5em -1em;
      padding: 1em 0;
  }
  
  .post h2 { margin-top: 0; float:left; }
  .post span.datetime { margin: 0 1em; }
  .post .body { clear: both; }
  .post .comments  a.summary { float: right; font-size:.9em; }
  .post .controls { float: right; }
  
  .updatePost form input[name], .updatePost form textarea[name] { width: 100%; }
  .updatePost a.delete { float: right; margin-top: .25em; }
  
  #footer { }
  
  
  /*
  Generics
  */
  
  body { 
      color: #333; background-color: #fff;
      line-height: 1.3em;
  }
  body, input, textarea { font: 14px "Lucida Sans",tahoma,sans-serif; }
  
  h1, h2, h3, h4, h5, h6 { font-family: Georgia,serif; font-weight: normal; color: #377AB0; }
  /* */
  h1 { font-size: 2.5em; }
  h2 { font-size: 1.8em; }
  
  
  a, a:link { color: #3B9AE6; text-decoration: underline; }
  a:hover, a:active, a:hover:visited , a:active :visited { color: #333; text-decoration: underline; }
  a:visited { text-decoration: none; }
  
  input.tip, textarea.tip { color: #aaa; }
  form, fieldset { margin:0; padding:0; border:0; }
  
  .infoBlock { margin: 1em 0; padding: 1em; background-color: #F2F9FD; }
  
  
  /*
  Specifics
  */
  
  #header h1 { color: #D6D6D6; }
  #header h1 span.hidden { color: #fff; }
  #header h1 a { color: #D6D6D6; text-decoration: none; }
  #header h1 a:hover { background-color: #D6D6D6; color: #fff; text-decoration: none; }
  
  .post { margin: 4em 0; }
  .post h2 a { color: #333; text-decoration: none; }
  .post h2 a:hover, .post h2 a:active { color: #333; text-decoration: underline; }
  .post span.datetime { color: #aaa; line-height: 1.8em; }
  
  ol.comments { 
      list-style-type: none; 
      background-color: #F2F9FD;
      margin: 2em 0;
      padding: 1em;   
  }
  ol.comments span.datetime { font-size: .9em; }
  ol.comments span.name { color: #3B9AE6; }
  
  .newComment {
      border-top: dashed 1px #ccc;
      margin: 2em 0;
      padding: 1em;   
  }
  .newComment form p { font-size: .9em; }
  
  .updatePost input[name=title] { font-size: 1.2em; }
  .updatePost a.back { margin: 0 1em; }
  
  .controls a, .controls a:link, a.command, a.command:link { color: red; text-decoration: underline; }
  .controls a:hover, .controls a:active, .controls a:hover:visited , .controls a:active :visited,
      a.command:hover, a.command:active, a.command:hover:visited , a.command:active :visited{ color: #333; text-decoration: underline; }
  .controls a:visited, a.command:visited { text-decoration: none; }
  </code></pre>