В свободное время я работал над созданием кода для персонального веб-сайта с нуля, и его макет в основном выглядел так, как я хотел.Но я не могу понять, почему Firefox не выравнивает «элементы выпадающего меню» («about», «blog» и т. Д.) НИЖЕ фонового изображения в темно-серую область, как это происходит в 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}
Извините за грязный код,Если кто-то может пролить свет на то, что проблема может быть здесь, хотя, это было бы здорово.Спасибо!