CODEWITHSUNDEEP
cssinternet-explorer
Rishi
Rishi

Reputation: 677

Centered block in IE9 and/or earlier version

I can't fix an issue am having with centering a block of content in IE9. I tried various stuff from the web, didn't work. If possible, I'd appreciate if this could be hosted somewhere where I can see it working.

I have defined doctype:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <!--[if IE]>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <![endif]-->

I tried adding this in head section also, before the commented "[if IE]" or even replaced "EmulateIE7" with "edge", didnt work:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Firefox/Chrome: Firefox

IE 9: IE9

CSS: 

.zone {
    width: 0; 
    height: 0;
    border: solid transparent;
}

.container {
    border: 4px solid #666;
    position: relative;
    float: left;
    margin: 2px;
}

.zone-label {
    background-color: #666;
    color: white;
    font-size: 25px;
    font-weight: bold;
    padding: 0 5px;
    position: absolute;
    margin: 0 -50% 0 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.layout {
    /*position: relative;*/
}

.clear {
    clear: both;
}

.zone-green-949 {
    border-width: 120px 475px;
    border-color: black green;
}

.container-green-949 {
    width: 949px;
}

.zone-blue-308 {
    border-width: 76px 154px;
    border-color: black blue;
}

.container-blue-308 {
    width: 308px;
}

.zone-purple-629 {
    border-width: 159px 315px;
    border-color: black purple;
}

.container-purple-629 {
    width: 629px;
}

Html:

<div class="layout">
    <div class="container container-green-949">
        <div class="zone zone-green-949">
            <span class="zone-label">Zone 12</span>
        </div>
    </div>

    <div class="clear">

    <div>
        <div class="container container-purple-629">
            <div class="zone zone-purple-629">
                <span class="zone-label">Slider</span>
            </div>
        </div>

        <div class="container container-blue-308">
            <div class="zone zone-blue-308">
                <span class="zone-label">Zone 1</span>
            </div>
        </div>    
        <div style="clear: right;">
        <div class="container container-blue-308">
            <div class="zone zone-blue-308">
                <span class="zone-label">Facebook Fan</span>
            </div>
        </div>    
    </div>
</div>

Edit: Answer is to add this (see Hashem Qolami's comment below): -ms-transform:translate(-50%, -50%);

Upvotes: 0

Views: 87

Answers (2)

Rishi
Rishi

Reputation: 677

Answer is to add this (see Hashem Qolami's comment): -ms-transform:translate(-50%, -50%);

Upvotes: 2

Sander Koedood
Sander Koedood

Reputation: 6347

Though I'm unable to reproduce the effect, my guess would be that you need to set a transform origin:

.zone-label {
    background-color: #666;
    color: white;
    font-size: 25px;
    font-weight: bold;
    padding: 0 5px;
    position: absolute;
    margin: 0 -50% 0 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Set the origin for different browsers */
    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;
}

This makes sure that all browsers use the middle as transform orientation point.

Let me know if this works out for you.

Upvotes: 0

Related Questions