Question

This is my markup:

<div class="contentSubBox">
    <h5>Please choose a report</h5>
    <div class="arrowNavigation">
        <div class="arrowNavigationLeft">
            <a href="#" class="button">&lt;&lt;</a>
            <a href="#" class="button">&lt;</a>
        </div>
        <div class="arrowNavigationCenter">Page 1 of 8</div>
        <div class="arrowNavigationRight">
            <a href="#" class="button">&gt;</a>
            <a href="#" class="button">&gt;&gt;</a>
        </div>
    </div>
</div>

And this is the CSS that goes with it (the relevant part):

div.arrowNavigation { position: relative; text-align: center; width: 200px;}
div.arrowNavigation div.arrowNavigationLeft, div.arrowNavigation div.arrowNavigationRight { position: absolute; text-align: left; }
div.arrowNavigation div.arrowNavigationLeft { bottom: 0; left: 0; }
div.arrowNavigation div.arrowNavigationRight { bottom: 0; right: 0; }
.button { background: url("http://www.pimco.com/_layouts/PIMCOdotCOM/images/backgrounds/client-access.png") top left repeat-x #EBF2EB; border: 1px solid #B3C3B7; padding: 3px 8px; }

The problem I’m having is that IE 7 cuts off the top and bottom part of the buttons.
In Mozilla Firefox, it looks like this, which is exactly like I want it:

Internet Explorer does this:

The relative positioning isn’t responsible. I tried floating and it didn’t work. Manually setting height or min-height or font-size of the links or the container didn’t help either.

If I change one link to <input type="button" class="button"/>
it will look like this:

So changing the height by adding another element somehow works. I really want to avoid that, though.

Any ideas?

Thank you!

Answer 1

Try giving hasLayout to .button, by adding the common zoom: 1 fix.

I’ve not tried it, but that does look exactly like a problem you can fix by providing the afflicted elements with “layout”.