After setting up a test site for a client to review as part of a proof of concept, I noticed an unexpected white line while checking across different browsers.
(loading correctly in all browsers except FF)
In Firefox, there appears to be a thin ~10px line above the footer. Initially, it seemed like an easy fix, but it turned out to be the background of the body showing through.
I tried some simple solutions such as adding padding-bottom to the parent element or adjusting margins on child elements, but nothing worked. The only viable solution seems to be using a margin-top:-10px on the footer or applying an opposite style to the featured div.
Furthermore, the CSS associated with the .featured div includes only background: #ded1ae, which displays correctly in other browsers, but in Firefox, it changes to background: none repeat scroll 0% 0% rgb(222, 209, 174).
I also observed that all other background colors were altered as well, converting hex colors to RGB format.
While I hope this has a simple resolution and I may just be overlooking something obvious, I am currently puzzled as I have never encountered an issue like this before.
Your assistance would be greatly appreciated!
(I should mention that I am utilizing the Skeleton boilerplate, which I have used numerous times without any problems, so I fail to see how that could be contributing to this particular issue.)
<div class="featured">
<div class="container">
</div>
</div>
.featured { background: #ded1ae; height: 100px; }
.container { position: relative; width: 1200px; margin: 0 auto; padding: 0; }
The above CSS code displays consistently in all browsers except for Firefox, where it renders as
.featured { background: none repeat scroll 0 0 #DED1AE; height: 100px; }