Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Leandro Vieira Pinho

O temível 3px inserido pelo ie

Por , em Desenvolvimento frontend

Recommended Posts

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Pessoal, acho muitos aqui conhecem os 3px que o ie adiciona nas div "flutuadas". Então já vi alguns exemplos não consigo aplicar no meu exemplo. VejamVou explicar.Tenho um código asssim:<div id="sidebar"></div><div id="sidebar_extra"></div><div id="conteudo"></div>E esta css:#sidebar {float: left;width: 150px;background-color:#009900;}#conteudo {margin-left: 150px;width: 484px;background-color: #99CCCC;}#sidebar_extra {background-color:#FF3300;float: right;width: 140px;}Totalizado terei 774px, sendo 150+484+140. Mas o ie adiciona os tal 3px por conta dele, o que me obriga deixar a div conteudo com apenas 478 e perdendo 6px com essa história.Alguém sabe como resolver neste exemplo?Grato.Leandro Vieira

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

prontim rapaz...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bug ie 3px</title>
<style type="text/css">
.geral { width: 774px; margin: auto; background-color: #9966FF; height: 500px; }
.esqCentro   { width: 634px; float: left; height: 300px; }
.centro { width: 484px; float: right; background-color: #99CCCC; height: 300px; }
.esquerda   { width: 150px; float: left; background-color:#009900; height: 300px; }
.direita  { width: 140px; float: right; background-color:#FF3300; height: 300px; }
.boxclear  { clear: both; line-height: 0; }
</style>
</head>
<body>
<div class="geral">
	<div class="esqCentro">
		<div class="centro">
			<p>Estava div (#conteudo) deveria estar em cima ao lado das outras (direita e esquerda).</p>
			<p>Devido o bug de 3px do IE, isto não é possível.</p>
			<p>A solução até o momento é usar um hack para IE para diminuir 6px da div (#conteudo).</p>
			<p>* html #conteudo {width: 476px;}</p>
			<p>Mas eu não gostaria de perder os 6px, e ao mesmo tempo descobrir uma correção para este bug. Existem alguns mas não conseguir aplicar neste caso.</p>
		</div>
		<div class="esquerda">Leandro</div>
		<div class="macete"></div>
	</div>
	<div class="direita"><p>Vieira</p></div>
	<div class="macete"></div>
</div>
</body>
</html>

 

qq coisa falae... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito