GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Incompatibilidade entre navegadores

css
html5
Tags: #<Tag:0x00007fb02370ff28> #<Tag:0x00007fb02370f870>

#1

Boa noite, sou novato em html/css, estou criando um site para fins de estudo, porem o mesmo não funciona corretamente em todos os navegadores. No firefox funciona exatamente como eu quero, porem nem no chrome e nem no explore o resultado é o mesmo.
No chrome e no Explore é como se os background-color da section e do aside não funcionasse.

segue o codigo

headermenufooter CSS

  • {
    margin: 0px;
    padding: 0px;
    font-size: 100%;
    }

.content {
width: 1200px;
height: 800px;
background-color: #696969;
font-family: arial, helvetica, sans-serif;
}

/formata header/
header {
width: 100%;
height: 30%;
position: relative;
background-color: #fff;
overflow: hidden;
}

/formata imagens/
.banner {
position: absolute;
opacity: 0;
animation-name: bannerslide;
animation-duration: 15s;
animation-iteration-count: infinite;
}

@keyframes bannerslide {
25% {
opacity: 1;
transform:scale(1.1,1.1);
}
50% {
opacity: 0;
}
}

/definite deley entre imagens/
.banner:nth-child(1) {

}
.banner:nth-child(2) {
animation-delay: 5s;
}
.banner:nth-child(3) {
animation-delay: 10s;
}

/configura os menus/
ul {
background-color: lightgrey;
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
}

ul li{
width: 200px;
height: 30px;
list-style: none;
float: left;
}

ul li:hover {
background-color: #DCDCDC;
}

/formata submenu/
ul li ul li {
background-color: lightgrey;
text-align: left;
box-sizing: border-box;
padding-left: 5px;
}

/oculta e mostra a submeny/
ul li ul {
display: none;
}

ul li:hover ul {

display: block;
}

a:link {
text-decoration: none;
color: #000000;
}

a:visited{
color: #000000;
}

/formata rodapé/
footer{
clear: both;
width: 100%;
height: 10%;

}

section e aside CSS

  • {
    margin: 0px;
    padding: 0px;
    font-size: 100%;
    }
    /formata pagina principal de boas vindas/
    section {
    width: 60%;
    height: 50%;
    background-color: #ffff;
    float:left;
    }
    /formata novidades/
    aside {
    width: 38.3%;
    height: 47.8%;
    background-color: #ffff;
    border: 10px double #333;
    border-radius: 10px;
    float: left;
    }

#2

Usa o webkit isso vai ajudar bastante