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):
<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 </p></div>
<div class="nav_employee"><p class="wht_11_14_0_bold">John Doe</p></div>
( additional content divs below the nav bar here)
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.
But bottom positioning doesn't work. Ideally I'd want to set this to bottom: 0px or something similar. But in Safari/FF, the text sits up against the top of the div. Only if I enter in a negative bottom setting - bottom: -15px; - does it align at the bottom. And then it disappears completely from IE.
I guess I should be happy I got it to work at all. But shouldn't this bottom positioning thing work?