I have a website hosted by siteground, and my custom 404 page is SOMETIMES missing it's stylesheet. I contacted support but they saw it working fine, assumed I just codded it wrong, and told me to get help form a professional web programmer... (of course I did test before contacting them to be sure it was not my fault)
Anyways, the way that siteground allowes you to create a custom 404 page is to add your html code to a form in your control panel, wich creates a 404.shtml in your main folder. The .shtml contains all your html. I have done the following test to narrow down the problem.
created a not404.html in my main folder with code copy pasted from my 404.shtml that is in the same folder. It loaded with my stylesheet applied no problem.
tried prompting a 404 page with both bad hyperlinks, and by typing pages that do not exist. When I am having the problem with my stylesheet missing, none of thease pages have css, but when I am not having the problem, they all have css applied.
What I think it is: I think that the 404.shtml is not really in my main folder, but just appears to be there, and sometimes that link breaks and the 404.shtml is actualy acessed somewere else on sitegrounds server, therefor the style link would not work properly. This would explain the intermittent css failor. But this is just logic, not understanding.
The only thing I can think of that would be wrong on my end is if there is more than one way to link stylesheets, and my way is a bit unstable. Here is the format I use.
<link type='text/css' rel='stylesheet' href='css/404.css'>
I know this might be a difficult question, but it would be pretty satisfying to figure this out and inform them of the problem with their site.
Change the href for the style tag to be absolute. So this:
<link type='text/css' rel='stylesheet' href='css/404.css'>
Becomes this:
<link type='text/css' rel='stylesheet' href='/path/to/css/404.css'>
css/404.css is a relative path. If the path is something like /path/to/nonextant/page it will try to load the stylesheet from /path/to/nonextant/page/css which does not exist.
Use an absolute path:
/css/404.css
Related
I imagine this has been asked time and time again, but i've not seen the answer I'm looking for.
Im doing some simple tests with a HTML file and CSS file trying to stop the page from render blocking the CSS, running the site through page insights ( google )
Now i've seen answers like this:
<link rel="stylesheet" href="style.20180530.css?ver=1.0" media="none" onload="if(media!='all')media='all'">
and I've seen answers like this:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="preload" onload="this.rel='stylesheet';this.removeAttribute('onload');" as="style">
Both of which I am fine with, for the google fonts! But not for the main styles of the page, I don't think its a good user experience to see a page with no styles and then all of a sudden they load in.
Obviously you can eliminate any blocking of CSS by sticking the whole lot as inline styles, but again I don't think this is good practice, you're outputting all styles to a HTML page and not loading them via a style sheet.
I've seen sites actually load the styles like so:
<link rel='stylesheet' id='main-css' href='./style.2018052108.css?ver=4.9' type='text/css' media='all' />
Heres a link to the page insight speed test on the. I know the site is running wordpress. If you view page source it uses the exact same as i've used above.
And they aren't Render Blocking at all... How?
Im on a https I'm using cloudflare and my style sheet is compressed and only around 24bytes and I'm still getting render blocking.
Why?
How to avoid it?
The CSS loaded as an external request is always render blocking, you can't avoid it. The recommendation on pagespeed insights is that you don't do any css request before the content is loaded, in order to avoid the unstyled effect they suggest that you inline the CSS needed to display the content before the fold.
The page on your example is doing exactly that, they inline some css content (check the source code and search for the style tag), then, when the content is loaded they add an external stylesheet with javascript.
All that said, this is a recommendation, you can ignore it if you are happy with the performance of your page, if you want to follow the recommendation you can apply some techniques to achieve this in an automation way.
As always, in css-tricks you have a great introduction post to these techniques: https://css-tricks.com/authoring-critical-fold-css/
The key to the Google PageSpeed insights is above-the-fold render blocking. If you check the site that you linked as your page speed test reference, there are no strictly inline styles - you are correct. However, they have a <style>...</style> block inside of their <head> that sets all of their most important styles for above-the-fold content. That means those styles render immediately, and all other supporting styles will load soon after - but your visitors (and Google PageSpeed) will not notice the difference.
I am not sure what's going on, but my personal site - built with Jekyll and hosted on Github pages - has been exhibiting odd css styles behavior as of the last few weeks or so.
I originally set it up on Jekyll 1.something-or-other. I am aware that it is at 3.something now and for the longest time, through 2 etc. I have not had a problem with the styles, everthing was fine up until less than a month ago.
I have not made any changes to the styles configuration for a couple years, but now it is only rendering the styles for the pages (Homepage, About Page, list pages for archives, etc.). But on the actual posts, it drops all the styles - looks like raw markdown and images and no layout.
I have updated jekyll to 3.1.2 on my local machine, and what's even stranger is that when I run it locally, it builds fine and all, but the problem is the opposite. That is, all the posts are formatted with the appropriate styles, but the pages (again - Homepage, about page, archive list) are unstyled.
Again, no changes in any configurations. Is there some obvious places I should be looking? I am using the jekyll bootstrap theme that's a little customized. but not much.
Site is http://subtxt.in
I found your repo and poked around. There is a lot going on there, it seems overly complex.
Using Chromes dev tools you can see the problem is with the css loading - on good pages the correct path is: <link href="/assets/themes/the-minimum/css/style.css" rel="stylesheet" media="all">
On posts where it doesn't work it is: <link href="/assets/themes//css/style.css" rel="stylesheet" media="all">
Note the missing theme name - the-minimum.
In your repo I can't quite figure out the logic, but you could simplify it I think. This file - _includes/themes/the-minimum/default.html I believe contains the head section for all pages.
The line <link href='{{ ASSET_PATH }}/css/style.css' rel="stylesheet" media="all"> I think is the problem, `ASSET_PATH seems to come back with different values. Try just hard coding it to be the correct path like:
<link href="/assets/themes/the-minimum/css/style.css" rel="stylesheet" media="all">
I'm not 100% sure this will fix it, but I think it will.
I would add a link to your repo if this doesn't fix it for you so other people can check it.
I have installed Joomla 3.x and some modules.
One of my modules is to display articles from certain categories of my articles, but when I navigate to my article, the CSS stylesheets do not load.
When I view the source, I discovered that the URL for the CSS stylesheet in the page above becomes:
<base href="http://cambridge.mywebcommunity.org/index.php/10-%E7%88%B1%E7%AB%8B%E6%96%B9%E5%8A%A8%E5%90%91%E6%9B%B4%E6%96%B0/3-welcome-to-your-blog" />
... instead of the original I put in, here:
<base href="http://cambridge.mywebcommunity.org/" />
This also happens to another CSS stylesheet from the module. The CSS URL loads like this:
<link rel="stylesheet" href="http://cambridge.mywebcommunity.org/10-爱立方动向更新/modules/mod_news_pro_gk5/interface/css/style.css" type="text/css" />
... instead of the original CSS URL that I put in:
<link rel="stylesheet" href="http://cambridge.mywebcommunity.org/modules/mod_news_pro_gk5/interface/css/style.css" type="text/css" />
So I have figured out that the issue is the URLs are not being added by Joomla correctly. How would I go about fixing this?
From what you've posted it looks like you (or extension developers) are trying to add css with absolute links. Looking at the source of your page will quickly show you that your links look different from the core links in that they are absolute not relative. You may need to look a the code in the modules doing this and fix or contact the developers and ask them to fix. Also ask them about the js.
In Joomla you add style sheets with code like this in your template index:
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
The change in behavior is most likely due to a recent security fix concerning uris in the header. I'm not going to link to details of the exploit but easy enough to find out why this was changed, but it was for good reasons.
I'm hosting a (very) small website on dropbox. I don't even have a domain name for it, I just need an easy way for my not so technology savvy teacher to access it and using an online service like wordpress or tumblr seemed like too much trouble and not as effective as I would like. I plan on putting it in my public folder and just sending her that link, something I've done in the past to show my friends websites I've made in class.
However, for some reason, CSS formatting isn't working. This is a problem I've noticed in the past but at the time wasn't important. I have it relatively linked in my head tag and it works when I pull up the files saved on my hard drive. Its only when I try to access it through dropbox do I notice this problem.
I've looked and it doesn't seem like anyone else has had this problem, I've only found multiple references to dropbox supporting CSS so I have no idea why this is happening.
This is the link in my code, and it's inside the head tag:
<link rel="stylesheet" type="text/css" href="css/format.css" />
Any help would be much appreciated. ^^
EDIT: Here's the page, there's not much on it yet but there's suppossed to be background formatting behind the navigation links in the top.
https://dl-web.dropbox.com/get/Public/EPortfolio/WritingAndForum.html?w=947f0aa1
To give an example expanding on Cfreak's comment, you would need to individually share the CSS file, then reference it in the HTML like this:
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/1234567/cssfile.css">
A much easier way (and more correct) is to put your stylesheet in a folder called css and then have a relative link to it with "./" It gets you out of the long url trouble.
<link rel="stylesheet" type="text/css" href="./css/styles.css">
https://friends-with-you.myshopify.com/
I'm trying to develop my first shopify theme. I'm trying to load a stylesheet which is hosted on another server, but the CSS is not loading. If I copy and paste that CSS directly into a file in the shopify theme, it works.
<link type="text/css" rel="stylesheet" href="http://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
What am I doing wrong at the above URL, and why isn't the css loading?
thanks!
Can you load your CSS file over both http and https? If so, change your tag to look like this:
<link type="text/css" rel="stylesheet" href="//fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
That way whether a user visits using http://yourstore.com or https://yourstore.com, they'll get the stylesheet served using the protocol they're on (and you won't get any mixed content warnings).
A little more background: http://paulirish.com/2010/the-protocol-relative-url/
Under IE7 and IE8, using this in a <link> tag will result in your content being fetched twice.
Change your link tag to use a secure URL:
<link type="text/css" rel="stylesheet" href="https://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
^
The URL you're using now works fine on its own, but since you're browsing to the Shopify store over SSL, many web browsers are going to be hesitant to load the CSS over an unsecured connection.
I just checked and pagodabox serves the CSS file just fine over SSL.
In normal HTML documents one can load stylesheets from anywhere, as long as they exist and you're able to load them by typing the URL in (which I can).
I see the page as two navigation bars with a logo on the left hand side. There are hover states with transitions to a colour background on each item. Although, when I loaded the page, Chrome warned me not to load supposedly insecure content. Before this is loaded I just see text in Times New Roman. I think this is you problem.
I use themes with WordPress and style-sheets come with them (mostly). I don't see why you couldn't just put the style-sheet in with the rest of the theme.
Overall, the answer is yes (normally) but in this case browsers may regard it as un-safe and therefore not load it.
Yes you can! But it is faster to host the stylesheet on your server/where the other files reside. If you plan to include a stylesheet from elsewhere, you could run into problems of that server being down/busy and hence your theme will not display as required. As #Blieque mentioned, some browsers may question external content causing unnecessary warning popups to a user/user-agent.