Problema com DIVs no IE

[CoRnetA_. 0]

Olá pessoal,

já estou um pouco nervozo com o meu CSS, e com o IE...

Então, eu fiz um div pra enquete, e ele fica certinho os tamanho no FF, mas quando abro no IE, a parte inferior dele fica maior do que o correto...

 

Antes de ver o código pra me ajudar, as imagens citadas nele são:

enqueteTop.gif: 222x28px

enqueteBottom.png: 221x10px

 

Certo, não vou passar as imagens, pra testar da pra criarem ai uma desse tamanho, mais facil...

 

O código é esse:

 

/* ENQUETE */
#boxEnquete{
	display: table;
	float: left;
	margin: -70px 0px 0px 0px;
	width: 222px;
}

#boxEnquete p{
	padding: 0px;
	margin: 5px;
	font-weight: bold;
}

#enqueteTop{
	background-image: url("images/enquete/enqueteTop.gif");
	background-repeat: no-repeat;
	display: table;
	height: 28px;
	width: 222px;
}

#enqueteMiddle{
	background-color: #e6e6e6;
	display: table;
	width: 221px;
}

#enqueteBottom{
	background-image: url("images/enquete/enqueteBottom.png");
	background-repeat: no-repeat;
	height: 10px;
	width: 221px;
}

agora o código HTML

 

<div id="boxEnquete">
		<div id="enqueteTop">
		</div>
		<div id="enqueteMiddle">
			<form name="frmEnquete" action="" method="post">
				<p>O que você achou do novo site?</p>
				<input name="option1" type="radio" value="value1">O melhor!
				<br/>
				<input name="option1" type="radio" value="value1">Regular
				<br/>
				<input name="option1" type="radio" value="value1">Ruim
				<br/>
				<input type="submit" name="btnSubmit" value="" id="btnSubmitVotar" />
				<input type="button" name="btnSubmit" value="" id="btnSubmitResultado" onClick="link('buscape','html')" />
			</form>
		</div>
		<div id="enqueteBottom">
		</div>
	</div>

Gostaria da ajuda de vocês, pois sou meio novo em CSS...

Agradeço desde já a atenção, obrigado!

[inforsis 1]

Olá CoRnetA_., Boa Noite!

Caso seja possivel passa um link que facilita a visualização do problema para o pessoal que quer te ajudar. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[CoRnetA_. 0]

Oi inforsis,

então, da uma olhada no site...

 

Então, aquele problema resolvi, troquei tudo a estrutura que tava com divs, mudei pra tables e algumas divs...

ai assim, abra ele no IE, e no FF...

ae se tu olhar, tem aquelas 3 bolinhas la em cima, de VOTE, ESPECIAL, e USER... no FF elas tem link, no IE não tem como clicar, é como se não existisse link lá...

 

e outro problema grande, é a área do contéudo, se tu der uma olhada, ele não fica parelho com o footer...

eu ja fiz de tudo, botei display: table, block, mudei aquela parte que ta como DIV pra tables, mas o problema persiste, em ambos navegadores...

 

Agradeço desde já a ajuda, sou grato!

[CoRnetA_. 0]

Fala pessoal, preciso muito da ajuda de vocês, já fiz de tudo :S e não sei o motivo

Obrigado!

Aguardo a ajuda de todos!

[Rasp 3]

CoRnetA_.,

Cara a principio o erro que você relatou lá em cima e disse que resolveu acontece porque o Internet Explorer (6 e 7) possue um bug que dependendo das propriedades que você utilizou no css como por exemplo margin-bottom, margin-left (mais comum de acontecer) ele duplica o tamanho especificado na declaração com isso fica perfeito no FF e bugado no IE.

 

Normalmente quando isso acontece dou uma revisada na declaração do css e sempre resolve, você pode experimentar quando isso acontecer as seguintes declarações:

 

display: inline-block; (já que o IE7 não interpreta display: table)

position: relative; (resolveu até hoje meus problemas no IE e tambem no Opera, que por sinal exige que você declare todas as propriedades padrão, width, height, etc).

 

Quanto ao uso de hacks não te aconselho... mais se você tentar de todas as maneiras e não conseguir... ai sim... mais crie uma folha de estilo separada e coloque-a dentro desta tag:

 

<!--[if lte IE 6]>
<link rel="stylesheet" href="css/iehacks.css" type="text/css" media="screen" />
<![endif]-->

Com isso não há o problema de caso queira certificar o css e o mesmo ser inválidado.

Quanto ao problema dos links estou vendo aqui, e jaja te respondo.

 

Absss []'s

[Rasp 3]

CoRnetA_.,

Vi teus scripts cara e o problema está no layout e no css.

 

O que está acontecendo é que o link não esta funcionando devido a tabela da id="boxImgHead" esta por cima da tabela dos links (mais um bug do IE) por isso funciona no firefox e não no explorer, o firefox interpreta a tabela no tamanho especificado, mais o IE não por causa do bug, como comentei acima, pra você poder visualizar oq eu te disse faz o seguinte: inclui um background: red nessa tabela que vai dar pra ver o que está acontendo.

 

index.html

 

<tr id="boxImgHead">
	<td id="imgRandon"></td>
</tr>

 

layout.css

 

#boxImgHead {
	width: 310px;
	height: 370px;
	top: 0;
	left: 222px;
	position: absolute;
}

Observei que você esta usando position: absolute, com isso a imagem fica "flutuante" no site...

Porque você não declara sua função imgRandon em uma div dentro do topo do site #lineHead

creio que desse modo você irá resolver seu problema...

 

Qualquer coisa estamos ai

[]'s

[CoRnetA_. 0]

Rasp,

 

Antes de mais nada, muito obrigado pelas dicas, eu nem sabia desse esquema do display table, e nem o do position...

Obrigado...

 

Certo, sobre o problema daquelas minhas bolinhas coloridas que estavam sendo escondidas pela imagem, consegui resolver como você disse, fiz a na #lineHead, e funcionou perfeitamente... Obrigado!

 

Agora arrumei todos os problemas, criei uma td, e dei um valign top, ai ficou perfeito...

 

Muito obrigado a todos que me ajudaram!