Why does FoxFire refuse to read a .css file on one page of my website
I have built a web site [fortseldenarmory.com]. I am using PHP. I have one CSS file and all of the pages use it. One page recognizes the CSS file but refuses to read it. When using the programming tool bar consul and going to the style editor the page displays the CSS file. It says that I have 0 rules. If I delete one character in the CSS file and replace it with the same character the CSS file is read. I have not changed the content of the CSS file yet now it works. As I tab back through my site and come back to this page it refuses to read it again.
All of the other pages on the site have no problem with the same CSS file.
I have cleared all of the internet temp files, settings cookies an so on, restarted and I still have the same problem.
on my server I have deleted the CSS file an uploaded it again I have deleted and re-uploaded the problem page. I have even renamed the page and still the problem persists.
All the other web browsers I have to test with have no problem with the page.
I even uninstalled Fire Fox, shut down my computer, cleared my internet files and reinstalled Fire Fox and the problem still exists.
At this point the page contains no PHP code
Here is the Code:
<!-- ****************************************************** --> <!-- classic-J.html --> <!-- Holster Classic "J" page for www.FortSeldenArmory.com --> <!-- Programmer Jay Jay --> <!-- Last update 07-26-2014 --> <!-- ****************************************************** --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <HEAD> <TITLE> Fort Selden Armory * Gun Holsters </TITLE> <LINK REL=stylesheet Type="text/css" Href="CSS/FortSeldenArmory.css"> <SCRIPT Type="text/javascript"> var ScreenWidth; var H1TextHeight; var H4TextHeight; var MainMargin; var MainMinWidth; var HeaderImageHeight; var MenuBarHeight; var MenuButtonHeight; var MenuButtonWidth; var SideButtonHeight; var SideButtonWidth; ScreenWidth = screen.availWidth; H1TextHeight = Math.round((ScreenWidth/85)+24); H4TextHeight = Math.round((ScreenWidth * .005) + 7); MainMargin = Math.round(ScreenWidth/15); MainMinWidth = Math.round((ScreenWidth * .22)+700); HeaderImageHeight = Math.round((ScreenWidth * .025)+60); MenuBarHeight = Math.round((ScreenWidth * .008) + 19); MenuButtonHeight = Math.round((MenuBarHeight * .9)-6); MenuButtonWidth = Math.round((ScreenWidth * .065) + 80); SideButtonHeight = MenuButtonHeight; SideButtonWidth = MenuButtonWidth -3; document.write(" <STYLE>"); document.write(" H1\{font-size: "+H1TextHeight+"px;\}\n"); document.write(" H4\{font-size: "+H4TextHeight+"px;\}\n"); document.write(" div#main\{margin-left: "+MainMargin+"px;\}\n"); document.write(" div#main\{margin-right: "+MainMargin+"px;\}\n"); document.write(" div#main\{min-width: "+MainMinWidth+"px;\}\n"); document.write(" img#Header\{height: "+HeaderImageHeight+"px;\}\n"); document.write(" div#menubar\{height: "+MenuBarHeight+"px;\}\n"); document.write(" div.menuButtons\{height: "+MenuButtonHeight+"px;\}\n"); document.write(" div.menuButtons\{width: "+MenuButtonWidth+"px;\}\n"); document.write(" div.sideButton\{height: "+SideButtonHeight+"px;\}\n"); document.write(" div.sideButton\{width: "+SideButtonWidth+"px;\}\n"); document.write(" div.sideButtonPlaceHolder\{height: "+SideButtonHeight+"px;\}\n"); document.write(" div.sideButtonPlaceHolder\{width: "+SideButtonWidth+"px;\}\n"); document.write(" div.backToButton\{height: "+SideButtonHeight+"px;\}\n"); document.write(" div.backToButton\{width: "+SideButtonWidth+"px;\}\n"); document.write(" <\/STYLE>"); </SCRIPT> </HEAD> <BODY> <DIV ID='main'> <!-- **************** --> <!-- * Main Banner * --> <!-- **************** --> <DIV ID='header'> <TABLE align='center' cellpadding='5'> <TR><TD> <IMG src='images/FortSelden.jpg' border='2' id='Header'> </TD><TD> <IMG src='images/Logo.jpg' id='Header'> </TD></TR> </TABLE> </DIV> <H1> Gun Holsters - Classic "J" </H1> <!-- ******** --> <!-- * Menu * --> <!-- ******** --> <DIV ID='menubar'> <TABLE Border='0' cellpadding='0'> <TR><TD> <DIV class='menuButtons' onclick="window.location='index.php'";> <H4> Home </H4> </DIV> </TD><TD> <DIV class='menuButtons' onclick="window.location='speedLoaders.php'";> <H4> Speed Loader Pouches </H4> </DIV> </TD><TD> <DIV class='menuButtons' onclick="window.location='magazines.html'";> <H4> Magazine Pouches </H4> </DIV> </TD><TD> <DIV class='menuButtons' onclick="window.location='others.html'";> <H4> Other Products </H4> </DIV> </TD><TD> <DIV class='menuButtons' onclick="window.location='underConstruction.php'";> <H4> About Us </H4> </DIV> </TD></TR> </TABLE> </DIV> <!-- ************* --> <!-- * Main Body * --> <!-- ************* --> <TABLE Border='0' width='100%' cellpadding='0'> <TR><TD width='25%' valign='top'> <DIV class='sideButtonPlaceHolder'> <H4>Impeach Obama</H4> </DIV> <DIV class='backToButton' onclick="window.location='holsterStyles.php'";> <H4>Back to Holster Styles</H4> </DIV> <DIV class='sideButton' onclick="window.location='classic-J-Auto.php'"; onmouseover="document.style.src='images/autos.jpg'"; onmouseout="document.style.src='images/classic-J.jpg'";> <H4>Autos</H4> </DIV> <DIV class='sideButton' onclick="window.location='underConstruction.php'"; onmouseover="document.style.src='images/revolvers.jpg'"; onmouseout="document.style.src='images/classic-J.jpg'";> <H4>Revolvers</H4> </DIV> <DIV class='sideButtonPlaceHolder'> <H4>Impeach Obama</H4> </DIV> <DIV class='sideButton'onclick="window.location='underConstruction.php'"; onmouseover="document.style.src='images/beltLoopStyles.jpg'"; onmouseout="document.style.src='images/classic-J.jpg'";> <H4>Belt Loop Styles</H4> </DIV> <DIV class='sideButton'onclick="window.location='underConstruction.php'";> <H4>Color & Patterns</H4> </DIV> </TD><TD width='50%'> <IMG src='images/classic-J.jpg' border='2' name='style' id='Index'> </TD><TD width='25%' valign='top' align='right'> <DIV class='sideButtonPlaceHolder'> <H4>Impeach Obama</H4> </DIV> <DIV class='sideButton' onclick="window.location='underConstruction.php'";> <H4> Select This Style </H4> </DIV> <DIV class='sideButtonPlaceHolder'> <H4>Impeach Obama</H4> </DIV> <DIV class='backToButton' onclick="window.location='underConstruction.php'";> <H4> See My Selections </H4> </DIV> </TD></TR> </TABLE> </DIV> </BODY> </HTML>
Modified by cor-el
Chosen solution
Tools > Page Info > General now shows that the main page is recognized as windows-1252 just like the others and is no longer in UTF-16LE format.
There is still some red text in the page source about Firefox complaining that a space is missing between attributes.
Read this answer in context 👍 0All Replies (12)
I'm not seeing any issues with the CSS file on your website.
Did you check the Web Console (Firefox/Tools > Web Developer) for error messages?
Does this only happen if you use the Back button?
Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.
- Switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance
- Do NOT click the Reset button on the Safe Mode start window
Yes it happens with the back button and it happens in the safe mode
These are the errors thrown
Unexpected end of file while searching for ',' or '{'. Ruleset ignored due to bad selector. FortSeldenArmory.css:1 Unexpected end of file while searching for closing } of invalid rule set. FortSeldenArmory.css:1
I can find no problem with the CSS file. If I delete say the first character in the file and replace it with the same character the file works.
to get to the problem on my site click the "Holsters" tab click the "Styles" tab then click the "Classic J" tab
that is where the problem is
here is the code for the CSS file:
/********/ /* BODY */ /********/
body { background-image: url('Images/BackGroundLeather.jpg'); background-color: #002200; }
/************/ /*** TEXT ***/ /************/
H1 { text-align: center; color: #CC2200; margin-top: 2px; margin-bottom: 2px; font-family: "Times New Roman"; font-size: 40px; }
H4 { text-align: center; color: #ffffff; margin: 1px; font-family: "Arial"; font-size: 14px; }
H4.BlackCenter { color: #000000; }
H4.BlackLeft { color: #000000; text-align: left; }
H4.RedLeft { color: #CC2200; text-align: left; }
/*************/ /*** IMAGE ***/ /*************/
img#Header { height: 100px; width: auto; }
img#Index { width: 98%; height: auto; }
/***********/ /*** DIV ***/ /***********/
div#main { background: #ffffff; position: relative; margin-left: 90px; margin-right: 90px; margin-top: 10px; margin-bottom: 15px; min-height: 600px; min-width: 1000px; }
div#header { background: #ffffff; width: 100%; border-style: double; border-color: #808080; border-width: 0px; border-bottom-width: 8px; }
div#menubar { background: #808080; width: 100%; height: 31px; margin-bottom: 5px; }
div.menuButtons { background: #454545; border-style: solid; border-color: #000000; border-width: 2px; height: 21px; width: 165px; }
div.menuButtons:hover { background: #858585; }
div.sideButton { background: #454545; margin: 0px; margin-bottom: 2px; margin-left: 2px; border-style: solid; border-color: #000000; border-width: 2px; height: 21px; width: 160px; }
div.sideButton:hover { background: #858585; }
div.sideButtonPlaceHolder { background: #ffffff; margin: 0px; margin-left: 2px; margin-top: 2px; border-style: solid; border-color: #ffffff; border-width: 2px; height: 21px; width: 160px; }
div.backToButton { background: #4545FF; margin: 0px; margin-left: 2px; margin-bottom: 2px; border-style: solid; border-color: #000000; border-width: 2px; height: 21px; width: 160px; }
So of these various cases, only the Back button causes the problem?
- Initial load
- Reload (Ctrl+r)
- Reload bypassing cached files (Ctrl+Shift+r)
- Back button
- Navigate to the page through a link
If that's correct, try disabling the feature that tries to save time redrawing the page when you go back:
(1) In a new tab, type or paste about:config in the address bar and press Enter. Click the button promising to be careful.
(2) In the search box above the list, type or paste sess and pause while the list is filtered
(3) Double-click the browser.sessionhistory.max_total_viewers preference and change the value from -1 to 0 (that's a zero).
(Please don't change any other similar-sounding settings to 0 or you may disable Firefox's ability to save/restore your open windows and tabs.)
Then reload the problem page. Hopefully after that you won't need to reload. Any luck?
Incidentally, your <!DOCTYPE> declaration specifies xhtml but your code isn't xhtml, which has various strict requirements about lower casing all your tags and attributes, and many other arcane things. I suggest using an HTML doctype instead. The most modern one is the simplest:
<!DOCTYPE html>
Most browsers are pretty forgiving of wrong doctypes, but just in case.
Changed the settings and the problem still exists.
changed the doctype to simple html
problem still persists
The browses seem to recognize the CSS file.
when I go into the developers tool console on the edit css tab I can see the CSS code. The CSS lists no rules. While in this tool if I delete one character (any character even in the comments) and replace it with the same character so that the code has not changed the page reloads it self correctly. The page lists 17 rules.
If I go to the page by link or using the back button it fails to read the CSS page.
All of the other pages on this site us this same CSS file and they work just fine. All of my other test browsers run the page. It is kind of a head scratcher.
Page Info shows that that page is send as UTF-16LE and starts with a ÿþ BOM as you can see if you inspect this file in the Network log > Response.
The CSS file and the files on other pages that work are send as windows-1252.
So you need to re-save this file to the same encoding as used by the other files and maybe consider to switch for all files to Unicode as that is more of this time.
Modified by cor-el
Oh, I didn't realize the problem was on that page (the link took me to the home page).
The above posted steps did it for me:
click the "Holsters" tab click the "Styles" tab then click the "Classic J" tab
That shows the problem, but it took some effort to check the PHP page because the view page source shows a western encoding.
The page source also show some unprocessed PHP code at the start, so the server is probably confused as well by the unexpected UTF-16 encoding.
Modified by cor-el
The page behaves the same when I take the PHP out. Eventually I intend to set some session vars with some of the buttons but first I need to get the page working.
You need to use an editor to safe the classic-J.php file as UTF-8 as it currently is in UTF-16LE format and start with the UTF-16LE Bye Order Mark.
Firefox requires that all files use the same encoding and mixing 16 bit and 8-bit formats doesn't work and shows the behavior that you see with 0 rules recognized. You need to upload that classic-J.php file in UTF-8 encoding to the server to replace the current version that is in UTF-16LE encoding.
See this thread about a similar issue with UTF-16LE encoding of the main HTML file:
Modified by cor-el
I am not sure but here is what fixed it -- I started a new PHP Page -- Pasted all of the code in it from the page that was not working. named it the same thing and uploaded it and it now works.
Chosen Solution
Tools > Page Info > General now shows that the main page is recognized as windows-1252 just like the others and is no longer in UTF-16LE format.
There is still some red text in the page source about Firefox complaining that a space is missing between attributes.