IE7 Footer Problems

I am having problems with a few of my footer elements in IE7. The page I am working on can be found here.

Firefox:

IE7:

Here's the markup:

<div id="footer_container">
  <div id="footer">
    <div class="top_row">
      <div class="link_box">
        <h3>Product</h3>
        <ul>
          <li><a href="../buyers/simple-yet-powerful">Buyers Tour</a></li>
          <li><a href="../suppliers/simple-yet-powerful">Suppliers Tour</a></li>
        </ul>
      </div>
      <div class="link_box">
        <h3>Company</h3>
        <ul>
          <li><a href="../about/our-story">About</a></li>
          <li><a href="../about/contact">Contact</a></li>
         <!-- <li><a href="../about/press-information">Press</a></li> -->
        </ul>
      </div>
      <di开发者_开发技巧v class="link_box">
        <h3>Legal</h3>
        <ul>
          <li><a href="../about/terms-of-use">Terms of Use</a></li>
          <li><a href="../about/privacy-policy">Privacy Policy</a></li>
        </ul>
      </div>
      <form method="post">
        <fieldset>
        <h3></h3>
        <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='';" />
        <input type="button" name="submit"  value="" class="subscribe_btn" onmouseover="this.className=('subscribe_btn_over')" onmouseout="this.className=('subscribe_btn')" onclick="submitEmail();" />
        <div id="submissionResponse"></div><small>*we will not share your email address</small><span class="clear"></span>
        </fieldset>
      </form>

      <div class="twitter"> <a href="http://www.twitter.com/sample" onclick="window.open(this.href,'_blank');return false;"><strong></strong><span>@sample</span></a></div>
    </div>
    <div class="bot_row">
      <p><i>The premier online marketplace for buyers and suppliers of wholesale seafood.</i> | &copy;2009-2011 Sample, LLC  -  All Rights Reserved</p>
      <a href="../signup" class="join_list_btn1"></a> </div>
    <span class="clear"></span> 
    </div>
    </div>

The CSS:

/********************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********************/

---

For my money, it's a better use of time make standards-compliant code and then apply IE7 hacks to it, rather than twisting standards-compliant code into standards-compliant knots to make it render well on IE7. I advise using an IE7-only CSS style sheet for this fix (see http://www.quirksmode.org/css/condcom.htm for help on conditional styles).

<!--[if lte IE 7]>
#footer form .input {
padding-top: 0px;
padding-left: 0px;
width: 150px;
height: 26px
}
<![endif]-->

For the missing twitter icon, I don't think IE7 supports block-display on a < strong > tag. Try using a < div > tag for the background area, or assigning the background to the anchor tag.