CODEWITHSUNDEEP
htmlcssfirefoxpositioningbackground-image
Jonathan Straus
Jonathan Straus

Reputation: 337

Positioning Background Images and Firefox

I've been working on coding a personal website from scratch in my free time, and have gotten the layout mostly looking like I wanted. But for the life of me, I cannot figure out why Firefox does not align the 'dropdown menu items' ('about', 'blog', etc.) BELOW the background image into the dark grey area like it does in Safari.

HTML Page (dropdown menu javascript not included):

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

This is the 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}

Sorry about the messy code. If anyone can shed light on what the problem might be here though, that would be awesome. Thanks!

Upvotes: 0

Views: 561

Answers (2)

Yi Jiang
Yi Jiang

Reputation: 50095

I'm assuming that this is your site: http://web.pdx.edu/~jstraus/

It seems that you're right when you say that you've got all your knowledge of HTML and CSS from a few old books and the W3School (please do not go there to learn HTML + CSS. The site itself is a collection of bad practices and don't do's).

First of all, please learn HTML and CSS from a good and up to date source. The Web Standards Curriculum is a great place to start - it places a heavy emphasis on creating valid and standard compliant code, and also introduces some basics on designing websites. If you need references, try Sitepoint References. A List Apart is also on most of our must-read list - try starting with older articles, from 2001- 2005.

The fact is, and I have to be blunt here, you website's code really doesn't belong in this era. Using tables for layout, frames, repeating backgrounds and really bad color and font choices just won't cut it now. If you want to learn HTML and CSS, hit the links I've mentioned above. If you just want an easy way to publish your thoughts or otherwise, consider installing a CMS/blogging platform like Wordpress instead.

Upvotes: 3

matsolof
matsolof

Reputation: 2715

Even though you seem to know a lot about HTML and CSS, there are things you have to correct. Among others, you have to add a document type.

I found the tutorials at HTML Dog very useful when I started learning HTML and CSS. Even though you're clearly not a beginner, I suggest you start at http://htmldog.com/guides/htmlbeginner/ to learn about, among others, document type and character encoding.

Also, as is already pointed out above, use http://validator.w3.org A LOT to make sure your code is valid. It's not fool-proof but at least the most fool-proof HTML validator I have seen.

Upvotes: 2

Related Questions