Jump to content


rodrigojr94

Member Since 20/12/2009
Offline Last Active 22/01/2011, 04:45
-----

Topics I've Started

Como Alinhar A Div No Ie8?

22/01/2011, 04:45

Ola, estou tentando alinhar o site que estou fazendo, mas no FIREFOX fica tudo certo, e no IE8 as div que eu criei com position absolut fica todo para fora do site, sera que alguem poderia me ajudar?? estou postando o codigo:

SITE:

<html>
<head>
<title>SITE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/css.css" rel="stylesheet" type="text/css">

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="tudo">
<table align="center" width="750" height="901" border="0"cellpadding="0" cellspacing="0" id="Tabela_01">

	<tr>
		<td colspan="8">
			<img src="imagens/index_01.gif" width="750" height="197" alt=""></td>
	</tr>
	<tr>
		<td colspan="8" valign="baseline"><img src="imagens/index_02.gif" width="750" height="44">
        <div class="menu">
	    <div id="apDiv4"><iframe scrolling="No" width="750" frameborder="0" src="menu/index.html"  height="42"></iframe></div>
        </div></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="imagens/index_03.gif" width="750" height="202" alt="">
            <div class="div3">
	  <div id="apDiv3"><iframe scrolling="No" width="705" frameborder="0" src="slide/index.html"  height="177"></iframe></div>
      </div></td>
	</tr>
	<tr>
		<td colspan="5">
			<img src="imagens/index_04.gif" width="420" height="63" alt=""></td>
		<td colspan="3">
			<img src="imagens/index_05.gif" width="330" height="63" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="imagens/index_06.gif" width="3" height="289" alt=""></td>
		<td colspan="4">
			<img src="imagens/index_07.jpg" width="417" height="289" alt=""></td>
		<td colspan="3">
      
			<img src="imagens/index_08.gif" width="330" height="289" alt=""></td>
	</tr>
	<tr>
		<td colspan="8"><div class="div2" >
		  <div id="apDiv1">TEXTO</div>
		  </div>
		  <div class="div1">
		    <div id="apDiv2">
		      TEXTO<br>
		        
	          
	        </div>
        </div>	    <div class="rua"><img src="imagens/rodape.jpg" width="750" height="105"></div></td>
    </tr>
	<tr>
		<td>
			<img src="imagens/spacer.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="imagens/spacer.gif" width="59" height="1" alt=""></td>
		<td>
			<img src="imagens/spacer.gif" width="196" height="1" alt=""></td>
		<td>
			<img src="imagens/spacer.gif" width="44" height="1" alt=""></td>
		<td>
			<img src="imagens/spacer.gif" width="118" height="1" alt=""></td>
		<td>
			<img src="imagens/spacer.gif" width="112" height="1" alt=""></td>
		<td>
			<img src="imagens/spacer.gif" width="101" height="1" alt=""></td>
		<td>
			<img src="imagens/spacer.gif" width="117" height="1" alt=""></td>
	</tr>

</table>
</div>
</body>
</html>

CSS:

@charset "utf-8";

/* CSS Document */

#apDiv1 {
	position:absolute;
	margin:0 auto;
	width:153px;
	height:17px;
	z-index:100;
	left: 306px;
	top: -212px;
	font:"Arial-Black", Gadget, sans-serif;
	color:#FFF;
	font-family: "Arial Black", Gadget, sans-serif;
	font-style: italic;
	font-size: 14px;
}
.div1 {
	position:absolute;
	}
.div2 {
	position:absolute;

}
#apDiv2 {
	position:absolute;
	width:200px;
	height:18px;
	z-index:1;
	left: -273px;
	top: -181px;
	color:#FFF;
	font-family: Gadget, sans-serif;
	font-style: italic;
	font-size: 14px;
}
#apDiv3 {
	position:absolute;
	width:705px;
	height:177px;
	z-index:1;
	left: 22px;
	top: -190px;

}
body {
	text-align:center;
}
#apDiv4 {
	position:absolute;
	width:750px;
	height:44px;
	z-index:2;
	left: 0px;
	top: -42px;
}
.menu{
	position:absolute;
	}
.div3{
	position:absolute;
    margin: auto;
	}
#tudo {
	text-align:left;
}

Ola, consegui resolver o problema! Quem estiver com esse mesmo problema, da div ficar toda desalinhada no Internet Explorer e no Firefox ficar certo ou vice versa:

Deve criar uma div e dentro dessa div criar outra, assim por exemplo:

<div class = "mae">
	<div id="conteudo">
				conteudo... bla bla bla
	</div>
</div>

O CSS ficaria assim:

.mae { 
      [b] position:relative;[/b]	       

}
#conteudo {
       position:absolute;
       height: 100px;
       etc....;
}

Voce devera colocar o

position: relative;

na div que engloba a outra div e

position:absolute

na div de dentro

IPB Skin By Virteq