jQuery - Dúvida

Front-end
#1

Olá integrantes da família GUJ.

Estou utilizando a versão 1.7.2 do jQuery e estou tendo problemas com a interpretação de cada navegador.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Terminal Col&eacute;gio</title>
		<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
		<style type="text/css">
			body {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 13px;
			}
			input {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 13px;
			}
		</style>
		<decorator:head/>
	</head>
	<body>
		<div id="fundo" style="position: absolute; top: 0px;"><img src="imagens/fundo_site.png"></div>
		<div id="topo" style="position: absolute; top: 0px;"><img src="imagens/topo.png"></div>
		<div id="corpo" style="position: absolute; top: 340px; width: 700px;"><br><br><decorator:body/></div>
		<% if (request.getUserPrincipal() == null) { %>
			<div id="menuesq" style="position: absolute; top: 340px; left:320px; width: 200px; height: 400px;"><br>
				<font color="#FF0000">Sua Identifica&ccedil;&atilde;o de Usu&aacute;rio <br>&eacute; o seu RA que consta na sua <br>Carteirinha de Identifica&ccedil;&atilde;o.</font>
			</div>			
		<% } else {%>
			<div id="menuesq" style="position: absolute; top: 380px; left:320px; width: 200px; height: 400px;">
				<a href="aluno"><img src="imagens/menu_home.png"></a>
				<a href="faltas"><img src="imagens/menu_faltas.png"></a>
				<a href="notas"><img src="imagens/menu_notas.png"></a>
				<a href="sair"><img src="imagens/menu_sair.png"></a>
			</div>
		<% } %>
		
		<script type="text/javascript">
			var wDoc = $(document).attr('width');
			var x = (wDoc - 975) / 2;
			$(fundo).css('left', x);
			$(topo).css('left', x);
			$(corpo).css('left', x + 250);
		</script>		
	</body>
</html>

No Google Chrome a página fica corretamente do jeito que imaginei e nos outros navegadores Mozilla Firefox, Opera e Internet Explorer a página fica deformada.

Alguém consegue me ajudar?

#2

bem do jeito que tá realmente fica complicado até de saber qual o design pretendido para a pagina.

se puder colocar uma imagem com o design ou descrever a sua ideia ajudaria.

por hora digo que não é problema no javascript como o titulo sugere. É na realidade problema no css da pagina.

de qualquer forma deixo algumas dicas.

  1. Evite usar o javascript para definir o layout de sua pagina.
  2. Evite o uso desnecessário de position: absolute; em seu css.
  3. separe seu css, preferencialmente em um arquivo a parte.
#3