title: IE7 Footer Problems
body: <p>I am having problems with a few of my footer elements in IE7.  <a href="http://landingdev.fishlist.com/" rel="nofollow noreferrer">The page I am working on can be found here</a>.</p>
  
  <p>Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/R5Uq2.jpg" alt="enter image description here"></p>
  
  <p>IE7:</p>
  
  <p><img src="https://i.stack.imgur.com/6NbCD.png" alt="enter image description here"></p>
  
  <p>Here's the markup:</p>
  
  <pre><code>&lt;div id="footer_container"&gt;
    &lt;div id="footer"&gt;
      &lt;div class="top_row"&gt;
        &lt;div class="link_box"&gt;
          &lt;h3&gt;Product&lt;/h3&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="../buyers/simple-yet-powerful"&gt;Buyers Tour&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../suppliers/simple-yet-powerful"&gt;Suppliers Tour&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="link_box"&gt;
          &lt;h3&gt;Company&lt;/h3&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="../about/our-story"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../about/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
           &lt;!-- &lt;li&gt;&lt;a href="../about/press-information"&gt;Press&lt;/a&gt;&lt;/li&gt; --&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="link_box"&gt;
          &lt;h3&gt;Legal&lt;/h3&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="../about/terms-of-use"&gt;Terms of Use&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../about/privacy-policy"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;form method="post"&gt;
          &lt;fieldset&gt;
          &lt;h3&gt;&lt;/h3&gt;
          &lt;input type="text" name="email" id="emailText" maxlength="80" class="input" value="enter your email address..." onfocus="this.className=('input_active')" onblur="this.className=('input')" onclick="this.value='';" /&gt;
          &lt;input type="button" name="submit"  value="" class="subscribe_btn" onmouseover="this.className=('subscribe_btn_over')" onmouseout="this.className=('subscribe_btn')" onclick="submitEmail();" /&gt;
          &lt;div id="submissionResponse"&gt;&lt;/div&gt;&lt;small&gt;*we will not share your email address&lt;/small&gt;&lt;span class="clear"&gt;&lt;/span&gt;
          &lt;/fieldset&gt;
        &lt;/form&gt;
  
        &lt;div class="twitter"&gt; &lt;a href="http://www.twitter.com/sample" onclick="window.open(this.href,'_blank');return false;"&gt;&lt;strong&gt;&lt;/strong&gt;&lt;span&gt;@sample&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="bot_row"&gt;
        &lt;p&gt;&lt;i&gt;The premier online marketplace for buyers and suppliers of wholesale seafood.&lt;/i&gt; | &amp;copy;2009-2011 Sample, LLC  -  All Rights Reserved&lt;/p&gt;
        &lt;a href="../signup" class="join_list_btn1"&gt;&lt;/a&gt; &lt;/div&gt;
      &lt;span class="clear"&gt;&lt;/span&gt; 
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>/********************footer starts********************/
  #footer_container{ float:left; width:100%; background:url(../images/footer_bg.jpg) repeat-x 0 0; height:122px; padding:30px 0 10px; color:#9d9d9d; overflow:hidden; min-width:989px;}
  #footer{ margin:0 auto; width:989px}
  #footer .top_row{ float:left; width:100%; height:95px}
  #footer .top_row .link_box{ float:left; width:115px; margin-right:40px; display:inline}
  #footer .top_row #submissionResponse{ float:left; width:45%;font-size:.9em;color:black;}
  #footer ul{ float:left; width:100%; list-style:none; margin-top:2px}
  #footer ul li{ float:left; width:100%; text-transform:uppercase; font-size:0.625em; line-height:15px; padding:2px 0 0}
  #footer a{ color:#9C9C9C;letter-spacing:0.06em; text-decoration:none;}
  #footer a:hover{ color:#0C7FD0;}
  #footer .link_box h3{ font-size:0.75em; text-transform:uppercase; color:#7B7B7B; font-weight:normal;border-bottom:1px solid #CDCDCD; padding-bottom:1px;letter-spacing:.05em;}
  #footer .twitter{ float:right; padding:0 55px 0 0; width:53px; text-align:center; margin:4px 0 0 0; font-size:0.813em;}
  #footer .twitter a{ float:left; width:100%;cursor:pointer;}
  #footer .twitter a strong{float:left; width:100%; background:url(../images/home-sprite.png) no-repeat -223px -676px; height:45px}
  #footer .twitter a span{float:left; width:100%; color:grey; text-decoration:none;margin-top:-6px;}
  #footer .twitter a:hover{color:#0072a7;}
  #footer .twitter a:hover strong{background-position:-223px -726px; color:#2f89c9;}
  #footer .twitter a:hover span{color:#595959;}
  #footer form{ float:left; width:323px; padding:0 15px 0 30px}
  #footer form h3{ width:180px;height:12px; float:left;  background:url(../images/home-sprite.png) no-repeat 0 -998px; padding-bottom:7px;}
  #footer form .input{ border:1px solid #c4c4c4; width:240px; padding:4px 5px 4px; height:16px !important; border-right:0; margin:0; font-size:0.7em;letter-spacing:0.03em;  color:#bbbbbb; float:left; outline:none}
  #footer form .input_active{border:1px solid #A6A6A6; width:240px; padding:4px 5px 4px; height:16px; border-right:0; font-size:0.8em;  color:#555555; float:left; outline:none; }
  
  #footer form .subscribe_btn{ float:left; background:url(../images/home-sprite.png) no-repeat -144px -575px; width:71px; height:26px; border:none; cursor:pointer}
  #footer form .subscribe_btn_over{ float:left; background:url(../images/home-sprite.png) no-repeat -144px -601px; width:71px; height:26px; border:none; cursor:pointer}
  #footer form .subscribe_btn:active{ float:left; background:url(../images/home-sprite.png) no-repeat -144px -627px; width:71px; height:26px; border:none; cursor:pointer}
  #footer form small{ display:block; text-align:right; font-size:0.635em; float:right; width:55%; padding:5px 0;color:#858585;}
  #footer .bot_row{ float:left; width:100%; color:#c1c1c1; height:37px; overflow:hidden}
  #footer .bot_row p{ padding:13px 0 0 0; float:left; font-size:0.64em;color:#A6A6A6;letter-spacing:.03em; }
  
  #footer .join_list_btn1{ float:right; background:url(../images/home-sprite.png) no-repeat 0 -690px; width:200px; height:36px; margin:14px 0 0 0; cursor:pointer}
  #footer .join_list_btn1:hover{background-position:0 -726px;}
  /********************footer ends********************/
  </code></pre>