Compatibility problem with Chrome and IE, deformed text

Question

Compatibility problem with Chrome and IE, deformed text

Navigation

#1 by (1 votes)

0

Chrome:

IE:

Nomozila:

TherightthingwouldbetostaylikethisinMozilla.InchromeandIEitisnotright.

Iputthetextovertheimageusingthisscript:

CSS:

.img-containerAside{width:359px;height:184px;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;}.img-containerAsideimg{width:100%;height:100%;-webkit-transition:-webkit-transform.7sease;transition:-webkit-transform.7sease;-o-transition:transform.7sease;transition:transform.7sease;transition:transform.7sease,-webkit-transform.7sease;}.img-containerAside:hoverimg{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}.indexDivImagemAside{width:359px;height:184px;}ul.noticiasIndexlih4{font-weight:800;position:absolute;}

HTML:

<!DOCTYPEhtml><html><head><title>sas</title><linkrel="stylesheet" type="text/css" href="sis.css">
   <style type="text/css">
   </style>
</head>
<body>
   <aside>

    <ul class="noticiasIndex">
        <li>
            <div class="img-containerAside">
                <div class="indexDivImagemAside">
                    <a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html"><img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg"alt="esqueleto.html"></a>
                </div>

                <h4><a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html">Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia</a></h4>
            </div>

                <p>Os arqueólogos acreditam que o homem estava fugindo das lavas do vulcão em busca de um lugar seguro, ele conseguiu escap...<a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html" id="continuelendo">Continue lendo &raquo;</a></p>

       </li>
    </ul>
</aside>
</body>
</html>

html css

asked by anonymous 23.08.2018 / 23:17

1 answer

Insert item in html list, using javascript PHP Error - Does not register in the database

score 1 · Accepted Answer

What's missing is position: relative in div that houses the text. To use position: absolute , the parent div must have some position other than static , which is the default ( CSS position ).

You also need to specify the positioning properties ( left , or right , or top or bottom ). In your case I seem to be left and bottom .

Example:

.img-containerAside{
    width: 359px;
    height: 184px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        position: relative; /* propriedade adicionada */
        background-color: yellow; /* propriedade de exemplo */

}

 .img-containerAside img{
   width: 100%;
   height: 100%;
   -webkit-transition: -webkit-transform .7s ease;
   transition: -webkit-transform .7s ease;
   -o-transition: transform .7s ease;
   transition: transform .7s ease;
   transition: transform .7s ease, -webkit-transform .7s ease;

}

.img-containerAside:hover img{
   -webkit-transform: scale(1.1);
   -ms-transform: scale(1.1);
      transform: scale(1.1);
}    

.indexDivImagemAside{
    width: 359px;
    height: 184px;
}

 ul.noticiasIndex li h4{
  font-weight: 800;
  position: absolute;
  left: 0; /* propriedade adicionada */
  bottom: 0; /* propriedade adicionada */
}

<aside>

    <ul class="noticiasIndex">
        <li>
            <div class="img-containerAside">
                <div class="indexDivImagemAside">
                    <a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html"><img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg"alt="esqueleto.html"></a>
                </div>

                <h4><a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html">Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia</a></h4>
            </div>

                <p>Os arqueólogos acreditam que o homem estava fugindo das lavas do vulcão em busca de um lugar seguro, ele conseguiu escap...<a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html" id="continuelendo">Continue lendo &raquo;</a></p>

       </li>
    </ul>
</aside>