Vertical positioning works Mac FF, Safari; not IE6

I’m new to CSS as a positioning tool – trying to transition from using tables. I have a nav bar at the top of my site. The left portion is a string of gifs (navigation mouseovers). Next to these are two bits of live text that I’m trying to align relative to the bottom of the div that holds all three.

Here’s the page code (this is a template: the parts in HTML comments are placeholders populated via PHP, and are all converted to proper html/css on output):

[CODE]<div class=”container”>
<div class=”nav_container”>
<div class=”nav_bar”><img src=”images/rmb_logo.gif” width=”115″ height=”29″ alt=”” /><!–NAV_BUTTONS–></div>
<div class=”nav_run_time”><p class=”wht_11_14_0_bold”>Time to run: 0.48&nbsp;&nbsp;&nbsp;</p></div>
<div class=”nav_employee”><p class=”wht_11_14_0_bold”>John&nbsp;Doe</p></div>
</div>
( additional content divs below the nav bar here)
</div>[/CODE]

And here’s the relevant stylesheet stuff:

[CODE]body { background: #000000; margin: 0; font-weight: normal; font-size: 12px; line-height: 16px; font-family: Arial, Verdana; text-align: left; }
.container {
position: relative;
margin: 0 auto;
width: 800px;
height: auto;
}

.nav_container { position: relative; }
.nav_bar { }
.nav_run_time { position: absolute; left: 500px; bottom: 0px; height: 29px; }
.nav_employee { position: absolute; right: 20px; bottom: 0px; height: 29px; }
.wht_11_14_0_bold { color: #ffffff; font-weight: bold; font-size: 11px; line-height: 14px; font-family: Arial, Verdana; }[/CODE]

Everything looks great in Safari, and FF Mac AND PC. In IE 6 PC the time to run and employee name do not appear (I suspect they are behind the lower page content somewhere).

If instead of specifying “bottom: 0px” I specify “top: 0px”, everything IS visible in all browsers. However, the amount of offset is different between IE 6 and all the other browsers: the type sits higher in IE 6.

How should I approach this?

Also in #CSS _↴