Hi guys, my new website
http://www.island.hawaii.edu/FinAid/
As far as I know, works great in IE, and I heard it looks Ok in Safari, but in Firefox, some of the elements, most importantly the navigation, is all over the place, its in CSS and I cant figure out why!
I haven’t looked at the CSS, but try doing some clears on the nav ULs and LIs.
I didn’t check out all your code, but watch your HTML code… you have:
<li><a href="stepfour.htm">Step Four </a></li>
<h1>In depth: Costs & Funding </h1>
<li><a href="deadline.htm">Deadlines</a></li>
You want to properly use the HTML tags as there are intended. This means cloasing the UL before using the header tags (h1 - h6) in your lists there.
The other option (but not a good one - see below) would be to make a class and add it to the LI tag and style it with CSS.
<li><a href="stepfour.htm">Step Four </a></li>
<li class="fakeh1">In depth: Costs & Funding </li>
<li><a href="deadline.htm">Deadlines</a></li>
Then style the “fakeh1” class in your CSS to look like the H1 tag. Or course it would just make more sense to close the list, use the heading tags and then start a new list. It’s better for search engine rank (you just need to use them correctly).
It seems you looked at least some of his code… more than I do. 
Yeah, i’ve fixed that… but it dosent change my menu. Its strange; only some of the navigation is screwed up, and I can’t tell why… some are ok, some not, it almost seems random.
I saved the HTML from your link in the first post, and then the two CSS files (but I didn’t need the CSS files in the end).
Your code:
<div id="sidenav">
<h3>ABC's: To
Financial Aid </h3>
<ul>
<li><a href="requirements.htm" class="addon2">Eligibility Requirements </a></li>
<li><a href="stepone.htm">Step One </a></li>
<li><a href="steptwo.htm">Step Two </a></li>
<li><a href="stepthree.htm">Step Three</a></li>
<li><a href="stepfour.htm">Step Four </a></li>
<h1>In depth: Costs & Funding </h1>
<li><a href="deadline.htm">Deadlines</a></li>
<li><a href="scholarship.htm">Scholarship</a></li>
<li><a href="altloan.htm">Alternative Loans</a></li>
<li><a href="financial_aid_programs.htm">Financial Aid Awards</a></li>
<li><a href="cost.htm">Cost of Attendance </a></li>
<h4>Constraints : On Financial Aid </h4>
<li><a href="sap.htm">Satisfactory Academic Progress</a></li>
<li> <a href="withdraw.htm">Implications of Withdrawls</a></li>
<li><a href="community_college_classes.htm">Community College Classes</a></li>
<li> <a href="overawards.htm">Overawards</a></li>
<h5>Forms and Documents</h5>
<li> <a href="formsdocuments.htm">Forms and Documents</a></li>
<li><a href="level.htm">Classification</a></li>
<h2>Additional Info</h2>
<li> <a href="glossary.htm">Glossary</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="contact.htm">Contact Info*</a></li>
</ul>
</div>
The changes I made - code with the ul tags properly used:
<div id="sidenav">
<h3>ABC's: To
Financial Aid </h3>
<ul>
<li><a href="requirements.htm" class="addon2">Eligibility Requirements </a></li>
<li><a href="stepone.htm">Step One </a></li>
<li><a href="steptwo.htm">Step Two </a></li>
<li><a href="stepthree.htm">Step Three</a></li>
<li><a href="stepfour.htm">Step Four </a></li>
</ul>
<h1>In depth: Costs & Funding </h1>
<ul>
<li><a href="deadline.htm">Deadlines</a></li>
<li><a href="scholarship.htm">Scholarship</a></li>
<li><a href="altloan.htm">Alternative Loans</a></li>
<li><a href="financial_aid_programs.htm">Financial Aid Awards</a></li>
<li><a href="cost.htm">Cost of Attendance </a></li>
</ul>
<h4>Constraints : On Financial Aid </h4>
<ul>
<li><a href="sap.htm">Satisfactory Academic Progress</a></li>
<li> <a href="withdraw.htm">Implications of Withdrawls</a></li>
<li><a href="community_college_classes.htm">Community College Classes</a></li>
<li> <a href="overawards.htm">Overawards</a></li>
</ul>
<h5>Forms and Documents</h5>
<ul>
<li> <a href="formsdocuments.htm">Forms and Documents</a></li>
<li><a href="level.htm">Classification</a></li>
</ul>
<h2>Additional Info</h2>
<ul>
<li> <a href="glossary.htm">Glossary</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="contact.htm">Contact Info*</a></li>
</ul>
</div>
Checking it on IE and Firefox on my computer, both looked the same…
Thanks man, menu works great!!
But let me ask you, does the top (by the banner) do they look diffrent? (Im uploading a new banner)
In IE… it looks the way I assume you want it to look. In Firefox the banner (the green leaves - right?) sneaks its way down too far.
If you’re floating anything (float: left; float: right; etc), you’ll need to use a clear: both; after the float.
For example:
.left{ float: left; width: 100px; background: #f00; }
.right{ float: right; width: 100px; background: #00f; }
.clear{ clear: both; width: 200px; background: #0f0; }
<div class="left">Left side</div>
<div class="right">Right side</div>
<div class="clear">All clear</div>
So the left and right will be next to each other, but the clear will be below them. And life will be good. 
That fixed some of the smaller issues, but the biggest thing is my main banner just coming down on top of my other things, and this dosent seem to help. Any Ideas?
(btw; thanks alot for your help so far, you’ve really cleared some things up)
- Make sure your code is well formed…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/2cong-acce-maintmpl.dwt" codeOutsideHTMLIsLocked="false" -->
<script type="text/javascript" src="dtree.js"></script>
<link href="dtree.css" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<style type="text/css">
<!--
.style3 {color: #35B3D1}
-->
</style>
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Financial Aid | University of Hawai'i at Manoa</title>
<!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head><div id="globe">
<body><div id="background">
<div id="top"> <img name="proto3" src="Random%20Graphics/oldlooking/proto2.jpg" width="782" height="50" border="0" alt=""> </div>
</div><div id="topnav2">School code: 001610</div>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/2cong-acce-maintmpl.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<script type="text/javascript" src="dtree.js"></script>
<link href="dtree.css" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<style type="text/css">
<!--
.style3 {color: #35B3D1}
-->
</style>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Financial Aid | University of Hawai'i at Manoa</title>
<!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="globe">
<div id="background">
<div id="top"> <img name="proto3" src="Random%20Graphics/oldlooking/proto2.jpg" width="782" height="50" border="0" alt=""> </div>
</div><div id="topnav2">School code: 001610</div>
</div>
Changes: Script, links to stylesheets and internal style sheet all moved inside the head tags. Also I’m assuming that the div with the id=“globe” is needed. It should not be before the body tag…
Will this solve the problem? No. Why did I mention it? You should always work with properly formatted code to make trouble shooting the other issues a lot easier on yourself. With the code you have browser will do strange things. Because it looks okay on one doesn’t mean the code is good or it will look the same on a different browser.
As for the problem at hand… either I’m not seeing it or I’m just too tired tonight but I can’t even locate the image of the green leaves. Not in the HTML or the CSS. I’m probably just overlooking it.
If you can, zip up the HTML, CSS and images and post them (or send me a PM and I’ll give you my email address to email them to me). It’s kind of a pain to have to locate all the images and save them all along with the HTML and CSS to reconstruct the site.
