I've come across a similar issue on this platform, but the solutions provided didn't work for me. The problem I'm facing is with display inconsistencies only upon refreshing the page. Everything looks fine when initially loading the page, but after a refresh, the layout goes haywire.
Unlike the other cases where block level elements inside an anchor tag were causing issues, my problem persists despite not having any anchors in play.
Below is the problematic HTML snippet:
<div class="job" style="background:#a13b3b;">
<div class="jobd" style="background:#802f2f;">
J
</div>
Job Name
</div>
Here's the corresponding CSS:
.job {
height:24px;
line-height:24px;
color:#FFFFFF;
padding-right:4px;
display:block;
float:left;
margin-right:2px;
margin-bottom:2px;
}
.jobd {
display:block;
height:24px;
width:24px;
line-height:24px;
text-align:center;
float:left;
margin-right:4px;
}
The peculiar thing is that everything functions correctly in IE, Firefox, and Chrome until a page refresh occurs in Chrome. Upon inspection, I noticed that the width of the "job" div shrinks from its original 192px down to 164px, pushing the word "name" onto a new line beneath the div. This behavior has me puzzled, and I'm unsure how to fix it.
Additionally, there are multiple instances on the page where similar HTML/CSS setups are used and work flawlessly because they have a fixed width specified.
Your assistance is greatly appreciated.
UPDATE:
In response to some comments and suggestions, I wanted to clarify that this issue isn't isolated to one specific page; it occurs across several pages for different users. Strangely, I can't replicate the problem on other pages, leading me to believe it may be related to conflicting elements. However, even when stripping away all other content except these troublesome divs, the issue remains. On the contrary, if I access the page directly with just these divs present, everything displays correctly.
One more thing to note is that my doctype is XHTML 1.0, and most of the page content, including the problematic section, is dynamically generated using PHP. While I doubt this would impact the issue, could it possibly be a factor?