I've been working on this page where the alignment of the 4 buttons "Take a Test Drive," "Lease To Own Options," etc. are off in IE but look fine in Firefox. Here's 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>
And here's some relevant CSS:
.main-img-box {
height: 398px;
position: relative;
width: 100%;
}
.main-cont-software {
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;
}
Does anyone have any suggestions as to what might be missing?
Also, can anyone recommend a good tool for testing in IE? I use firebug in Firefox with no issues, but Internet Explorer always seems to give me a hard time. Any tips would be appreciated.