The DIV Blues - IE vs Firefox

I am having some issues with aligning things on some of my pages. I actually have a site up to show you what I mean this time too!

http://www.matrixti.com/matrixtest/index.html

My issues in Internet Explorer are:
1. There are spaces in between each button. In FF, the buttons are right against each other.
2. There is a bigger black space at the top between the browser and the title bar than in FF.
3. As you can see, the navlist extends below the specified height. However, in FF it is displays perfectly.

My issues in Firefox are:
1. (my main issue) Under the General button, the Seating Chart link and the Internal Job Postings link...the data does not display correctly. Everything is supposed to be horizontally next to each other. However, it is displayed correctly in IE. I have my DIVs floated next to each other.
2. Under the Safety & Travel tips button-->Safety Information link....again the data is not displayed correctly. The right DIV containing the data appears all the way to the right of the page. Again, in IE, it is displayed correctly.
3. As in a previous post today....the wheelmouse does not work with the scrollbars with the <script> { overflow: scroll; } </script>. In IE it does.


This is in fact my first website. So I am still a little "iffy" you might say on how to propery align things using DIVs. I've been working on this site for a while, and have read A LOT on CSS in the past few weeks, and I think I understand them. So I am stumped on why things are appearing funky. I'd appreciate any feedback. Thanks! My .css file is uploaded with this.

...i realize some of the links don't work....that's on purpose. :) I also have to change the navlist to classes instead of id's.

I'll try to tackle FF first since its what I use. When you are floating multiple divs you need to declare widths or their widths are set to be 100% of their container. If you float just one div and give it a set width the other div should move into place.

div.general {
float: left;
border: 0px solid black;
width:150px;
}

div.rightgen {
padding-left: 20px;
border-left: 1px solid #293A53;
margin-left: 150px;
}

Try the above. May need to make some adjustments.
Again same concept as the floated divs together. You need to specify a width to the div you float.
div.safety1 {
float: left;
width:241px;
}

div.safety2 {
margin-left:241px;
}
And your last issue, the wheelmouse scroll doesn't work anyways in any div that has scrollbars whether you set it to overflow:auto; overflow:scroll; overflow:scroll; this is a Firefox issue. Since its not a microsoft product it doesn't want to work with the scrollwheel the way IE does.
Now lets tackle IE.
1. Try adding this to your CSS file
/* Fix IE. Hide from IE Mac \*/
* html ul#navlist li { height:1%; }
/* End */
This part of your page
<!--[if IE 5]>
<style>
#navlist a {
height: 1em;
float: left;
clear: both;
width: 100%;
}
</style>
<![endif]-->
<!--[if IE 6]>
<style>
#navlist a {height: 1em;}
</style>
<![endif]-->
Might also be causing that extra height. Get rid of that and use the method I told you.
2. It doesn't appear that you have set the margins and padding to 0 in your page. IE by default puts margins on the page.
html,body {
margin:0;
padding:0;
}
3. IE usually expands to fit its content. Try not specifying a height. It could be that extra spacing between the lis causing this problem.

That worked...for the most part. The DIVs work fine now. I didn't understand the concept completely but now I do.

The only thing I am still having trouble with is my navlist.

I removed from li.headerlinks {height: 22px;}
That reduced the space between the li's a lot in IE, but not totally. It reduced the space around the li.headerlinks (the white text non-links in the list) more than the other li's.

I added:
/* Fix IE. Hide IE from Mac */
* html ul#navlist li { height: 1%; }
/* end */

And when I take out <!--[IF IE5]>....<!--[IF IE6]>....the spaces between the li's are ridiculously spaced apart from each other. So I left these in there.

I also changed li.headerlinks from padding: 6px 0px 0px 22px to 6px 0px 5px 22px to align the text correctly again. This caused FF to increase the space between the li's a little bit.

The link is updated with the things I typed in and removed so you can see what I mean. I really appreciate the help. Thanks.

Okay try this for your conditional comments instead.
<!--[if IE 5]>
<style>
#navlist li {height:1%;}
#navlist a {
height: 1%;
float: left;
clear: both;
width: 100%;
padding:4px 3px;
}
</style>
<![endif]-->
<!--[if IE 6]>
<style>
#navlist li {height:1%;}
#navlist a {height: 1%;padding:4px 3px;
</style>
<![endif]-->
What you could do is use
* html #someelement {padding:10px}
Using the above will only give the element specified padding to IE because its only browser that understands that.

That did it. I edited my conditional comments to that and it worked perfectly. Again, I really appreciate the help. Thanks. :)

I've not been using CSS for long, but I have realised something: IE is a b*tch.
I started developing around Opera since it's my default and simply the ebst. I opened it in FF, no problem, opened in IE and everything goes wrong.
Now I code the pages for IE, the other browsers usually accept.