Publicado em 2 de dez.

Problema em DIV com position:relative;

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;

_width:300px; / para IE devido ao padding/

height:20px;
border:2px solid #000;
background:#666;
}
#botao {
width:58px;
height:20px;
float:left;
background:#999;
text-align:center;
font-weight:bold;
}

input {

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

#sugestao a {

text-decoration:none;
outline:0;
color:#fff;
font-weight:bold;
}

ul {

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>

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

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

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>