title: Tumblr Themes : ul, il spacing issues?
body: <p>I am in the process of creating a Tumblr theme to work on my CSS and HTML abilities and I have run into a problem. </p>
  
  <p><a href="http://cl.ly/3c0q3X3a0A193z1u2u2V" rel="nofollow">http://cl.ly/3c0q3X3a0A193z1u2u2V</a> - photo post</p>
  
  <p><a href="http://cl.ly/3V3R1W2h17100g371W2y" rel="nofollow">http://cl.ly/3V3R1W2h17100g371W2y</a> - text post</p>
  
  <p>As you can see from the picture above, the text seems to scoot itself down without any other code versus the photo which is always in the correct location. </p>
  
  <p>I am still in my infancy whenever it comes to this kind of thing so I'm not really sure what to do. </p>
  
  <p>Here's my CSS and HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  
  &lt;ul class="header"&gt;
      &lt;li&gt;&lt;a href="/"&gt;&lt;h1&gt;{Title}&lt;/h1&gt;&lt;/a&gt;
      &lt;li&gt;&lt;a href="/about"&gt;About&lt;/a&gt;
      &lt;li&gt;&lt;a href="/message"&gt;Message&lt;/a&gt;
      &lt;li&gt;&lt;a href="/archive"&gt;Archive&lt;/a&gt;
  &lt;/ul&gt;
  
  &lt;ul class="content"&gt;
      {block:Posts}
      {block:Text}
          &lt;li class="text_post"&gt;
              {block:Title}
                      &lt;h3&gt;&lt;a href="{Permalink}"&gt;{Title}&lt;/a&gt;&lt;/h3&gt;
                  {/block:Title}
              {Body}
          &lt;/li&gt;
      {/block:Text}
      {block:Photo}
          &lt;li class="photo_post"&gt;
              &lt;img src="{PhotoURL-500}"&gt;
          &lt;/li&gt;
      {/block:Photo}
  {/block:Posts}
  &lt;/ul&gt;
  
  &lt;style type="text/css"&gt;
  body {
      font-family:Georgia, times, serif; 
      font-size:0.7em;}
  h1 {
      display:inline;
      font-family:'Lucida Grande', Arial, sans-serif;
      font-size:100%;
      color:#00C462; }
  ul, ol {
      list-style-type:none;
      margin:0;
      padding:0;}
  .header {
      position:fixed;
      margin-top:1em;}
  .header li {
      float:left;
      padding-left:1em;}
  .header li a, a:visited {
      color:#000000;
      font-family:'Lucida Grande', Arial, sans-serif;
      text-decoration:none;}
  .header li a:hover {
      color:#CCCCCC;}
  .content {
      float:left;
      overflow:auto;
      margin-top:1.3em;
      width:500px;
      margin-left:23em;}
  &lt;/style&gt;
  </code></pre>
  
  <p>Also, if you have any suggestions on how I can improve my code, please share.</p>
  
  <p>Thank you for your help,</p>