Some challenges with new site

[CarlSeiler]

Reference: Page and css file

Finally started on the new project that I talked about some weeks ago.

Running into a few challenges right off the bat. First, the site they gave me as a "we-want-it-to-look-like-that" example had a menu across the top that was a table. No problem, I thought. Can easily do that with a UL with the LIs inline and floated left. Sure enough the menu looks good on first inspection. What the problem is is that it falls apart when I change screen sizes and browsers. There are five LIs making up the menu. I would think that I could make each one 20% width and they'd all fit snuggly in there. Ah, but what I find is that the "width" specified is only for the item itself, not including the padding and margins, so I have to subtract some for that. But how much? Very frustrating, but I've got it almost OK with 18 percent. Still, on IE, the 5th menu item likes to slip down to the next line. Any tips on this would be appreciated, but I think I'm headed in the right direction on it, and I'm going to try different padding and margin units next (currently em's).

The next issue, and one of the main reasons I'm posting in this stage of the game, is the space on the left-hand side of the menu (DIV class directory). I've attached a PNG of a screen capture. In both FF 1.5x and IE 6x, there's a fixed space to the left of the menu, and even though the list changes size as I change browser size, the gap to the left of the list is fixed. What is causing it to be fixed, and can I make this gap shrink and enlarge as the browser window changes?

Finally (at least for this post), there's a distinct difference in the way that IE and FF display the two columns. I tried to base this off the old example in Lie and Bos. This is currently specified using CSS in the HTML file, but eventually I'll move it to the CSS file. The first column is a width of 50%. The second is also 50% with a margin of 50%. They should fill the parent all the way across. This works pretty nicely in FF. In IE 6.x, it would seem that IE wants to make the first column 50% of the parent, but the second column which should be 50% of the parent is instead 50% of the space available, so it's only 25% of the parent. Grrrr! Question is, how can I specify different widths so as to handle the fact that IE seems to be messing up on the second column?

Carl