Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estava vizualizando meu código no navegador Google Chrome, até ai tudo bem, quando fui visualizar no Mozilla... O menu apareceu diferente.
O código Html:
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>MENU</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="?page=cadastro">Cadastre-se</a>
<li><a href="?page=produtos">Produtos</a></li>
<li><a href="?page=licenca">Licença</a></li>
<li><a href="?page=contato">Contato</a></li>
</ul>
</div>
</div>
</body>
</html>O código CSS:
body {
background: #ddd;
margin: 0;
padding: 0;
text-align: center /* Hack para o IE6 */
}
#container {
width: 68.5%;
padding: 10px 10px 10px 10px;
}/ MENU /
#menu ul li {
width: 19.9%;
}
#menu {
float: left;
padding: 0 0 0 0;
margin: 0;
/* MUDA AQUI */
width: 100%;
/* Box Shadow */
box-shadow: 0 1px 0 #000;
-moz-box-shadow: 0 1px 0 #000;
-webkit-box-shadow: 0 1px 0 #000;
/* Rounded Corners */
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
/* Rounded Corners */
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}#menu ul {
width: 100%;
border-top: #f3f3f3 1px solid;
padding: 0;
margin: 0;
float: left;
/* Background Gradient */
background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
}#menu li:first-child a, #menu li:first-child, #menu ul {
/ Rounded Corners /
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}#menu li:last-child, #menu ul, #menu li:last-child a {
/ Rounded Corners /
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}#menu li:last-child, #menu li:last-child a {
margin-right: 0;
}#menu ul li {
float: left;
list-style: none;
background: none;
margin-right: 0.2%;
/* CSS3 Background Gradient */
background-image: linear-gradient(bottom, rgb(100,171,78) 0%, rgb(168,230,147) 87%);
background-image: -o-linear-gradient(bottom, rgb(100,171,78) 0%, rgb(168,230,147) 87%);
background-image: -moz-linear-gradient(bottom, rgb(100,171,78) 0%, rgb(168,230,147) 87%);
background-image: -webkit-linear-gradient(bottom, rgb(100,171,78) 0%, rgb(168,230,147) 87%);
background-image: -ms-linear-gradient(bottom, rgb(100,171,78) 0%, rgb(168,230,147) 87%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(100,171,78)), color-stop(0.87, rgb(168,230,147)));
}#menu ul li a {
outline: none;
}#menu ul li a:link, #menu ul li a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
display: block;
color: #262626;
padding: 12px 0;
margin: auto;
text-decoration: none;
/* CSS3 Text Shadow (Sombra de texto) */
text-shadow: 0px 1px 1px #fff;
}#menu ul li a:hover {
cursor: pointer;
color: #fff;
text-shadow: 0px -1px 1px #000;
/* Background Gradient */
background-image: -moz-linear-gradient(top, #929292, #545454);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
}#menu ul li a:active {
color: #fff !important;
text-shadow: 0px -1px 1px #000!important;
background-image: -moz-linear-gradient(top, #444, #666)!important;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;
/* Box Shadow */
box-shadow: inset 0 0 10px #000;
-moz-box-shadow: inset 0 0 10px #000;
-webkit-box-shadow: inset 0 0 10px #000;
}Gostaria de saber como posso resolver esse problema? Agradeço desde já.
Carregando comentários...