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?
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
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.
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.
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
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.
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?)
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)
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. : )