botoes em css usando background

[alexandre h. 1]

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

[dieef5 0]

tem um link p/ visualizar?Ia ficar + facil te ajudar.

[alexandre h. 1]

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

[dieef5 0]

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

[alexandre h. 1]

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

[Guilherme Rambo 4]

eh soh colocar uma classe em kda uma, e na classe mudar apenas o background

[dieef5 0]

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.

[alexandre h. 1]

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...