Divs offset after page load

[hallsofvallhalla]

I have some divs setup that hold my HP bar and psionics bar. If I follow a link on the page that leads back to the same page like backpack then runs the back pack code but everything else remains the same the divs get shoved down. If I hit refresh they go back. I can be on the same page and follow a link to the same page and they are offset. As soon as I hit refresh loading the same page they go back to normal. Weirdest thing ever.






css

Code: Select all

#hpfront{   position:absolute;
			width: 100px;
            height: 15px;
			z-index:3;
			
           	
}
#hpback{ position:relative;
			width: 100px;
            height: 15px;
			z-index:2;
			
           	
}
#psifront{   position:absolute;
			width: 100px;
            height: 15px;
			z-index:3;
			
           	
}
#psiback{ position:relative;
			width: 100px;
            height: 15px;
			z-index:2;
			
           	
}
#expfront{   position:absolute;
			width: 100px;
            height: 15px;
			z-index:3;
			
           	
}
#expback{ position:relative;
			width: 100px;
            height: 15px;
			z-index:2;
			
           	
}

[Ark]

Try putting them into a table with 3 rows. Maybe that way they don't offset.

[hallsofvallhalla]

same exact thing! now that is weird.

[OldRod]

I seem to recall having that problem a long time ago... it was some kind of alignment problem. Like there's an errant space or paragraph tag in there somewhere and the div tag is so tight on space that it's making the bar wrap to a new line when it shouldn't. Something like that, if I remember right, was what my problem was. Not sure if that helps or not. I could probably be more vague if you want

[Chris]

Can we see the HTML? And what browser are you using. I'm guessing this is in a table?

What you could do is float the background div next to the foreground div.

I find floating one to the right rather both left. And by putting the one on the right before the on on the left, it's pretty much browser friendly even in the days of IE 6.

Code: Select all

<div style="width: 100px; height: 15px;">
    <div style="width: 60%; height: 15px; float: right; background: #666;"></div>
    <div style="width: 40%; height: 15px; float: left; background: #F00;"></div>
</div>

The div to the right, set the background position right.
And for the one on the left put the background position left.

No overlapping required