While working on some CSS styling, I encountered an issue with the ID "home-ad" not displaying properly in Firefox. The box model was showing a content size of 0x-40 (with 40 being the padding value). Interestingly, when I changed the ID name, the code worked perfectly without any problems.
I tested it in Chrome as well, and found that the home-ad ID displayed correctly.
Although I have decided to use a different ID moving forward, I am intrigued by why this display issue occurred in Firefox.
Check out the JSFiddle link for a visual comparison of the results in both Firefox and Chrome.
HTML:
<div id="home-ad">
<p class="text-center">First Div</p>
</div>
<div id="home-advert">
<p class="text-center">Second Div</p>
</div>
CSS:
#home-ad {
background-color: #fff669;
}
#home-advert {
background-color: #fff669;
}