IE5 Vertical Align

Question

I am working on a project for a scanner which runs IE5 (yeah I know!) and they have requested that a link should be a block element with a height. Inside this block, they want the it's contents to be aligned to the centre both vertically and horizontally.

I have this html (for one):

<a class="block cancel vertical-align text-center" href="#" id="btn-cancel">
    <h4>Cancel</h4>
</a>

and the SCSS for that is:

.block {
    display: inline-block;
    *zoom: 1;
    *display: inline;

    height: 100%;
    width: 100%;
    background-color: #3C60EF;

    .block-content {
        padding: 4px;

        > h1, > h2, > h3, > h4, > h5 {
            margin-top: 0;
        }

        @media screen and (min-width: 992px) {
            padding: 10px;
        }
    }
}

.block.vertical-align {    
    display: table-cell;
    vertical-align: middle;

    h3, h4, h5, h6, p, .block-content {
        padding: 0 10px !important;
    }

    form {
        .form-group {
            margin: 0;
        }
    }
}

a.block {    
    background-position: center center;
    background-repeat: no-repeat;
}

.text-center {
    text-align: center;
}

this works fine on my machine (using latest browsers) but on the scanner everything is aligned to the top.

Can anyone suggest anything that might help me?

Do you have a relative/friend who is using a Windows 95 PC and still has the original floppies/CD which Windows 95 came on? Would they like a nice new computer in exchange for it? — Andrew Morton, Nov 18 '14 at 21:41
Yeah, IE6 doesn't allow multiple classes so under that, nope. — Christina, Nov 18 '14 at 21:57
Use conditional css and load another style sheet for that and then make an id or a single class that does all the things that the many classes do — Christina, Nov 18 '14 at 21:59
IE5 does not support multiple class selectors in CSS (eg. `.foo.bar`). IE5 also does not support `display: table-cell` (you need either IE7 or IE8 for that). Your only vertical centering option is to use line-height or absolute positioning. — cimmanon, Nov 18 '14 at 22:00
Normally, `height: 100%` doesn't work unless the parent element has a set height; I think you should use some JavaScript, IE5 is too hard to reach from the future (I mean, now) — Jesus Lugo, Mar 28 '15 at 05:44
I'm not sure if the hasLayout trick for inline block worked in IE5, and to expand on what cimmanon said you'll have to use absolute lengths (i.e. specific pixels). It's also possible that IE5 would choke on some of the newer stuff like media queries and drop styles, rather than just ignoring what it doesn't know. That was common. — morewry, Apr 09 '15 at 04:32
Please take in count that
is a block element, while is inline... block inside inline is not allowed, and weird things can happen when you do so... I'd suggest to change that markup too — Jesus Lugo, Apr 09 '15 at 04:33
You could (don't shoot me down) use a table cell as a container. It's not semantic but seems to be an accepted solution for HTML email layouts. And it's IE5. I'm sure table layouts were still pretty commonplace in the days of IE5. — Chris Smith, Apr 17 '15 at 15:15
Does IE5 support `line-height`? If so, and if you can have a pixel height, you can [use line height to center vertically](http://jsbin.com/leneru/1/edit) — misterManSam, Apr 21 '15 at 01:42

score 0 · Answer 1 · answered Apr 21 '15 at 01:30

<style>
.text-center {
    text-align: center;
}

.fullFrame{
    width: 100%;
    height: 100%;
}
</style>

<table class="fullFrame">
    <tr>
        <td class="text-center">

<a class="block cancel vertical-align text-center" href="#" id="btn-cancel">
<h4>Cancel</h4>
</a>

        </td>
    </tr>
</table>

This will make the cancel link in the vertical and horizontal centre of the page. I could only check as low as IE6 and it seemed to work. Not sure about IE5, but i don't know why you would want to try support that, as it is very out of date.

IE5 Vertical Align

is a block element, while is inline... block inside inline is not allowed, and weird things can happen when you do so... I'd suggest to change that markup too

1 Answers1