Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá! Estou enfrentando um grande problema montando botoes com hover usando background no css.Gostaria de saber se alguém já enfrentou esse problema e se é possível resolvê-lo.O problema é que o IE aumenta em 1 pixel a altura da DIV do botao, o que provoca uma diferença grande de altura em todo o menu em relação a outros navegadores, como o firefox.Não sei se existe algum meio de ajustar essa altura da div para que o IE nao aumente em um pixel, talvez exista algum hack que resolva. vou postar uma parte do codigo a seguir. obrigado.<p class="btn_home"><a href="#"> </a></p>.btn_empresa a:link, .btn_empresa a:visited, .btn_empresa a:active { width: 124px; height: 15px; margin: 0px; display: block; text-decoration: none; background-image: url(../img/btn_normal_empresa.gif); padding: 0px;} .btn_empresa a:hover { width: 124px; height: 15px; margin: 0px; display: block; text-decoration: none; background-image: url(../img/btn_hover_empresa.gif); background-repeat: no-repeat; padding: 0px;}
ah sim, entra em http://www.koboldt.com.br/temp/index.html
tah fora do layout, mas eh só pra olhar o bug... comparando entre o FF e o IE tu percebe que o IE tah criando um pixel a mais
obrigado pela ajuda ;)
Mano, uma perguntinha! Pq você fez 1 css p/ cada links do menu??? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif
você pode reduzir isso muita coisa utilizando listas.
Um exemplo:
* {
text-decoration:none;
list-style-type:none;
margin:0px;
padding:0px;
border:none;
}ul.menu {
width:220px;
height:217px;
background: url(../img/fundo_menu.gif) no-repeat;
position: relative;
float:left;
}ul.menu li a {
width:124px;
height:15px;
margin:0px;
display:block;
background: url(../img/btn_normal_areas.gif) no-repeat;
padding: 0px;
}ul.menu li a:hover {
width: 124px;
height: 15px;
margin: 0px;
display: block;
text-decoration: none;
background:url(../img/btn_hover_areas.gif) no-repeat;
padding: 0px;
}Mano, uma perguntinha! Pq você fez 1 css p/ cada links do menu??? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif
você pode reduzir isso muita coisa utilizando listas.
Um exemplo:
no css:
* {
text-decoration:none;
list-style-type:none;
margin:0px;
padding:0px;
border:none;
}ul.menu {
width:220px;
height:217px;
background: url(../img/fundo_menu.gif) no-repeat;
position: relative;
float:left;
}ul.menu li a {
width:124px;
height:15px;
margin:0px;
display:block;
background: url(../img/btn_normal_areas.gif) no-repeat;
padding: 0px;
}ul.menu li a:hover {
width:124px;
height:15px;
margin:0px;
display:block;
background:url(../img/btn_hover_areas.gif) no-repeat;
padding: 0px;
}no html:
e no menu faz assim:
<ul class="menu">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li
<li><a href="#">link</a></li
<li><a href="#">link</a></li
<li><a href="#">link</a></li
<li><a href="#">link</a></li
</ul>teu código vai ficar muito mais limpo e fácil de entender..e quando ter q alterar vai alterar num lugaar soh e naum em todos como você fez. tenta fazer assim
Lembrando q o exemplo eu não alterei nenhuma propriedade. Só fiz um exemplo: tenta fazer assim. Agora to atrasado. Deu minha hora de sair do serviço. Amanhã eu volto.
flw
cara, eu fiz um css pra cada botao pq cada um deles usa imagens diferentes de backgrounds... pq cada um eh um botao diferentetem como em uma lista definir um background diferente para cada "li"?valeu
eh soh colocar uma classe em kda uma, e na classe mudar apenas o background
isso q o inside flw. ai na classe você soh mudaria a img. As propriedades que são comuns em todas ficaria no msm css.
tah, fiz umas alterações, fiz como vcs falaram de usar as listas. porém o meu problema persiste, o IE cria um pixel a mais em cada botao... por favor se vcs tiverem alguma solução me digam. e valeu pela ajuda
segue o novo codigo:
<ul class="menu">
<li class="btn_home"><a href="#"> </a></li>
<li class="btn_empresa"><a href="#"> </a></li>
<li class="btn_areas"><a href="#"> </a></li>
<li class="btn_profissionais"><a href="#"> </a></li>
<li class="btn_links"><a href="#"> </a></li>
<li class="btn_fale"><a href="#"> </a></li>
</ul>------------
ul.menu {
width: 220px;
height: 217px;
background-image: url(../img/fundo_menu.gif);
background-repeat: no-repeat;
position: relative;
float: left;
list-style-type: none;
border: none;
padding-top: 37px;
}ul.menu li a{
width: 124px;
height: 15px;
margin: 5px 0 0 41px;
display: block;
text-decoration: none;
padding: 0px;
}ul.menu li a:hover{
width: 124px;
height: 15px;
margin: 5px 0 0 41px;
display: block;
text-decoration: none;
padding: 0px;
}li.btn_home a {
background-image: url(../img/btn_normal_home.gif);
}li.btn_home a:hover {
background-image: url(../img/btn_hover_home.gif);
}li.btn_empresa a {
background-image: url(../img/btn_normal_empresa.gif);
}li.btn_empresa a:hover {
background-image: url(../img/btn_hover_empresa.gif);
}o resto eh igual...
tem um link p/ visualizar?Ia ficar + facil te ajudar.