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="container">
<div class="nav_container">
<div class="nav_bar"><img src=http://www.webdeveloper.com/forum/archive/index.php/"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>
</div>
( additional content divs below the nav bar here)
</div>
And here's the relevant stylesheet stuff:
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; }
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?OK - I fixed it - sort of.
Seems I forgot to specify margin in the stylesheet for my <p> tag. I set it to zero, and now - IF I use top offset - I can get consistent positioning between FF and IE.
.nav_run_time { position: absolute; left: 500px; top: 12px; height: 29px; }
.nav_employee { position: absolute; right: 20px; top: 12px; height: 29px; }
.wht_11_14_0_bold { margin: 0px; color: #ffffff; font-weight: bold; font-size: 11px; line-height: 14px; font-family: Arial, Verdana; }
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?
- BobCSS Filters (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=CssHack">http://css-discuss.incutio.com/?page=CssHack</a><!-- m -->)Huh?You can use CSS Filters to give IE a different value than other browsers.You can use CSS Filters to give IE a different value than other browsers.
OK - I get it. Was there a particular hack in this set your were thinking of?
I'm still confused why setting bottom: 0; or bottom: 1px; doesn't align text to the bottom of a div in Safari & FF (assuming they're better behaved than IE in this respect, which may not be the case).Using these two CSS Filters in combination is my favorite way to target IE/Win.
<!-- m --><a class="postlink" href="http://www.dithered.com/css_filters/css_only/escaped_comment_end.html">http://www.dithered.com/css_filters/css ... t_end.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.dithered.com/css_filters/css_only/star_html.html">http://www.dithered.com/css_filters/css ... _html.html</a><!-- m -->
Safari and FF still have some bugs, however, they are both better than IE.
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="container">
<div class="nav_container">
<div class="nav_bar"><img src=http://www.webdeveloper.com/forum/archive/index.php/"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>
</div>
( additional content divs below the nav bar here)
</div>
And here's the relevant stylesheet stuff:
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; }
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?OK - I fixed it - sort of.
Seems I forgot to specify margin in the stylesheet for my <p> tag. I set it to zero, and now - IF I use top offset - I can get consistent positioning between FF and IE.
.nav_run_time { position: absolute; left: 500px; top: 12px; height: 29px; }
.nav_employee { position: absolute; right: 20px; top: 12px; height: 29px; }
.wht_11_14_0_bold { margin: 0px; color: #ffffff; font-weight: bold; font-size: 11px; line-height: 14px; font-family: Arial, Verdana; }
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?
- BobCSS Filters (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=CssHack">http://css-discuss.incutio.com/?page=CssHack</a><!-- m -->)Huh?You can use CSS Filters to give IE a different value than other browsers.You can use CSS Filters to give IE a different value than other browsers.
OK - I get it. Was there a particular hack in this set your were thinking of?
I'm still confused why setting bottom: 0; or bottom: 1px; doesn't align text to the bottom of a div in Safari & FF (assuming they're better behaved than IE in this respect, which may not be the case).Using these two CSS Filters in combination is my favorite way to target IE/Win.
<!-- m --><a class="postlink" href="http://www.dithered.com/css_filters/css_only/escaped_comment_end.html">http://www.dithered.com/css_filters/css ... t_end.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.dithered.com/css_filters/css_only/star_html.html">http://www.dithered.com/css_filters/css ... _html.html</a><!-- m -->
Safari and FF still have some bugs, however, they are both better than IE.