我一直在空闲时间从零开始编写个人网站，并且布局大多看起来像我想要的。但是对于我的生活，我无法弄清楚为什么Firefox没有将“下拉菜单项”（“关于”，“博客”等）与背景图像下方的暗灰色区域对齐，就像在Safari中一样。
HTML页面（不包括下拉菜单javascript）：
<html lang="en">
<head>
<title>The Hominis Inquiry</title>
<link href="hominquiry.css" rel="stylesheet" type="text/css">
<script language="javascript" src="hominquiry.js" type="text/javascript"></script>
</head>
<!--<script type="text/javascript">
/*
function toggleSound()
{if (button.checked)
{sound=true}
else
{sound=false}}
*/
</script> -->
<body onload="folded()">
<h1>
<div class="title">
<img src="leftbmk.jpg" height="30%" width="15%" align="left" />
<img src="rightbmk.jpg" height="30%" width="15%" align="right" />
<a href="index.htm" target="_top" onmmouseover="hominis_define()" title="Return to Homepage">
<span class="title">The Hominis Inquiry</span><br/>
A Perpetually Inchoate Exegesis about Ourselves
</a>
</div>
</h1>
<h2>
<div class="about" id="about" onmouseover="unfold('about')" onmouseout="fold('about')">
<a href="about.htm" >
About
</a>
<ul>
<li><a href="about.htm#site" class="underline">The Site</a></li>
<li><a href="about.htm#" class="underline">More Schpiel</a></li>
<li><a href="about.htm#issues" class="underline">Preamble on Social Issues</a></li>
<li><a href="about.htm#author" class="underline">The Author</a></li>
<li><a href="about.htm#source">Open Source Projects</a></li>
</ul>
</div>
<div class="blog" id="blog" onmouseover="unfold('blog')" onmouseout="fold('blog')">
<a href="blog.htm">
Blog
</a>
<ul>
<li><a href="blog.htm#recent" class="underline">Current</a></li>
<li><a href="blog.htm" class="underline">Search by Date</a></li>
<li><a href="blog.htm" class="underline">Search by Topic</a></li>
<li><a href="blog.htm" class="underline">Search by Blogger</a></li>
<li><a href="blog.htm">All Blogs</a></li>
</ul>
</div>
<div class="research" id="research" onmouseover="unfold('research')" onmouseout="fold('research')">
<a href="lab.htm">
Academic Research/ <br/> Papers
</a>
<ul>
<li><a href="research.htm#recent" class="underline">Epistemology</a></li>
<li><a href="research.htm#" class="underline">Research</a></li>
<li><a href="research.htm#" class="underline">Essays</a></li>
<li><a href="research.htm#" class="underline">Computer Simulation</a></li>
<li><a href="research.htm#">More Fun Stuff</a></li>
</ul>
</div>
<div class="hypercourse" id="hypercourse" onmouseover="unfold('hypercourse')" onmouseout="fold('hypercourse')">
<a href="hypercourse.htm">
Hyper-Courses <br/> On Demand
</a>
<ul>
<li><a href="hypercourse/physics.htm" class="underline">Physics (Algebra-Based)</a></li>
<li><a href="hypercourse/diffeq.htm#" class="underline">Differential Equations</a></li>
<li><a href="hypercourse.htm#" class="underline">Other University Studies</a></li>
<li><a href="hypercourse.htm#" class="underline">Discussions/Suggestions</a></li>
</ul>
</div>
<div class="links" id="links" onmouseover="unfold('links')" onmouseout="fold('links')">
<a href ="links.htm">
Other Arbitrarily <br/> Awesome Links
</a>
<ul>
<li><a href="links.htm">Me being Chopped Liver</a></li>
</ul>
</div>
<div class="contact" id="contact" onmouseover="unfold('contact')" onmouseout="fold('contact')">
<form id="startsearch">
<a href>
Contact
</a> <br/><br/><br/>
<input type="text" id="sbox" size="15" value="(under rennovation)">
<input type="button" id="sbutt" value="Find"
</form>
</div>
</h2>
<table border="2" cellpadding="3" cellspacing="3" align="center" valign="center">
<tr><image src="about.jpg"></tr> <tr><image src="blog.jpg"></tr></td>
<tr><image src="issues.jpg"></tr> <tr><image src="mybooks.jpg"></tr></td>
</table>
<div class="hiportal" id="hiportal">
<p>
Welcome to the HIportal
UPDATES<br/><br/>
<u>(4/1/10) - Site Launched</u>:<br/>
This is not an April Fools' joke... well maybe somewhat. Because of my lofty ambition to write this website from scratch,
the pages are currently, not the prettiest. Feedback from viewers will definitely be crucial throughout the development
of this page; though it may be better to hold on to the comments until I get the site up to more functional scale (forseeing
how radically things will change during that process). I think I really just wanted the gratification of getting a site up
to public view (wooOOOo!). Right now, the main features really are a draft of the 'about' page and a largely incomplete
chapter 2 of my physics e-book for high school students. Keep checking back for updates, of which there will be many these upcoming
few weeks...<br/>
Goals in sight: Keep this page alive, Upload fuller versions of ebook chapters 2-3
Long-term Technical: Implement a wiki engine to allow additions of news events by registered users
</p>
</div>
Trouble reading this site? Download the latest version of your preferred browser below...
</body>
</html>
这是CSS：
body {background-color:#606060; color:white}
h1 {background-color:#606060; color:white; background-image:url(hicon_beta.jpg); font-size:100%; text-align:center; font-weight:700; text-decoration:none; font-family:Verdana}
h2 {color:#0000A0; background-color:#FFCCCC; font-size:200%; text-align:center; font-style:italic; font-weight:700; font-family: MS Gothic}
h3 {color:black; background-color:#DDDDDD}
div.title {position:absolute; left:0%; width:100%; text-align:center; background-image:url(hicon_beta.jpg); cursor:help}
span.title {color:maroon; font-size:300%; font-weight:900; font-family:papyrus; text-align:center}
div.about {position:absolute; top:31.2%; bottom:34%; left:5%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.blog {position:absolute; top:31.2%; bottom:34%; left:21%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.research {position:absolute; top:31.2%; bottom:34%; left:37%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.hypercourse {position:absolute; top:31.2%; bottom:34%; left:53%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.links {position:absolute; top:31.2%; bottom:34%; left:69%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.contact {position:absolute; top:31.2%; bottom:34%; left:85%; width:10%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.hiportal {position:absolute; top:35%; bottom:100%; left:10%; width:80%; background-color:silver}
p {background-color:silver; color:#220088; font-weight:500; text-align:left}
a:link {text-decoration:none; color:red}
a:visited {text-decoration:none; color:red}
a:hover {background-color:#FFFFDD; text-decoration:none}
dropdown.menu {background-color:#606060; color:#FFFFDD}
对于凌乱的代码感到抱歉。如果有人能够阐明这里可能存在的问题，那将是非常棒的。谢谢！
答案 0 :(得分：3)
我假设这是您的网站：http://web.pdx.edu/~jstraus/
当你说你从几本旧书和W3School那里获得HTML和CSS的所有知识时，你似乎是对的（请不要去那里学习HTML + CSS。网站本身就是不良做法的集合，并没有这样做。
首先，请从一个好的和最新的来源学习HTML和CSS。 Web Standards Curriculum是一个很好的起点 - 它非常注重创建有效且符合标准的代码，并介绍了一些设计网站的基础知识。如果您需要参考，请尝试Sitepoint References。 A List Apart也在我们必读的大部分列表中 - 从2001年至2005年的旧文章开始。
事实是，我必须在这里直言不讳，你的网站代码真的不属于这个时代。使用表格进行布局，框架，重复背景和非常糟糕的颜色和字体选择现在不会削减它。如果您想学习HTML和CSS，请点击我上面提到的链接。如果您只想轻松发布自己的想法或其他方式，请考虑安装CMS /博客平台，例如Wordpress。
答案 1 :(得分：2)
即使您似乎对HTML和CSS了解很多，但仍有一些事情需要纠正。其中，您必须添加文档类型。
当我开始学习HTML和CSS时，我发现HTML Dog的教程非常有用。即使您显然不是初学者，我建议您从http://htmldog.com/guides/htmlbeginner/开始了解文档类型和字符编码等。
另外，正如上面已经指出的那样，使用http://validator.w3.org A LOT来确保您的代码有效。这不是万无一失的，但至少是我见过的最简单的HTML验证器。