Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
O codigo abaixo é o seguinte, tenho um campo input que usando ajax, vai mostrar sugestoes de pesquisa em uma div oculta, os dados mostrados será uma lista, porem ele mostra um espaço antes de começar os resultados, como se tivesse uma li em branco no começo da ul
Nota: já tirei o margin e o padding, e tambem como estou usando position:relative; preciso definir o top para que a div fique onde eu quero, porem no FF tenho que colocar top:22px; e ja no IE top:2px; tem como cosertar isso com CSS ?
E tambem esse codigo funciona com o erro acima em qualquer browser, mas no IE se a pagina tiver texto acima da caixa de busca, a div fica toda deformada.
Existe algum modo de contronar isso? Meu codigo esta errado?
Segue o codigo
<!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>
<title>Caixa Sugestao CSS</title>
<style type="text/css">
#busca {
width:298px;height:20px;
border:2px solid #000;
background:#666;
}
#botao {
width:58px;
height:20px;
float:left;
background:#999;
text-align:center;
font-weight:bold;
}width:238px;
_width:233px;
height:18px;
float:left;
border:none;
background:#ccc;
font-weight:bold;
}
#sugestao {
display:none;
position:relative;
top:22px;
/* top:2px; => Para ie7 e necessatio definir como top:2px; */
left:-2px;
height:20px;
padding:0;
margin:0;
}text-decoration:none;
outline:0;
color:#fff;
font-weight:bold;
}width:302px;
height:auto;
padding:0;
margin:0;
background:#333;
list-style:none;
text-indent:10px;
opacity:.8;
filter:alpha(opacity=80);
}
</style>
</head>
<body>
<div style="width:auto;height:20px;">
<div id="busca">
<input type="text" style="float:left;" onfocus="document.getElementById('sugestao').style.display='block';" >
<div id="botao">Buscar</div>
<div id="sugestao">
<ul>
<li><a href="#">Sugestao para sua pesquisa</a></li>
<li><a href="#">Sugestao para sua pesquisa</a></li>
<li><a href="#">Sugestao para sua pesquisa</a></li>
</ul>
</div>
</div>
</div>
este texto e so<br>pra testar a posicao<br>e a tranparencia<br>
</body>
</html>Carregando comentários...