Disappearing CSS

imazer · Yesterday 22:26:52

OK folks, I think I have a poser.

I’ve been slowly modifying my old, four page Textpattern based website to make it responsive and things had been going swimmingly. That is, until my CSS suddenly stopped modifying my HTML pages.

I have been using the Pages and Styles sections to code my site, but nothing I could imagine should have severed the linkage. At first, it took me a bit to realize what had happened. After things went awry, I deliberately added divs with simple contents to each page, using both div IDs or div classes, then adding styles on the Styles page that should have pulled in the appropriate formats, but nothing worked properly.

This is the code within the head of each webpage’s HTML.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<Content-Type: image/svg+xml/>

<title><txp:page_title /></title>
<link rel="home" href="<txp:site_url />"
<txp:feed_link flavor="atom" format="link" label="Atom" />
<txp:feed_link flavor="rss" format="link" label="RSS" />
<txp:css format="link" />

So, I’ve used the standard CSS tag as you can see at the bottom and it had been working.

All of my pages are assigned to a single CSS file named, “Final_style” in the “Sections” part of the Textpattern backend.

When I use the “web developer tools” on any of four browsers, across two different computers (a Macbook Pro and an old iMac using a linux distribution), under the “network” function — with caches cleared — I get a status of 200 and the file shows up as “css.php?n=Final_style&t=default”. So the CSS file is there and available to any browser. However, when I use the same developer tools to highlight any given element in the HTML code that is supposed to be modified by the CSS page, the tools show none of my stylesheet CSS, only. “user agent stylesheet div { display: block; unicode-bidi: isolate; } “. And, as I understand it, this only indicates the browser’s own default styling.

(Weirdly, my “Back” or Search page shows only my basic web address, not the full “css.php?n=Final_style&t=default” .)

Something quite screwy is going on. A PHP problem? Database curruption?

My site is at https://imazerweb.com and my Textpattern version is v4.8.8. Diagnostics bring up nothing unusual. And I was just about to upgrade to v4.90 when all this happened, but I wanted to wait until I could fix it, so as not to confuse any problem with having changed versions. Perhaps changing version could solve it, but that is only a guess.

Does anyone have any ideas?

Thanks!

phiw13 · Today 01:39:33

I am not sure what is going here. When I look at the front of your site, I see some logo and below a large blank space where some content should be. But the https://imazerweb.com/Middle/ page show a list of articles with some styling from the stylesheet applied (e.g for the h3 element all wrapped with some heavy inline style).

No obvious error flagged. Hold on… There is: looking at the source code in Firefox it helpfully flags some screwy markup. Near the top of the page, there is a <Content-Type: image/svg+xml/> line that should not be there. It is right after the <meta name="viewport" … line.

If that does not fix it, can you put your site in debugging mode (Admin > Preferences > site subtab -> production status). Perhaps this will show some more info.

imazer · Today 03:12:30

Thanks phiw13,

What you saw on the “middle” page was inline styling that I applied while trying to figure out what was happening. The graphic elements are SVGs that are also styled inline. The rest of the pages use inline text or image files that are called up from elsewhere in a file repository , but alas, none it is CSS styled.

The <Content-Type: image/svg+xml/> code is supposed to be in the head and assists with inline SVGs. When a web server sends an SVG file to a browser, it should include the HTTP header Content-Type: image/svg+xml to ensure the browser interprets and renders the file correctly as an image.

I will try your last suggestion soon, when I have time.

Thanks again!

jakob · Today 11:50:36

Hi imazer,

I had a look too. In the browser dev tools, your css is loading correctly, but, Iike you, I initially see only the user-agent default browser styles.
I think the reason is simpler: you have changed your page markup and the styling no longer matches. If, for example, I add <div id="searchbar-box">Testing</div> to your page source, it matches an item in your stylesheet, and the browser dev tools then shows the relevant css rules from your stylesheet.

But there are quite a few small syntax errors complicating things from you. Try the W3c validator. At first glance it looks horrifying, but a lot of errors can be solved with simple things:

The Content-Type: image/svg+xml/ in your head. I think Philippe is probably right.
There’s an unclosed link rel=“home” tag in the head.
HTML comments start with <!-- rather than </--. You have some of each.
You have an svg tag inside another svg tag with a new doctype mid-page. I think that needs cleaning up so that each <svg…> … </svg> block is self-contained. Browsers are much better at handling svgs and a lot of the header information can be simplified nowadays.

Textpattern CMS

Textpattern CMS support forum

#1 Yesterday 22:26:52

Disappearing CSS

#2 Today 01:39:33

Re: Disappearing CSS

#3 Today 03:12:30

Re: Disappearing CSS

#4 Today 11:50:36

Re: Disappearing CSS

Board footer