Disappearing CSS

imazer · 2026-01-22 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 · 2026-01-23 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 · 2026-01-23 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 · 2026-01-23 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.

imazer · 2026-01-23 20:41:56

Thank you, jakob.

I did some cleaning up. Got rid of the <Content-Type: image/svg+xml /> on each page and changed the bracketing style of my comments.

However, the svg within svg thing is just a complex svg, with multiple parts. I placed it inline so the text elements could be made into links with hover effects (one can’t do such when linking the svg from a separte file).

I was perplexed by the consistant advice I kept finding from trusted sources to place code that starts “<svg xmlns=“http://ww…” just before the actual code for the svg. It looks like I’m duplicating code, and the whole appartus for positioning the image is a real pain in the ass. But the results were fine for months and I don’t think the SVGs are the culprits causing CSS failure.

I did run the HTML through a validator and it mostly pitched up some fussy stuff that, when I did extended searches on it, found that established coders argue about the relevance or conclusions.

I ran the Textpattern trace that phiw13 suggested and found nothing that screamed “problem”, but then again, I don’t read PHP.

And once again, when I use a browser’s web developer tool to bring up the source code from my Back (Search) page, there is no reference to the Final_style CSS file. The tool insists that the HTML page is the file. So, of course, if I put experimental text on the Back page that references the CSS, no styling happens. As a matter of fact, I can reproduce your <div id=“searchbar-box”>Testing</div> move and it works on every page except the Back page.

When I try the same sort of test using any other of my CSS page styling instructions, the styling does not modify the text on the page and it end up right above the pre-existing, unstyled text. Only your test or may duplication of it. This is most peculiar.

Anyway, I have been thinking I might just nuke the site, clear the databases, and start over….

But thanks again for your help.

jakob · 2026-01-23 21:39:21

I don’t think you need to nuke the site and content, but if you were to develop a fresh template for yourself, which you can do via the Presentation › Designs tab, you could perhaps make more focused use of svg so you can use normal html more easily.

Your current big svg in a second svg wrapper contains the header graphic, the title, the four links, the selected arrow and the tagline under the header graphic, and a spacer that pushes the content down, so it takes on a lot of duties that html can already do for you. My suggestion would be to leverage the crispness of scalable vector graphics for your header graphic. On closer inspection, however, I saw your svg actually embeds the ‘imazer’ title graphic as a pixel image. As an svg can’t improve a pixel graphic, you might as well opt straight for a pixel graphic like a png or jpg for the title graphic.

You could do the styled text using a webfont. Palatino is a commercial font, despite being on generations of computers, but there is a free alternative called URW Palladio, and windows has a similar font called Book Antiqua. Nowadays you only need woff2 files for each font weight and normal/italic weight you want to use. Alternatively choose another font you like from fonts.google.com and then visit https://gwfh.mranftl.com/fonts to get the woff2 files for that font. That site also gives you the css you need to implement them (they’re open source, so you don’t have to embed the fonts from google)

Then you can use regular html for your main heading and your menu items, possibly an svg or graphic for your “current menu item” arrow. The horizontal bars you can do with a styled css box with rounded border-radius, and you can set transparency on your background-color to achieve a similar overlap effect where colors cross. You don’t then have to place your layout so exactly as the graphics show up in the regular flow of html elements.

There are lots of ways of approaching it – that’s half the fun :-)

Textpattern CMS

Textpattern CMS support forum

#1 2026-01-22 22:26:52

Disappearing CSS

#2 2026-01-23 01:39:33

Re: Disappearing CSS

#3 2026-01-23 03:12:30

Re: Disappearing CSS

#4 2026-01-23 11:50:36

Re: Disappearing CSS

#5 2026-01-23 20:41:56

Re: Disappearing CSS

#6 2026-01-23 21:39:21

Re: Disappearing CSS

Board footer