Recent answers to My website appears broken when viewing on Firefox onlyhttps://support.mozilla.org/si/questions/12228552018-06-22T09:23:10-07:00I notice that dress has a few holes in it. But then, I don't know anything about fashion.
Perhaps th2018-06-22T09:23:10-07:00jscher2000https://support.mozilla.org/si/questions/1222855#answer-1125547<p>I notice that dress has a few holes in it. But then, I don't know anything about fashion.
</p><p>Perhaps there is a different place in the page where the style rules are applied in an unexpected order. This is very hard to diagnose on mobile, so I was using the Page Inspector in Firefox on desktop, and turning different style rules on and off for different areas of the page. You could give it a spin and see if you can discover which rule in which file is causing the black background.
</p><p><a href="https://developer.mozilla.org/docs/Tools/Page_Inspector" rel="nofollow">https://developer.mozilla.org/docs/Tools/Page_Inspector</a>
</p>I found it! and applied the changes and now it's almost perfect. The only thing missing is that the 2018-06-22T09:08:03-07:00LLenshttps://support.mozilla.org/si/questions/1222855#answer-1125537<p>I found it! and applied the changes and now it's almost perfect. The only thing missing is that the background is black with a grey gradient on it..
</p><p>Thank you a million times!
</p>These are the two I have in mind, but their location on the back end may vary:
(long one) http://w2018-06-22T08:35:25-07:00jscher2000https://support.mozilla.org/si/questions/1222855#answer-1125520<p>These are the two I have in mind, but their location on the back end may vary:
</p>
<ul><li> (long one) <a href="http://www.lulielens.com/wp-content/themes/mystiqueBACKUP/style.css" rel="nofollow">http://www.lulielens.com/wp-content/themes/mystiqueBACKUP/style.css</a>
</li><li> (short one) <a href="http://www.lulielens.com/?mystique=css" rel="nofollow">http://www.lulielens.com/?mystique=css</a>
</li></ul>Just to clarify, the second style sheet is the "mystique/style.css" ? The file i am looking at 2018-06-22T07:52:10-07:00LLenshttps://support.mozilla.org/si/questions/1222855#answer-1125514<p>Just to clarify, the second style sheet is the "mystique/style.css"&nbsp;? The file i am looking at has 1577 lines. Trying to find the files to edit them like you instructed.
</p><p>Thanks again!
</p>I see the Logo is still not centered. So, I think Firefox might be applying the two style sheets in 2018-06-22T07:42:57-07:00jscher2000https://support.mozilla.org/si/questions/1222855#answer-1125512<p>I see the Logo is still not centered. So, I think Firefox might be applying the two style sheets in the wrong order.
</p><p>As a temporary quick fix, what do you think about copy/pasting the 30 rules from the second style sheet (98 lines) to the end of the first one (979 lines)? It would be a little redundant to duplicate those rules, but should work around any issue with order of parsing.
</p>what you wrote works somewhat!
I have uploaded a screenshot of what the page looks like now.
how do 2018-06-22T07:32:16-07:00LLenshttps://support.mozilla.org/si/questions/1222855#answer-1125509<p>what you wrote works somewhat!
I have uploaded a screenshot of what the page looks like now.
</p><p>how do you suggest I proceed?
</p><p>Thanks so much for helping!
</p>Hmm. In your page, you have:
<style type="text/css">
@import "http://www.lulielens.com/w2018-06-22T05:50:52-07:00jscher2000https://support.mozilla.org/si/questions/1222855#answer-1125482<p>Hmm. In your page, you have:
</p><p><code>&lt;style type="text/css"&gt;
&nbsp;@import "<a href="http://www.lulielens.com/wp-content/themes/mystiqueBACKUP/style.css" rel="nofollow">http://www.lulielens.com/wp-content/themes/mystiqueBACKUP/style.css</a>";
&nbsp;@import "<a href="http://www.lulielens.com/?mystique=css" rel="nofollow">http://www.lulielens.com/?mystique=css</a>";
&lt;/style&gt;</code>
</p><p>The first style sheet sets that unusual background image:
</p><p><code>#page{background:transparent url(images/header.jpg) no-repeat center top;}</code>
</p><p>Then the next one overrides it:
</p><p><code>#page{background-image:url(<a href="http://www.lulielens.com/wp-content/uploads/2014/06/header-white.jpg);" rel="nofollow">http://www.lulielens.com/wp-content/uploads/2014/06/header-white.jpg);</a>}</code>
</p><p>Something appears to be going wrong on FxA/RequestDesktop with either loading or applying the second style sheet, or the order in which they are applied.
</p><p>As a test, could you add&nbsp;!important to the second rule to see whether it overrides the first one:
</p><p><code>#page{background-image:url(<a href="http://www.lulielens.com/wp-content/uploads/2014/06/header-white.jpg" rel="nofollow">http://www.lulielens.com/wp-content/uploads/2014/06/header-white.jpg</a>) <strong>!important</strong>;}</code>
</p><p>If that makes no difference, Firefox may not be loading/applying the second style sheet.
</p>
<hr>
<p>This theme appears not to have had any updates for 6 years, so it could possibly use some assumptions that are no longer applicable. But I don't enjoy reading PHP so I must leave that question to others.
</p>here is a picture of how it appears using desktop mode in any other browser
2018-06-22T04:41:25-07:00LLenshttps://support.mozilla.org/si/questions/1222855#answer-1125467<p>here is a picture of how it appears using desktop mode in any other browser
</p>here are some screenshots of the broken theme.
the website is http://www.lulielens.com
2018-06-22T04:39:22-07:00LLenshttps://support.mozilla.org/si/questions/1222855#answer-1125465<p>here are some screenshots of the broken theme.
</p><p>the website is <a href="http://www.lulielens.com" rel="nofollow">http://www.lulielens.com</a>
</p>Was it fine in Firefox 60 -- new issue in Firefox Beta?
Even if Firefox for Android identifies itsel2018-06-22T02:12:11-07:00jscher2000https://support.mozilla.org/si/questions/1222855#answer-1125405<p>Was it fine in Firefox 60 -- new issue in Firefox Beta?
</p><p>Even if Firefox for Android identifies itself as a desktop version of Firefox (Linux instead of Android), the other parameters sites use to adapt the display remain in place, especially screen/window dimensions. Perhaps there is a gap in the theme's style rules where bad things happen??
</p>