Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá Pessoal, bom dia.
beleza?
Passei praticamente o dia todo ontem tentando resolver essa questão, mas sem sucesso.
Desenvolvi um menu para o site de um cliente, utilizando a técnica CSS Sprite que utiliza os posicionamento de background para fazer o efeito Hover no link, até aí tudo bem. Meu problema foi no bendito desenvolvimento crossbrwser:
- Testei no nosso velho amigo IE e olhem o resultado (acessar com IE): http://www.kv2.com.br/clientes/preview/criativacozinha/index.php
O Menu fica parecendo uma escada no IE, tudo desalinhado.
Por gentileza, me ajudem a resolver esse pipino, creio que seja um detalhes, mas não estou sabendo resolver. :mellow:
Segue abaixo meu código CSS e XHTML:
/RESET CSS/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
} line-height: 1;
} list-style: none;
} quotes: none;
} content: '';
content: none;
}/ remember to define focus styles! /
:focus {
outline: 0;
}/ remember to highlight inserts somehow! /
ins {
text-decoration: none;
} text-decoration: line-through;
}/ tables still need 'cellspacing="0"' in the markup /
table {
border-collapse: collapse;
border-spacing: 0;
}/CONFIGURAÇÕES GLOBAIS/
body{background: #460A0A url(../images/bg-site.jpg) repeat;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px;}
a:link{text-decoration: none}
a:hover{text-decoration: underline;}
/ESTRUTURA DO SITE/
#container{width: 960px; height: auto; margin: 0 auto;}
#header{width: 960px; margin: 0 auto;}
#logo{width: 500px; height: 96px; margin: 0 auto; padding-bottom: 20px; padding-top: 20px;}
#slider{width: 960px; height: 250px; float: left; background: url(../images/bg-slider.png) no-repeat; display: block;}
#content{width: 960px; height: 415px; float: left; display: block; background: url(../images/bg-content-home.png) no-repeat;}
#rodape{width: 960px; height: 95px; float: left; display: block; background: url(../images/bg-rodape.png);}
#copyrigth{width: 960px; height: auto; display: block; margin: 0 auto;}
.texto-copyrigth{font-size: 11px; font-weight: normal; color: #FFF; text-align: left; float: left; width: 400px; padding-top: 5px; padding-left: 10px;}
.creditos{width: 110px; float: right; padding-right: 10px;}
.bt-sug-cardapio{width: 300px; float: left; padding-left: 10px; display: block;}
.twitter{width: 220px; float: right; padding-right: 10px; display: block;}
.slideimagens{width: 940px; height: 250px; margin: 0 auto; display: block;}
/PAGINAS INTERNAS/
#content-servicos{width: 960px; height: 615px; float: left; display: block; background: url(../images/bg-content-servicos.png) no-repeat;}
/.....Menu (Sprite)...../
#menu li a { background: url(../images/bg-menu.jpg) no-repeat; height: 40px; float: left; display: inline; list-style-type: none; text-align: left;}
#menu li a span { display: none;}
/ define para cada item a posição em que o sprite está na imagem/
#menu li .home { width: 91px; background-position: 0px 0px; }
#menu li .home:hover { width: 91px; background-position: 0px -40px; }
#menu li .quemsomos { width: 130px; background-position: -91px 0px; }
#menu li .quemsomos:hover { width: 130px; background-position: -91px -40px; }
#menu li .servicos { width: 130px; background-position: -221px 0px; }
#menu li .servicos:hover { width: 130px; background-position: -221px -40px; }
#menu li .eventos { width: 130px; background-position: -351px 0px; }
#menu li .eventos:hover { width: 130px; background-position: -351px -40px; }
#menu li .cardapio { width: 130px; background-position: -481px 0px; }
#menu li .cardapio:hover { width: 130px; background-position: -481px -40px; }
#menu li .pratos { width: 130px; background-position: -611px 0px; }
#menu li .pratos:hover { width: 130px; background-position: -611px -40px; }
#menu li .orcamento { width: 130px; background-position: -741px 0px; }
#menu li .orcamento:hover { width: 130px; background-position: -741px -40px; }
#menu li .contato { width: 89px; background-position: -871px 0px; }
#menu li .contato:hover { width: 89px; background-position: -871px -40px; }
....e o XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Criativa Cozinha | Pratos prontos e congelados, buffet para festas, eventos</title>
<link href="css/geral.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideimagens').cycle({
fx: 'fade'
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"><a href="index.html" title="Criativa Cozinha"><img src="images/logo.png" alt="logo-criativa-cozinha" width="500" height="96" border="0" /></a></div>
<ul id="menu">
<li><a class="home" href="index.php" title="Home"><span>Home</span></a></li>
<li><a class="quemsomos" href="#" title="Quem somos"><span>Quem somos</span></a></li>
<li><a class="servicos" href="servicos.php" title="Serviços"><span>Serviços</span></a></li>
<li><a class="eventos" href="#" title="Nossos eventos"><span>Nossos eventos</span></a></li>
<li><a class="cardapio" href="#" title="Monte seu cardápio"><span>Montar Cardápio</span></a></li>
<li><a class="pratos" href="#" title="Pratos prontos ou congelados"><span>Pratos Prontos</span></a></li>
<li><a class="orcamento" href="#" title="Solicite um orçamento"><span>Orçamento</span></a></li>
<li><a class="contato" href="#" title="Fale conosco"><span>Contato</span></a></li>
</ul>
<div id="slider">
<div class="slideimagens">
<img src="images/slider/img1.jpg" width="940" height="250" alt="culinaria-italiana" />
<img src="images/slider/img2.jpg" width="940" height="250" alt="culinaria-japonesa" />
<img src="images/slider/img3.jpg" width="940" height="250" alt="bolinho-de-carne" />
<img src="images/slider/img4.jpg" width="940" height="250" alt="bife-ao-molho" />
</div>
</div><div id="content"></div>
<div id="rodape">
<div class="bt-sug-cardapio"><a href="#" title="Sugestões de Cardápio"><img src="images/bt-sug-cardapio.png" alt="sugestoes-de-cardapio" width="300" height="95" border="0" /></a></div>
<div class="twitter"><a href="[http://twitter.com/criativacozinha"](http://twitter.com/criativacozinha) title="Siga o Criativa Cozinha no Twitter" target="_blank"><img src="images/bt-twitter.png" alt="siga-me-twitter" width="220" height="95" border="0" /></a></div>
</div>
<div id="copyrigth">
<span class="texto-copyrigth">© 2010 - Criativa Cozinha - Todos os direitos reservados</span>
<span class="creditos"><a href="[http://www.kv2.com.br"](http://www.kv2.com.br) title="agênciakv2 | comunicação interativa" target="_blank"><img src="images/by-kv2.png" alt="agenciakv2" width="110" height="28" border="0" /></a></span>
</div>
</div>
</div>
</body>
</html>Desde já agradeço a atenção de todos.
Abraço e um ótimo dia para todos.
Carregando comentários...