Absolute Positioning. Status Bar.

Discussion in 'CSS' started by Kestal, Jan 23, 2009.

  1. #1
    I thought I had fixed the problem from before but it looks like it is back. I have the following bit which I need help with. I put everything in styles so it could be seen easier.

    <div>
    	<div id="text" style="width: 140px; position: absolute; z-index: 2; height: 11px;"><center>1</center></div>
    	<div id="bar" style="width: 70px; position: absolute; z-index: 1; height: 11px; background-color: #932849;"><span style="visibility:hidden;">hidden layer</span>
    	</div>
    	<div id="border" style="border: 1px solid #544343; width: 140px; height: 11px;"></div>
    </div>
    Code (markup):
    I am trying to make a very simple (or so I thought) Status bar with text overlapping not only the border (which is there at all times) and a bar, which fills up based on a value from a database. (right now its at 70px, for showing purposes).

    My problem is, although all have the height of 11, is that "bar" seems to be 1 pixel higher than everything else. Can someone, by any chance, tell me how to fix that?

    or if anything, what I am doing wrong?
     
    Kestal, Jan 23, 2009 IP
  2. eric.r

    eric.r Peon

    Messages:
    124
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can you post a link? I am having difficulty imagining your problem. If you say that it is one pixel higher, it could be because of the 1px border. Not sure without seeing an example. Also which browser(s) do the errors occur for you? Also make sure that your code is valid and that your not in quirks mode.

    ~eric
     
    eric.r, Jan 24, 2009 IP
  3. Kestal

    Kestal Peon

    Messages:
    714
    Likes Received:
    22
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Sure. I set the example up at: Link

    That page is validated, and the error occurs on all browsers that I have tested. FF2, FF3, IE7, IE8, chrome, and Opera.
     
    Kestal, Jan 24, 2009 IP
  4. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    This seems to fix it:
    <div id="border" style="border: 1px solid #544343; width: 140px; height: 10px;"></div>

    The border adds another px to the height. So, the "11px" that you had plus the 1 oboviously equals 12. Changing the height to 10 worked. (At least, if I understood you right! : )

    Let us know.
     
    katendarcy, Jan 24, 2009 IP
  5. Kestal

    Kestal Peon

    Messages:
    714
    Likes Received:
    22
    Best Answers:
    0
    Trophy Points:
    0
    #5
    just tried that and updated my test page. the 2nd one looks closer, but the bar shows 1px more. I had this problem originally.. when I change the bar height to 10px, there is another gap at the bottom again. I need the border to have a different colour than the background..

    Link back to test page
     
    Kestal, Jan 24, 2009 IP
  6. Kestal

    Kestal Peon

    Messages:
    714
    Likes Received:
    22
    Best Answers:
    0
    Trophy Points:
    0
    #6
    The status bar problem is fixed, BUT the text now appears too low. I wrapped in a span.. should I try something else? any ideas on how to fix this properly?

    Tinkered, and I think its fixed.
     
    Kestal, Jan 24, 2009 IP
  7. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Sorry, I didn't notice that. Well, I'm not sure this is better, but it's a little cleaner:

    <div style="width:140px;height:12px;border: 1px solid #544343;position:relative;">
    <div id="bar" style="width: 30px; position: absolute; z-index: 1; height: 12px;background-color: #932849;">
    <div id="text" style="width: 140px; position: absolute; z-index: 2; height: 12px;bottom:1px;text-align:center;">1</div>
    </div><!-- end bar -->
    </div>

    (Just saw your note. Maybe you fixed it already?)
     
    katendarcy, Jan 24, 2009 IP
  8. Kestal

    Kestal Peon

    Messages:
    714
    Likes Received:
    22
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I thought wrong... It works in FF2, FF3, and chrome, but it does not work in IE7+ (If I took out the margin, it would work completely fine.. but then FF2, FF3, and chrome would be off by one pixel.)

    Also, a strange problem.. after 110px of the image width, it shifts up a pixel (like seen with the second one) (in firefox)
     
    Kestal, Jan 24, 2009 IP
  9. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Hmmm... So you tried the code from my last post? I checked it in FF3, IE7, Chrome, and Safari (for Windows), and it seemed to work. Let me know. : )
     
    katendarcy, Jan 24, 2009 IP
  10. Kestal

    Kestal Peon

    Messages:
    714
    Likes Received:
    22
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I updated it again! It now seems to work properly.

    Thanks for the help :)
     
    Kestal, Jan 24, 2009 IP
  11. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #11
    No problem. Take care. : )
     
    katendarcy, Jan 24, 2009 IP