Problem with margin-left in Internet Explorer

Question

Problem with margin-left in Internet Explorer

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

My area is not CSS, I learned the basics these days and I'm just breaking a branch here.

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

In Google Chrome:

InInternetExplorer:

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

css

asked by anonymous 24.07.2015 / 22:47

2 answers

Find in mongoose bank by Nodejs @yield does not display content

score 1 · Answer 1

1. The elements to be displayed as inline are missing. To do this, use the display parameter. Example: display:inline . However, if you want to customize margins and padding, define as display:inline-block .

2. The width of the style .card is in 100% , so even if the elements are with display:inline-block , they will be thrown down because of the fixed width definition in the container main .card-container , set with 200px .

To solve, set a fixed width for the .card style. In the correction below, it was set to 130px .

In the .icone , .card-container and .card styles, set the position parameter to relative .

4. In the 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 the whole CSS part for this fix. In the HTML part, you do not have to mess with anything, even though you have several errors as well.

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

score 0 · Answer 2

0

You need to put the !DOCTYPE statement on 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">

27.07.2015 / 15:59