I’m implementing a CSS3 overlay system as found on this site. My code has been slightly modified to work in Firefox however I am unable to make the box adjust its width to the content in Firefox. The following JSFiddle best represents what I am talking about.
If you run that Fiddle within Chrome/Safari, you’ll notice that the overlay box adjusts its width to fit the contents just fine, in Firefox however, a horizontal scrollbar appears.
To me it seems like the display: -moz-box property on div.wrap is causing the issue as if I remove it from the css, the content fits properly (although then I loose the vertical centering). Can someone please advise me what I am doing wrong or how to fix this within Firefox?
I just played around with it and I managed to make it work on all browsers by removing the padding from the overlay_content div and adding a margin to the showme div.