UPDATE: Issue Resolved Thanks to a helpful comment pointing out the inline style, I was able to fix the problem. It turns out the issue was not with the CSS but with the JavaScript. Sometimes after coding for a long time, you can overlook these things. Nevertheless, I appreciate the assistance.
I am encountering a bug with my CSS. When I disable caching in Firefox, the width of an absolutely positioned container div does not expand to fit the child div. However, when I reload the page (after the image has been cached), it displays correctly. The centering is achieved using JavaScript (which works fine), but it does not center properly when the image is cached because the parent's width (lbCenter) is set to 0.
<div id="lbOverlay" style="background: url("blue.png") repeat scroll 0% 0% transparent; opacity: 0.25;"></div>
<div id="lbCenter" style="display: block; padding: 0px; left: 675px; top: 305px; width: 0px; height: 0px; margin-left: 0px;">
<div class="lbcb"></div>
<div id="lbWrap">
<img src="http://www.emohaircuts.org/wp-content/uploads/2010/08/emo-boy-fashion.jpg">
</div>
</div>
CSS:
#lbOverlay {
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#lbCenter {
overflow: visible;
display: block;
text-align: center;
position: absolute;
/* padding: 20px;*/
z-index: 110111111;
outline: none;
}
/**------*/
#lbCenter{
color:green;
border: 10px solid #CCCCCC;
}
Is there a way to automatically update the parent's width when the content of lbWrap changes? For instance, once the image has fully loaded?