why are the four buttons not lining up in IE?

Question

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-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;
            }

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 can use IE developer tools. In IE 8 and above the tools are already part of IE (press the F12 key). I think IE 7 and definitely IE 6 you have to download and install them. — Felan, Aug 23 '11 at 14:37

score 2 · Answer 1 · edited May 23 '17 at 12:14

2

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

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

More info:

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.

edited May 23 '17 at 12:14

Community

1
1

answered Aug 23 '11 at 14:32

thirtydot

224,678
48
389
349

How do you find these? Do you have a tool to find it as easily as you do? – Matt Elhotiby Aug 23 '11 at 14:34
This would not fix it in IE6/7, which is why I asked which IE he was testing. From the article, IE6/7 need layout to be triggered and `display: inline` since they do not support inline-block explicitly. – kmiyashiro Aug 23 '11 at 14:34
@kmiyashiro: He's applying it on `a` elements (which are naturally inline), so that's not a problem. Besides, it's already lined up in IE7 (though there are plenty of other problems with that page in IE7). – thirtydot Aug 23 '11 at 14:36
1

built-in developer tools? Which IE are you talking about? The Developer Toolbar is a plugin that you have to install in IE6/7. http://www.microsoft.com/download/en/details.aspx?id=18359 – kmiyashiro Aug 23 '11 at 14:37
ya there are mainly issues with the header on this page in IE7...any ideas what is causing the header to look like that – Matt Elhotiby Aug 23 '11 at 14:40
it looks like the height is too much which is causing the page to middle portion to be altered..any ideas – Matt Elhotiby Aug 23 '11 at 14:41
or should I ask a new question to address the header – Matt Elhotiby Aug 23 '11 at 14:43
@kmiyashiro - IE7 *does* support `inline-block`, albeit with bugs. It only works if the element defaults to `inline`, so one needs to use `` instead of `
` if you want to use `inline-block` in IE7. Slightly annoying, but it does work. (IE6, however, is beyond hope... don't use `inline-block` if you want to support IE6. But frankly, if you're trying to support IE6, that'll be the least of your worries)
– Spudley Aug 23 '11 at 14:45
@Spudley: You can use `display: inline-block` on `div`s (etc.) in IE6/7 with a simple workaround. [This answer](http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6/5838575#5838575) explains it and [this answer](http://stackoverflow.com/questions/6701763/how-do-i-center-a-list-of-divs-horizontally/6701780#6701780) has a link to a demo that does indeed work in IE7 (it would also work in IE6 but I used `>`). – thirtydot Aug 23 '11 at 14:54
@Tamer: A new question, I think. I had a quick look, and at first glance it doesn't look easy enough that I can just write in a comment here. – thirtydot Aug 23 '11 at 14:57
i will post a new question and give you the link....it looks related to the phone class – Matt Elhotiby Aug 23 '11 at 15:03
here is the link http://stackoverflow.com/questions/7163268/why-is-the-header-off-on-ie7 I had my co-worker ask the question thanks again – Matt Elhotiby Aug 23 '11 at 15:09

why are the four buttons not lining up in IE?

1 Answers1

Linked