why are the four buttons not lining up in IE?

So I have this page and if you look at the 4 buttons "Take a Test Drive" "Lease To Own Options" ext...They are not lining up with the bottom of the div in IE. In firefox it looks fine..here is the html

<div class="main-img-box">
                <img alt="Retail POS Systems" src="/images/software/video_pos_software.png">
                <div class="main-cont-software">
                <a href="/downloads/video_vision_download.php" class="video-testdrive rest_icons"><span></span></a>
 <a href="/lease" class="video-lease rest_icons"><span></span></a>
<a href="javascript:addBookmark('POSNation.com%20-%20Video%20Rental%20POS%20Systems',window.location);" class="video-bookmark rest_icons"><span></span></a>
<a href="/shop_pos/index.php?route=information/contact" class="video-ask rest_icons"><span></span></a>                  </div>
            </div>

Here is some of the relevant CSS

            .main-img-box {
                height: 398px;
                position: relative;
                width: 100%;
            }

            .main-cont-softwar开发者_如何学JAVAe {
                bottom: 0;
                color: #FFFFFF;
                height: 76px;
                left: 14px;
                position: absolute;
                width: 100%;
            }

            .video-testdrive {
                background: url("../images/software/pos-sw-btn-video-testdrive.png") repeat scroll 0 0 transparent;
                display: inline-block;
                height: 57px;
                margin-right: 9px;
                width: 169px;
            }

            .video-lease {
                background: url("../images/software/pos-sw-btn-video-lease.png") repeat scroll 0 0 transparent;
                display: inline-block;
                height: 57px;
                margin-right: 9px;
                width: 169px;
            }

Any ideas on what i am missing

Also is there a good tool to test IE..i use firebug on firefox and it works great but I always have a tough time with IE ..any suggestions there as well

---

You need to add vertical-align: top ..again.

.main-cont-software a {
    vertical-align: top;
}

More info:

• http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
• http://www.brunildo.org/test/inline-block.html

---

Also is there a good tool to test IE..i use firebug on firefox and it works great but I always have a tough time with IE ..any suggestions there as well

By far the best option is the built-in (to IE8+) Developer Tools (hit F12).

If you want to use them while testing in IE6/7, you must download it. Though for IE7, you can just use Compatibility Mode in IE8/9 to test.