Problem with margin-left in Internet Explorer

Question

My area isn’t even CSS, I learned the basics these days and I’m just breaking a branch here.

My problem is with margin-left from a button, in Chrome it is in the correct position but when I enter through Internet Explorer it goes back to left some pixels:

In Google Chrome:

In Internet Explorer:

The button in XHTML:

<div class="titulo">Você está no</div>
<h:panelGroup rendered="#{MBTemplate.indexAtual == '/index_publico.xhtml'}">
    <div class="card-container"
         onclick="location.reload();
                  location.href = 'index_privado.xhtml'"
         onmouseover="javascript: rotacionarIconeDireita();"
         onmouseout="javascript: rotacionarIconeEsquerda();">
        <div class="card">
            <div class="side">Setor Público</div>
            <div class="side back">Ir ao Setor Privado</div>
        </div>
        <img src="assets/img/mudar_setor.gif" class="icone" id="icone" />
    </div>
</h:panelGroup>
<h:panelGroup rendered="#{MBTemplate.indexAtual == '/index_privado.xhtml'}">
    <div class="card-container"
         onclick="location.reload();
                  location.href = 'index_publico.xhtml'"
         onmouseover="javascript: rotacionarIconeDireita();"
         onmouseout="javascript: rotacionarIconeEsquerda();">
        <div class="card">
            <div class="side">Setor Privado</div>
            <div class="side back">Ir ao Setor Público</div>
        </div>
        <img src="assets/img/mudar_setor.gif" class="icone" id="icone" />
    </div>
</h:panelGroup>

CSS:

.titulo {
    margin-top: 10px;
    margin-left: 61px;
    width: 100px;
}

.icone {
    margin-left: 107px;
    margin-top: 3px;
    position: absolute;
    margin-top: 3px;
}

.card-container {
    cursor: pointer;
    height: 50px;
    perspective: 600;
    position: relative;
    width: 200px;
    margin-top: 5px;
    margin-left: 5px;
}

.card {
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 1s ease-in-out;
    width: 100%;
}

.card:hover {
    transform: rotateY(180deg);
}

.card .side {
    backface-visibility: hidden;
    border-radius: 6px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
    background: #eaeaed;
    color: #0087cc;
    line-height: 50px;
    text-align: center;
}

.card .back {
    background: #eaeaed;
    color: #0087cc;
    line-height: 50px;
    text-align: center;
    transform: rotateY(180deg);
}

Answer 1

1. Missing defining elements to be displayed as inline. To do this, use the parameter display. Example: display:inline. However, if you want to customize margins and spacings (padding, margin), define how display:inline-block.

2. The width of the style .card is in 100%, so, even if the elements are with display:inline-block, will be thrown down due also to fixed width setting in the main container .card-container, defined with 200px.

To solve, set a fixed lag for the style .card. In the correction below, it was defined as 130px.

3. In styles .icone, .card-container and .card, define the parameter position as relative.

4. In style .icone, remove the parameter margin-left.

See the result below:

.titulo {
    margin-top: 10px;
    margin-left: 61px;
    width: 100px;
}

.icone {
    margin-top: 3px;
    position: relative;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding-left:15px;
    padding-top:5px;
}

.card-container {
    cursor: pointer;
    height: 50px;
    perspective: 600;
    position: relative;
    width: 200px;
    margin-top: 5px;
    margin-left: 5px;
    display:block;
}

.card {
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: all 1s ease-in-out;
    width: 130px;
    display:inline-block;
    float:left;
}

.card:hover {
    transform: rotateY(180deg);
}

.card .side {
    backface-visibility: hidden;
    border-radius: 6px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
    background: #eaeaed;
    color: #0087cc;
    line-height: 50px;
    text-align: center;
    vertical-align:middle;
}

.card .back {
    background: #eaeaed;
    color: #0087cc;
    line-height: 50px;
    text-align: center;
    transform: rotateY(180deg);
    vertical-align:middle;
}

Just swap out the whole CSS part for this fix. In the HTML part, you don’t have to mess with anything, although there are several errors as well.

Just swap the CSS for the fix and see the result.

Answer 2

You need to put the statement !DOCTYPE in the first line of your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">