Problema com Tamanho e Posicionamento

[vconline 0]

Oi Pessoal.

 

to fazendo um site em HTML e CSS e ainda não sou muito bom com CSS e então to tendo alguns problemas! eu fiz uma parte ontem em casa e testei no meu navegador IE7.. porém no FF e no OPERA nunca ficam com a mesma posicao.. dai eu testei no IE7 do meu trabalho e ficou mais desposicionado ainda.. uma outra coisa é o tamanho dos boxes azul que eu fiz.. os boxes azul são os títulos de algumas páginas. quando eu fiz e testei no meu computador com o IE7 ficou do tamanho certo.. agora aki fica maior do que eu queria..

 

não sei o que fazer.. até mudei o tamanha de um desses boxes e mesmo assim nao muda nada..

 

quem quiser testar pra ver como esta ficando o endereço é: http://www.tradicon.com.br/novosite/teste.asp

 

 

 

to tendo problema com o DIV - home e os divs de titulo e enquete

 

segue o CSS

 

CODE

body {

background: #fff url(fundo_body.png) top no-repeat;

margin: 0;

padding: 0;

font: 90% "Sans-serif", Verdana, Arial, Tahoma;

color: #000000;

}

 

table.bordasimples tr td {border:0px solid #004F75;}

 

h1 { color: #FFFFFF; font-size: 110%; margin-top: 3px; margin-left: 5%;}

h2 { color: #000000; font-size: 90%; margin-top: 13px; margin-left: 5%; line-height: 40%;}

h3 { color: #FF0000; font-size: 100%; margin-top: 13px; margin-left: 15%; line-height: 40%;}

 

 

a.classe1:link {text-decoration: none; color: #FFFFFF}

a.classe1:visited {text-decoration: none; color: #FFFFFF}

a:classe1:active {text-decoration: none}

a.classe1:hover {text-decoration: nono; color: #66CCFF}

 

a.classe2:link {text-decoration: none; color: #000000}

a.classe2:visited {text-decoration: none; color: #000000}

a:classe2:active {text-decoration: none}

a.classe2:hover {text-decoration: none; color: #006699}

 

 

#headerwrapper {

background: #004F75;

width: 100%;

height: 60px;

position: relative;

}

#header {

width: 772px;

height: 50px;

background: url() no-repeat right top transparent;

display: block;

margin: 0 auto;

}

 

#banner{

background: #004F75;

width: 660px;

height: 200px;

margin: 0 0 0 50px;

padding: 0;

position: relative;

top: -360px;

left: 238px;

}

#logo h1 {

width: 228px;

height: 174px;

display: block;

margin: 0 0 0 11px;

padding: 0;

text-indent: -99999px;

background: url(logo.gif) no-repeat right top transparent;

}

 

#enquete{

width: 237px;

height: 0 auto;

display: block;

margin: 0 0 0 -2px;

padding: 0;

position: absolute;

top: 440px;

left: 5 px;

}

#titulo_enquete{

background: #004F75;

width: 233px;

height: 25px;

}

#home{

background: #004F75;

width: 230px;

height: 15px;

margin: 0 0 0 50px;

padding: 0;

position: relative;

top: -70px;

left: 5 px;

}

#titulo_download{

background: #004F75;

width: 230px;

height: 25px;

margin: 0 0 0 50px;

padding: 0;

position: relative;

top: -67px;

left: 5 px;

}

#download{

background: #FFFFFF;

width: 230px;

height: 25px;

margin: 0 0 0 50px;

padding: 0;

position: relative;

top: -64px;

left: 5 px;

}

#titulo_telefones{

background: #004F75;

width: 230px;

height: 25px;

margin: 0 0 0 50px;

padding: 0;

position: relative;

top: -27px;

left: 5 px;

}

#telefones{

background: #FFFFFF;

width: 230px;

height: 25px;

margin: 0 0 0 50px;

padding: 0;

position: relative;

top: -25px;

left: 5 px;

}

 

 

#logo h1 a {

width: 228px;

height: 174px;

display: block;

text-decoration: none;

}

 

 

#logo h1 a:hover {

background: url(logo.gif) no-repeat right bottom transparent;

}

#content {

width: 772px;

margin: 0 auto;

}

p.hidden {

position:absolute;

top:-300px;

left:0;

}

 

#testnav ul {

width: 280px;

height: 171px;

position: relative;

top: -45px;

left: -140px;

}

 

#testnav ul li a {

background: url(logo.png) no-repeat top left;

width: 280px;

height: 171px;

display: block;

text-indent: -9999px;

text-decoration: none;

}

#rodape {

background: #004F75;

width: 100%;

height: 50px;

top: 230px;

position: relative;

}

 

/* #testnav ul li a:hover {

background: url(bttn-doe-de-test.gif) no-repeat bottom left;

}

 

========== segue o HTML

CODE

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="teste.css" />

<title>Tradicon</title>

<title>Sistema de Enquete</title>

<%

'Aqui será feito o Javascript que abrirá os resultados em Pop-up

%>

<script language="JavaScript" type="text/JavaScript">

<!--

function abrirjanela(theURL,winName,features) { //v2.0

window.open(theURL,winName,features);

}

//-->

</script>

<%

'Verificar se o voto foi feito

'Se foi, gravará uma session com a opção marcada

if request.form("voto")<>"" then

session("voto")=request.form("voto")

response.write "<script>java script:abrirjanela('votar.asp','Resultado','width=200,height=280')</script>"

end if

%>

<style type="text/css">

<!--

.style1 {color: #FFFFFF}

-->

</style>

</head>

 

<body>

<div id="headerwrapper">

<div id="header">

<form id="form2" name="form2" method="post" action="">

<label><span class="style1"><br />

<br />

                                                                              Login:</span>

<input name="textfield" type="text" size="15" maxlength="20" />

</label>

<label><span class="style1">Senha:</span>

<input name="textfield2" type="password" size="10" maxlength="10" />

</label>

<label>

<input type="submit" name="Submit2" value="OK" />

</label>

</form>

</div>

</div>

<div id="content">

 

<div id="testnav">

<ul>

<li><a href="../../../Documents and Settings/FERNANDO PIRES/Desktop/quiz1.html">Doe de test</a></li>

</ul>

</div>

</div>

<div id="enquete">

 

<form name="form1" method="post" action"teste.asp">

<td bgcolor="f4f4f4"><div id="titulo_enquete">

<h1>O que achou do nosso Site?</h1>

</div>

<table width="237" border="0" cellspacing="1" cellpadding="0">

<tr>

<td><table width="200" border="0" cellpadding="0" cellspacing="0">

<%

'Criaremos uma variavel que fará com que a primeira opção fique marcada ao iniciar

dim check

check="checked"

 

'Iremos aqui utilizar o WHILE para repedir as Opções para voto

while NOT rsQuestoes.EOF

%>

<tr>

<td width="23"><input name="voto" type="radio" value="

<%

'Aqui setaremos o valor que utilizaremos para somar o voto

'de uma determinada opção

response.write rsQuestoes.fields("Cod_voto")

%>

" <%=check%> /> </td>

<td width="177"><font size="2" face="Arial, Helvetica, sans-serif">

<%

'Mostrar o Campo da tabela que mostrará as Opções

response.write rsQuestoes.fields("Opcao")

%>

</font></td>

</tr>

<%

check=""

rsQuestoes.movenext

wend

%>

</table></td>

</tr>

<tr>

<td><div align="center">

<input type="submit" name="Submit" value="Votar!" />

<br />

<a href="#" onClick="abrirjanela('resultado.asp','Resultado','width=200,height=280')" class="classe2">Ver Parcial de Votos</a><br />

<br />

</div></td>

</tr>

</table></td>

</form>

</tr>

<tr> </tr>

</table>

</div>

 

<div class="style1" id="home"><h1><a href="index.asp" class="classe1">Home</a></h1>

</div>

<div class="style1" id="titulo_download"><h1><a href="downloads.htm" class="classe1">Downloads</a></h1>

</div>

<div class="style1" id="download">

<table width="230" height="25" bgcolor="#F7F7F7" class="bordasimples">

<tr>

<td><h2><a href="donwload_planilhas.htm" class="classe2">Download de Planilhas</a></h2>

<h2><a href="download_documentos.htm" class="classe2">Download de Documentos</a> </h2></td>

</tr>

</table>

</div>

<div class="style1" id="titulo_telefones"><h1>Nossos Telefones</h1></div>

<div class="style1" id="telefones">

<table width="230" height="25" bgcolor="#F7F7F7" class="bordasimples">

<tr>

<td><h2>São Paulo</h2>

<h3>+ 55 11 6557-9678</h3>

<h3>+ 55 11 6557-9678</h3>

<h2>contato@tradicon.com.br</h2>

</td>

</tr>

</table>

</div>

<div class="style1" id="rodape"></div>

<div id="banner">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codeboxbase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="660" height="200">

<param name="movie" value="banner.swf" />

<param name="quality" value="high" />

<embed src="banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="660" height="200"></embed>

</object>

</div>

</body>

</html>

abraço..

[brcontainer 16]

usar TABELAS para estruturar layouts é errado, para saber onde usar tabelas leia este link:

http://forum.imasters.com.br/index.php?showtopic=248704

 

usar position é meio complicado para posicionar as coisas, seu layout é de duas colunas, certo?

Use esta tutorial:

http://forum.imasters.com.br/index.php?showtopic=223799

 

falow abraço ;)