www.webdeveloper.com
Results 1 to 7 of 7

Thread: Vertical positioning works Mac FF, Safari; not IE6

  1. #1
    Join Date
    Dec 2002
    Posts
    150

    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>
    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; }
    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?

  2. #2
    Join Date
    Dec 2002
    Posts
    150
    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.
    Code:
    .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?

    - Bob

  3. #3
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910

  4. #4
    Join Date
    Dec 2002
    Posts
    150
    Huh?

  5. #5
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    You can use CSS Filters to give IE a different value than other browsers.

  6. #6
    Join Date
    Dec 2002
    Posts
    150
    Quote Originally Posted by Kravvitz
    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).

  7. #7
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Using these two CSS Filters in combination is my favorite way to target IE/Win.
    http://www.dithered.com/css_filters/...mment_end.html
    http://www.dithered.com/css_filters/...star_html.html

    Safari and FF still have some bugs, however, they are both better than IE.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles