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